jquery - 带有来自 ajax 输出的总行数的 jQuery 数据表页脚

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({

我希望这有帮助。