JQuery Datatables 实现对某一列的数据合计汇总

JQuery Datatables 实现对某一列的数据合计汇总

有两种实现方式，举例说明

第一种、JS代码如下：

var table;

table = $('#example').DataTable({
            dom: 'Bfrtip',
            scrollY: true,
            scrollX: true,
            scrollCollapse: true,
            colReorder: true,
            select: true,
            stateSave: true,
            //info: false,//关闭左下角关于行数和选中的提示
            //filter: false,//关闭搜索
            //paging: false,//关闭分页
            pagingType: "full_numbers",
            columns: [
                { title: "Name", data: "Name", className: "center" },
                { title: "Position", data: "Position" },
                { title: "Office", data: "Office" },
                { title: "Age", data: "Age" },
                { title: "Salary", data: "Salary", className: "canEditor" },
                { title: "操作", data: null, defaultContent: "<button type='button'>编辑</button>" }
            ],
            footerCallback: function (row, data, start, end, display) {
                var api = this.api(), data;
                var intVal = function (i) {
                    return typeof i === 'string' ?
                        i.replace(/[\$,]/g, '') * 1 :
                        typeof i === 'number' ? i : 0;

                };
                //当前页统计
                total = api.column(4).data().reduce(function (a, b) { return intVal(a) + intVal(b); }, 0);
                //全部统计
                pageTotal = api.column(4, { page: 'current' }).data().reduce(function (a, b) { return intVal(a) + intVal(b); }, 0);

                $(api.column(4).footer()).html(
                    '当前页:$' + pageTotal + ' ( 全部:$' + total + ')'
                );
            },
            language: {
                url: dtsLanguage
            }
        });

HTML代码如下：

<table id="example" class="table table-bordered table-condensed" style="white-space: nowrap;width:100%;cursor:pointer" cellspacing="0">
    <tfoot>
        <tr>
            <th style="border-left:0;border-right:0"></th>
            <th style="border-left:0;border-right:0"></th>
            <th style="border-left:0;border-right:0"></th>
            <th style="border-left:0;border-right:0"></th>
            <th style="border-left:0;border-right:0">数据合计：</th>
            <th style="border-left:0;border-right:0"></th>
        </tr>
    </tfoot>
</table>

 

第二种方式：

var table;

table = $('#example').DataTable({
            dom: 'Bfrtip',
            scrollY: true,
            scrollX: true,
            scrollCollapse: true,
            colReorder: true,
            select: true,
            stateSave: true,
            //info: false,//关闭左下角关于行数和选中的提示
            //filter: false,//关闭搜索
            //paging: false,//关闭分页
            pagingType: "full_numbers",
            columns: [
                { title: "Name", data: "Name", className: "center" },
                { title: "Position", data: "Position" },
                { title: "Office", data: "Office" },
                { title: "Age", data: "Age" },
                { title: "Salary", data: "Salary", className: "canEditor" },
                { title: "操作", data: null, defaultContent: "<button type='button'>编辑</button>" }
            ],
            footerCallback: function (row, data, start, end, display) {
                var data = table.search();
                var ds = table.search(data).context[0].aiDisplay;
                var Sum = 0;

                $.each(ds, function (i, e) {
                    var data = table.row(e).data();
                    Sum = Number(Sum) + Number(data.Salary);
                });
                $(".Sum").html(Sum);
            }
            language: {
                url: dtsLanguage
            }
        });

HTML代码如下：

<table id="example" class="display table table-striped table-over table-bordered" style="white-space: nowrap;width:100%;cursor:pointer" cellspacing="0">
              <thead></thead>
              <tbody></tbody>
              <tfoot>
                    <tr bgcolor="#FFCC99">
                    <th style="border-left:0;border-right:0"></th>
                    <th style="border-left:0;border-right:0"></th>
                    <th style="border-left:0;border-right:0">合计:</th>
                    <th style="border-left:0;border-right:0" class="Sum"></th>
                    <th style="border-left:0;border-right:0"></th>
                    </tr>
               </tfoot>
</table>