Question

我想直接向JQuery数据表添加一个页脚，就像我使用dt.row.add（）方法对表的主体一样。如果不使用页脚回调方法，这怎么可能？

感谢。

Answer 1

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

动态添加页脚：

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

使用相同的选项重新初始化表格：

$('#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论坛中，我找到了这个解决方案，它对我有用：

<body>


<div class="A B">  

<div id="anchor-x">
<...>
</div>

<div id="anchor-y">
<...>
</div>

<div id="anchor-y">
<...>
</div>

</body>
</html>

在JQuery DataTable中直接添加页脚

4 个答案: