JQuery DataTables 在页脚和默认视图中显示总计

Question

我正在尝试使用 JQuery Datatables 在表的页脚中显示 SUM()，并默认为 50。我认为我的问题源于我缺乏 JQuery 经验，但我不确定。以下是我的语法：

$(document).ready(function() {
    $('#example').DataTable({
        dom: 'B<"clear">lfrtip',
        buttons: ['csv', 'excel', 'print'],
        "iDisplayLength": 50,
        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;
            };
            var totalColumn = function(colNum) {
                // Total over all pages
                total = api
                    .column(colNum)
                    .data()
                    .reduce(function(a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);
                pageTotal = api
                    .column(colNum, {
                        page: 'current'
                    })
                    .data()
                    .reduce(function(a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);
                $(api.column(colNum).footer()).html(
                    '$' + pageTotal + ' ( $' + total + ' total)'
                );
            }
            totalColumn(2);
            totalColumn(3);
            totalColumn(4);
            totalColumn(5);
            totalColumn(6);
            totalColumn(7);
            totalColumn(8);
            totalColumn(9);
        }
    });
});

这会出现以下错误：

未捕获的类型错误：无法读取未定义的属性“sDefaultContent”
在 B (datatables.min.js:sourcemap:92)
在 t.Xb (datatables.min.js:sourcemap:196)
在 t.iterator (datatables.min.js:sourcemap:175)
在 t。 (datatables.min.js:sourcemap:199)
在 t。 (datatables.min.js:sourcemap:179)
在 t.data (datatables.min.js:sourcemap:178)
在 totalColumn (ar-detail-summary:468)
在 n.fn.init.footerCallback (ar-detail-summary:496)
在 datatables.min.js:sourcemap:150
在 Function.map (datatables.min.js:sourcemap:14)

如果我删除这些行（或将它们注释掉），则会显示网格（没有排序和显示按钮）。

    dom: 'B<"clear">lfrtip',
    buttons: ['csv', 'excel', 'print'],
    "iDisplayLength": 50,

应如何编辑此语法以提供默认排序 50、具有“打印”按钮以及在页脚中添加总和？

编辑
这就是我的表的设置方式和从 MS SQL 查询结果中填充的方式

$sql = "SELECT Top 1 * from testdata";
$db->setQuery($sql);
$rows = $db->loadObjectList();
$numberRows = count($rows);
if ($numberRows >= 1) {
    ?>
    <div id="dvdata">
        <table id="example">
            <thead>
                <tr>
                    <th>Name </th>
                    <th>Total Sale Amt </th>
                    <th>Total Invoice Amt </th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
            </tfoot>
            <?php
            foreach ($rows as $res) {
                print "<tr>";
                print "<td>" . $res->Name . "</td>";
                print "<td>" . "$" . number_format(round($res->tsa)) . "</td>";
                print "<td>" . "$" . number_format(round($res->tia)) . "</td>";
                print "</tr>";
            }
        } else {
            echo "<strong>Nothing To Show Here.</strong>";
        }
    }
    ?>
</table>
</div>

Answer 1

据我所知，参考这个答案是正确的：Change the default number of rows to display on one "page"。

根据 DataTables 的版本，stackoverflow 问题的答案中列出了三种可能的解决方案。

我尝试从上面导入您的代码，并且我的 DataTable 内容显示，但在控制台中，按钮 print 仅出现一个错误。如果你仍然挣扎，请添加评论，我会看看我能做些什么。

希望这会有所帮助！