将基于JS中列标签的格式功能应用于所有表行

如何解决将基于JS中列标签的格式功能应用于所有表行

我想基于标题标签定义列格式化程序。

作为一个简单的例子，如果我在表格的标题中：

<th data-formatter="roundTo4dp">4 Decimal Place Rounded Numbers</th>
<th data-formatter="roundTo0dp">0 Decimal Place Rounded Numbers</th>

我需要一些JS / JQuery代码来调用并将“数据格式化程序”功能（在其他地方定义）应用于该列的每一行。

我看过一些文章考虑从一列（Datatable get the values of all rows of a specific column）获取所有单元格，但是我看不到如何迭代这些单元格并应用从data-formatter参数提取的函数名。

任何帮助将不胜感激。

最终，我只想显示一个具有日期的数据表，并且在一个表中需要一些不同的数字格式（0dp，2dp和4dp），因此我需要对每列进行一些格式化。

解决方法

您可以使用列渲染来获取格式化程序并在定义时运行它：

function roundTo4dp(data) {
    return parseFloat(data).toFixed(4);
}
function roundTo0dp(data) {
    return parseFloat(data).toFixed(0);
}

$('#myTable').DataTable({
    columns: [
        {data: 'Name'},{data: 'Position'},{data: 'Office'},{data: 'Age',render: function (data,type,row,meta) {
                var formatter = $(meta.settings.nTHead).find('th').eq(meta.col).data('formatter');
                return (formatter == undefined ? data : window[formatter](data));
            }},{data: 'Start date'},{
            data: 'Salary',meta) {
                var formatter = $(meta.settings.nTHead).find('th').eq(meta.col).data('formatter');
                return (formatter == undefined ? data : window[formatter](data));
            }
        }]
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

<table id="myTable" class="display" style="width:100%">
    <thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th data-formatter="roundTo0dp">Age</th>
        <th>Start date</th>
        <th data-formatter="roundTo4dp">Salary</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>320,800</td>
    </tr>
    <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>170,750</td>
    </tr>
    <tr>
        <td>Ashton Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>86,000</td>
    </tr>
    <tr>
        <td>Cedric Kelly</td>
        <td>Senior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>2012/03/29</td>
        <td>433,060</td>
    </tr>
    <tr>
        <td>Airi Satou</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>33</td>
        <td>2008/11/28</td>
        <td>162,700</td>
    </tr>
    <tr>
        <td>Brielle Williamson</td>
        <td>Integration Specialist</td>
        <td>New York</td>
        <td>61</td>
        <td>2012/12/02</td>
        <td>372,000</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
    </tfoot>
</table>