Javascript 如何向我的datatable添加列和功能？

我已经创建了一个datatable，它在页脚中有一个多搜索功能，我希望有一个功能，可以将当前显示或搜索的内容的所有工资相加。我不知道该怎么做

---

这是我的表格HTML代码

    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="./search.js"></script>
    <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

   <table id="example" class="display" style="width:100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>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>
                <tr>
                    <td>Herrod Chandler</td>
                    <td>Sales Assistant</td>
                    <td>San Francisco</td>
                    <td>59</td>
                    <td>2012/08/06</td>
                    <td>$137,500</td>
                </tr>
                <tr>
                    <td>Rhona Davidson</td>
                    <td>Integration Specialist</td>
                    <td>Tokyo</td>
                    <td>55</td>
                    <td>2010/10/14</td>
                    <td>$327,900</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>

 $(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#example tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );

    // DataTable
    var table = $('#example').DataTable();

    // Apply the search
    table.columns().every( function () {
        var that = this;

        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );
  } );

名称
位置
办公室
年龄
开始日期
薪水
老虎尼克松
系统架构师
爱丁堡
61
2011/04/25
$320,800
加勒特温特斯
会计
东京
63
2011/07/25
$170,750
阿什顿考克斯
初级技术作者
旧金山
66
2009/01/12
$86,000
塞德里克·凯利
高级Javascript开发人员
爱丁堡
22
2012/03/29
$433,060
佐藤航空
会计
东京
33
2008/11/28
$162,700
布里尔·威廉姆森
集成专家
纽约
61
2012/12/02
$372,000
赫罗德·钱德勒
营业员
旧金山
59
2012/08/06
$137,500
罗娜·戴维森
集成专家
东京
55
2010/10/14
$327,900
名称
位置
办公室
年龄
开始日期
薪水

---

这是我的search.js代码

    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="./search.js"></script>
    <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

   <table id="example" class="display" style="width:100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>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>
                <tr>
                    <td>Herrod Chandler</td>
                    <td>Sales Assistant</td>
                    <td>San Francisco</td>
                    <td>59</td>
                    <td>2012/08/06</td>
                    <td>$137,500</td>
                </tr>
                <tr>
                    <td>Rhona Davidson</td>
                    <td>Integration Specialist</td>
                    <td>Tokyo</td>
                    <td>55</td>
                    <td>2010/10/14</td>
                    <td>$327,900</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>

 $(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#example tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );

    // DataTable
    var table = $('#example').DataTable();

    // Apply the search
    table.columns().every( function () {
        var that = this;

        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );
  } );

$（文档）.ready（函数（）{
//设置-向每个页脚单元格添加文本输入
$（'#示例tfoot th'）。每个（函数（）{
var title=$（this.text（）；
$（this.html（“”）；
} );
//数据表
变量表=$（“#示例”）.DataTable（）；
//应用搜索
table.columns（）.every（函数（）{
var=这个；
$（'input'，this.footer（））.on（'keyup change'，函数（）{
如果（that.search（）！==this.value）{
那个
.search（this.value）
.draw（）；
}
} );
} );
} );

---

我正试图添加一个总和功能，以这个代码，它加起来的总工资列，有人可以帮我吗？我不知道怎么做，请使用下面的代码求和

jQuery.fn.dataTable.Api.register( 'sum()', function ( ) {
return this.flatten().reduce( function ( a, b ) {
    if ( typeof a === 'string' ) {
        a = a.replace(/[^\d.-]/g, '') * 1;
    }
    if ( typeof b === 'string' ) {
        b = b.replace(/[^\d.-]/g, '') * 1;
    }

    return a + b;
}, 0 );
} );

然后，你可以得到的总和后，你用

that.column（5，{“filter”：“applied”}.data（）.sum（）

另外，省略逗号和$。有关更多信息，请参阅。
使用下面的代码求和

jQuery.fn.dataTable.Api.register( 'sum()', function ( ) {
return this.flatten().reduce( function ( a, b ) {
    if ( typeof a === 'string' ) {
        a = a.replace(/[^\d.-]/g, '') * 1;
    }
    if ( typeof b === 'string' ) {
        b = b.replace(/[^\d.-]/g, '') * 1;
    }

    return a + b;
}, 0 );
} );

然后，你可以得到的总和后，你用

that.column（5，{“filter”：“applied”}.data（）.sum（）

另外，省略逗号和$。更多信息，请参阅。
该主题已在这里多次提出，因此，您可以询问我之前在这方面的问题

这里的技巧是将选择器修饰符
{search:'applied'}
与方法（如果需要汇总单列）或多列合计一起使用

可以使用另一种有用的方法
.data（）
将数据提取到数组（，）中

为了在每次重新绘制表时刷新总计，您可以使用选项来指定回调函数，该函数重新计算可见行的总计，并将结果放入所需节点

查看该方法的以下现场演示：


//将数字格式化为货币（在当前上下文中不是必需的）
const num2 curr=num=>'$'+num.toFixed（2）。替换（/\d（？=（\d{3}）+\）/g，'$&'）；
//数据表初始化
const dataTable=$（“#示例”）.dataTable({
dom：‘t’，
//附加单个过滤器输入
initComplete:function（）{
this.api（）.columns（）.every（函数（））{
$（this.footer（））.html（``）
})
},
//计算总工资并将其输入span#totalsalary
drawCallback:function（）{
const totalSalary=此
.api（）
.column（5，{搜索：'applied'}）
.data（）
.toArray（）
//删除“$”、“，”，保留小数分隔符“”，汇总
.reduce（（总计，薪资）=>总计+=数字（薪资.替换（/[^0-9\.]/g'）），0；
//在文本中插入结果
$（'#totalsalary'）.text（`筛选行的总薪资为：${num2curr（totalsalary）}`）；
}
});
//个别过滤
$（'#示例'）。在（'keyup'，'tfoot input'，function（）上{
dataTable.column（$（this.attr（'colindex'））.search（$（this.val（））.draw（）
});
namepositionofficeart datesalary tiger nixon系统架构爱丁堡612011/04/25$320000加雷特温特萨克伯爵东京632011/07/25$170750Ashton Cox初级技术作者San Francisco662009/01/12$86000塞德里克·凯利森尼尔Javascript开发于192012/03/29$433060airi Satouaccountanttokyo2008/11/28$162700Brielle威廉森集成公司