DataTable(). Ajax.reload() not reloading table

Question

Я заполняю строки в тело таблицы с помощью функции jQuery append, это прекрасно работает, но когда я пытаюсь выполнить поиск любых данных из таблицы, тогда таблица очищается.

Вот мой код.

for (i = 0; i < mapping.length; i++) { 
    var tr = $('<tr>' + '<td>' + ' <input type="checkbox" ' 
      + ' onchange="selectItem(this);" ' 
      + (mapping[i]['selected'] == true ? "checked" : "") 
      + ' data-el_id="' + mapping[i]['id'] + '">' 
      + ' </td>' + ' <td>' + mapping[i]['name'] + ' </td>' 
      + ' <td>' + mapping[i]['itemName'] + ' </td>' + ' <td>' 
      + mapping[i]['url'] + ' </td>' + ' </tr>'); 
    $("#tableBody").append(tr); 
} 

Answer 1

Вам нужно пройти через DataTables API для вставки строк. Я предполагаю, что ваши элементы данных выглядит следующим образом:

{ 
    "selected": true, 
    "id": 42, 
    "name": "test", 
    "itemName": "item" 
} 

Затем, если вы инициализируете таблицу, как это:

var table = $('#example').DataTable({ 
    columns : [ 
     { data: 'selected', 
      render: function (data, type, full, meta) { 
       var input = '<input type="checkbox" onchange="selectItem(this);" '; 
       input += data == true ? "checked" : ""; 
       input += ' data-el_id="' + full.id + '">'; 
       return input 
      } 
     }, 
     { data: 'name' }, 
     { data: 'itemName' } 
    ] 
}); 

Вы можете вставить все строки в цикле:

for (i = 0; i < mapping.length; i++) { 
    table.row.add(mapping[i]).draw(); 
} 

маленькая демонстрация ->http://jsfiddle.net/fu0r4oba/

Answer 2

Вы должны использовать DataTable.row.add(). Пример:

$yourDataTables.row.add([ 
counter + '.1', 
counter + '.2', 
counter + '.3', 
counter + '.4', 
counter + '.5']).draw();