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>