DataTables：页脚不会根据搜索更新

Posted 2023-05-09

【中文标题】DataTables：页脚不会根据搜索更新

【英文标题】：DataTables: Footer doesn't get updated depending on the search

【发布时间】：2020-01-29 04:25:21

【问题描述】：

使用 JQuery 数据表，特别是下面的函数来汇总特定列中的总数

footerCallback: function ( row, data, start, end, display ) 
    var api = this.api();
    // Remove the formatting to get integer data for summation
    var intVal = function ( i ) 

        return typeof i === 'string' ?
            i.replace(/[\$,]/g, '')*1 :
            typeof i === 'number' ?
                i : 0;

    ;
    var i;
    for (i = 27; i <=122; i++)  
        if (api.column(i).data().length)
            var total = api.column( i ).data().reduce( function (a, b) 
                return intVal(a) + intVal(b);
                ) 
            
        else  
            total = 0
        ;

        // Update footer
        $( api.column(i).footer() ).html(total);
    
,

到目前为止一切正常，显示总计。

但是，当我搜索带有 table.columns(12).search('No',true,false).draw(); 之类的列时，页脚不会更新。

我读过https://datatables.net/forums/discussion/41651/should-footercallback-be-called-when-clearing-a-search-filter，它说调用draw()，它应该得到更新，但它没有

有什么建议吗？

【参考方案1】：

您需要为所有column() API 方法调用指定第二个参数selector-modifier，并在检索列数据时使用 search:'applied' 应用搜索。默认情况下，当您使用column() API 方法时，DataTables 不会应用搜索。

例如：

var data = api.column(i,  search:'applied' ).data();
if (data.length)
    var total = data.reduce( function (a, b) 
        return intVal(a) + intVal(b);
    );
 else  
    total = 0;