如何在Yajra DataTable页脚设置总计 实现单列/多列分页或全局求和

一、后端接口配置（Laravel 侧） #

• 单独查询需要求和列的全局总数据，通过with方法附加到 DataTable 接口的响应结果中

public function index()
{
    if (request()->ajax()) {
        // 统计所有数据的全局总和
        $globalTotals = Order::selectRaw('SUM(quantity) as total_quantity, SUM(amount) as total_amount')->first();
        
        return datatables()->of(Order::query())
            // 附加全局总计数据到响应
            ->with([
                'globalTotal' => [
                    'quantity' => $globalTotals->total_quantity,
                    'amount' => $globalTotals->total_amount
                ]
            ])
            // 按业务需求格式化列数据
            ->editColumn('amount', fn($row) => '$' . number_format($row->amount, 2))
            ->make(true);
    }
    return view('orders.index');
}

二、前端表格配置 #

• 提前在表格DOM中定义<tfoot>标签预留总计展示位
• 初始化DataTable时配置footerCallback，同时计算当前分页求和、读取全局总计数据渲染到页脚

<!-- 表格基础结构 -->
<table id="dataTable" class="table table-bordered">
    <thead>
        <tr>
            <th>ID</th>
            <th>商品名称</th>
            <th>数量</th>
            <th>金额</th>
        </tr>
    </thead>
    <tbody></tbody>
    <!-- 预留页脚位置 -->
    <tfoot>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </tfoot>
</table>

$(function() {
    let table = $('#dataTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('orders.index') }}",
        columns: [
            {data: 'id', name: 'id'},
            {data: 'name', name: 'name'},
            {data: 'quantity', name: 'quantity'},
            {data: 'amount', name: 'amount'},
        ],
        footerCallback: function (row, data, start, end, display) {
            let api = this.api();
            
            // 计算当前分页的列总和
            let pageTotalQty = api.column(2, {page: 'current'}).data()
                .reduce((prev, curr) => parseInt(prev) + parseInt(curr), 0);
            let pageTotalAmount = api.column(3, {page: 'current'}).data()
                .reduce((prev, curr) => parseFloat(prev) + parseFloat(curr.replace(/[^0-9.]/g, '')), 0);
            
            // 获取接口返回的全局总计数据
            let globalTotal = api.ajax.json().globalTotal;
            
            // 渲染页脚内容，按需保留分页/全局总计
            $(api.column(0).footer()).html('Total');
            $(api.column(2).footer()).html(`
                分页总计：${pageTotalQty} <br>
                全局总计：${globalTotal.quantity}
            `);
            $(api.column(3).footer()).html(`
                分页总计：$${pageTotalAmount.toFixed(2)} <br>
                全局总计：$${parseFloat(globalTotal.amount).toFixed(2)}
            `);
        }
    });
});

注意：如果仅需要展示分页总计或者全局总计其中一种，直接删除footerCallback中不需要的渲染代码即可

常见异常修复 #

• 求和结果显示NaN：计算前先剥离列数据中的货币符号、千位分隔符等格式化字符，统一转换为数字类型再求和
• 全局总计不显示：确认后端with方法返回的字段名和前端api.ajax.json()取值的字段完全一致
• 多列求和复用：可以提前定义需要求和的列索引数组，循环调用reduce方法计算，避免重复编写逻辑

内容的提问来源于stack exchange，提问作者M. Kamrul H.