Laravel Blade中Yajra Datatable服务端模式footerCallback求和报错如何解决

核心错误原因 #

• 1. 表格tfoot结构为空，调用api.column(3).footer()时找不到对应DOM节点，返回undefined触发长度读取错误
• 2. reduce方法未传入初始值，当列数据为空时会直接抛出语法错误
• 3. 开启serverSide: true服务端分页模式下，前端无法获取全量数据，原全量求和逻辑失效
• 4. total、pageTotal变量未声明，严格模式下会触发引用错误

修复步骤 #

第一步：补全表格tfoot结构 #

<table class="table table-bordered yajra-datatable" width="100%" style="color:#8D1B6B;margin-top:20px;">
    <thead>
        <tr>
            <td><b>Sr No</b></td>
            <td><b>Date</b></td>
            <td><b>Activity Name</b></td>
            <td><b>Activity Marks</b></td>
            <td><b>My Rewards</b></td>
        </tr>
    </thead>
    <tbody>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tfoot>
</table>

第二步：修正Datatable初始化逻辑 #

如果仅需要当前页求和，保留服务端分页模式的修正代码：

<script>
$(document).ready(function(){
    var table = $('.yajra-datatable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('abc') }}",
        columns: [
            {data: 'DT_RowIndex', name: 'DT_RowIndex'},
            {data: 'activityDate', name: 'activityDate'},
            {data: 'activity', name: 'activity'},
            {data: 'point', name: 'point'},
            {
                data: 'action',
                name: 'action',
                orderable: true,
                searchable: true
            },
        ],
        "footerCallback": function (row, data, start, end, display) {
            var api = this.api();
            // 格式化数值函数
            var intVal = function ( i ) {
                return typeof i === 'string' ? i.replace(/[\$,]/g, '')*1 : typeof i === 'number' ? i : 0;
            };
            // 当前页求和
            var pageData = api.column( 3, { page: 'current'} ).data(); 
            var pageTotal = pageData.length ? pageData.reduce( function (a, b) { 
                return intVal(a) + intVal(b); 
            }, 0 ) : 0; // 补充reduce初始值

            // 全量总和如果需要的话，需要后端接口返回，这里示例直接展示当前页求和
            $( api.column( 3 ).footer() ).html( '$'+pageTotal );
        }
    });
});
</script>

第三步：全量总和兼容方案（保留服务端分页） #

你需要在Laravel后端的Yajra Datatable接口逻辑中，提前计算所有符合条件的积分总和，通过with方法附加到返回数据中：

// 后端接口示例
return Datatables::of($query)
    ->addIndexColumn()
    ->addColumn('action', function($row){
        // 你的action逻辑
    })
    ->with([
        'total_point' => $query->sum('point')
    ])
    ->rawColumns(['action'])
    ->make(true);

然后前端修改ajax配置，拿到全量总和：

// 修改Datatable的ajax配置
ajax: {
    url: "{{ route('abc') }}",
    dataSrc: function (json) {
        // 把全量总和挂载到table实例上
        table.totalPoint = json.total_point;
        return json.data;
    }
},
// footerCallback里直接读取挂载的全量值
$( api.column( 3 ).footer() ).html( '$'+pageTotal +' ( $'+ table.totalPoint +' total)' );

内容的提问来源于stack exchange，提问作者Web Developer