Question

我正在尝试使用fnFooterCallback将列中的金额总计为总和，我无法弄清楚的部分是，我需要该页面的总数，我将从aaData中获得好处。

如何使用ajax输出在aaData中显示的输出显示页脚？

Answer 1

不确定这是否是您正在寻找的，但我试一试。

要在页脚中显示，请将此代码放在<thead>和<tbody>

之后

<tfoot>
  <tr>
    <th>Total:</th> 
    <th></th>
  </tr>
</tfoot>

因此它可以显示在页脚中。

将此添加到启动：

"fnFooterCallback": function ( nRow, aaData, iStart, iEnd, aiDisplay ) {
    /*
     * Calculate the total market share for all browsers in this table (ie inc. outside
     * the pagination)
     */
    var iTotalMarket = 0;
    for ( var i=0 ; i<aaData.length ; i++ )
    {
        iTotalMarket += aaData[i][1]*1;
    }

    /* Calculate the market share for browsers on this page */
    var iPageMarket = 0;
    for ( var i=iStart ; i<iEnd ; i++ )
    {
        iPageMarket += aaData[ aiDisplay[i] ][1]*1;
    }

    /* Modify the footer row to match what we want */
    var nCells = nRow.getElementsByTagName('th');
    nCells[1].innerHTML = parseInt(iPageMarket);
}

将aaData[i][1]中的数字更改为您要计算的列（从0开始，而不是从1开始）。

注意：如果行中有特殊字符，则无法删除它。

Answer 2

此代码也有效，易于使用和理解：

将其添加到您的刀片视图中：

<tfoot>
   <tr>
       <th>Total:</th> 
       <th></th>
   </tr>
</tfoot>

th的数量取决于你的行数。

你的js中添加了这个footerCallback

"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;
                        };

                        // This is for the Total text
                        var col0 = api
                            .column( 0 )
                            .data()
                            .reduce( function (a, b) {
                                return intVal(a) + intVal(b);
                            }, 0 ); 
                    //First, please note var name col1 and we use it then
                    var col1 = api
                        .column( 1 )
                        .data()
                        .reduce( function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0 );

                    $( api.column( 0 ).footer() ).html('Total');
                    // Here you can add the rows
                    $( api.column( 1 ).footer() ).html(col1); 
                    },

此代码需要放在

之前

table.dataTable({

我希望这会有所帮助。

jquery数据表页脚，包含ajax输出的总行数

2 个答案: