Прямо добавление нижнего колонтитула в JQuery DataTable

Question

Я хочу, чтобы добавить нижний колонтитул в JQuery datatable, как и для тела таблицы, используя метод dt.row.add(). Как это возможно без использования метода обратного вызова нижнего колонтитула?

Спасибо.

Answer 1

У DataTables отсутствует API для динамического добавления нижнего колонтитула, если это то, что вы хотите. Он проверяет наличие элемента <tfoot> только при инициализации.

Чтобы добавить колонтитул динамически:

1. Уничтожить таблицу с destroy().

   $('#example').DataTable().destroy();

2. Append <tfoot><tr><th></th></tr></tfoot> к <table> элемента убедившись, что вы добавляете так много <th></th> элементов, сколько столбцов в таблице.

3. Переинициализируйте таблицу с теми же опциями:

   $('#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();