在 JQuery DataTable 中直接添加页脚

Question

我想直接将页脚添加到 JQuery 数据 table，就像我使用 dt.row.add() 方法为 table 的主体添加一样.如果不使用页脚回调方法，这怎么可能？

谢谢。

Answer 1

DataTables 似乎没有 API 动态添加页脚，如果您需要的话。它仅在初始化期间检查是否存在 <tfoot> 元素。

要动态添加页脚：

用destroy()摧毁table。
```
$('#example').DataTable().destroy();
```
将 <tfoot><tr><th></th></tr></tfoot> 附加到 <table> 元素，确保添加与 table 中的列一样多的 <th></th> 元素。

使用相同的选项重新初始化 table:

$('#example').DataTable({ /* your options here */ });

Answer 2

DataTables 不会自动生成 TFOOT。您需要使用 DOM、javascript、jquery 等明确地执行此操作。然后初始化dataTable。

document.getElementById('example').createTFoot().insertRow(0);
var dTable = $('#example').DataTable();
$(dTable.table().footer()).html('Your html content here ....');

Answer 3

这是我在没有页脚回调的情况下实现的方法

HTML

<table data-toggle="data-table" class="table compact" cellspacing="0" id="dt">
    <thead>
      <tr>
        <th>S/N</th>
        <th>Name</th>
        <th>Class</th>
        <th>Term</th>
        <th>Session</th>
        <th>Date</th>
        <th>Amount</th>
        <th>Status</th>
      </tr>
     </thead>
     <tfoot>
       <tr id="tfooter">
       </tr>
     </tfoot>
     <tbody id="payment">
     </tbody>
</table>

JavaScript

 var dt = $('#dt').dataTable().api();
 $.each(resp.payments, function (key, value) {
    //add data from server via ajax
       dt.row.add([ ]);
 });

 //add tfoot
   $('#tfooter').append(
      '<th colspan="6"><strong>TOTAL</strong></th>'+
      '<th colspan="2"><strong>&#8358;'+ total +'</strong></th>'
    );

//then redraw
  dt.draw();

Answer 4

在 DataTables 论坛中，我找到了这个解决方案，它适用于我：

$.fn.createTable = function() {
              $(this).append("<tfoot><tr><th></th><th></th></tr></tfoot>");
              return this.DataTable( {
                                        data     : dataSet,
                                        "scrollY": 400,
                                        "scrollX": true,
                                        "paging" : false,
                                        "info"   : false,
                                        fixedHeader: {
                                            header: true,
                                            footer: true
                                        },        
                                         "footerCallback": function ( tfoot, data, start, end, display ) {
                                            $(tfoot).find('th').eq(0).html( "Hello Word");
                                        }        
                                    } );
                            };
// Ejecutar función
$('#'+idTabla).createTable();

在 JQuery DataTable 中直接添加页脚

Directly adding footer in JQuery DataTable

jquery

datatables