Как передать строку таблицы html в DataTable.net fnAddData

Я использую плагин DataTable.net, и мне интересно, как добавить динамически строку в существующую таблицу?

http://datatables.net/examples/api/add_row.html

Я рассматриваю этот пример, и у него есть это как

/* Global variable for the DataTables object */
var oTable;

/* Global var for counter */
var giCount = 2;

$(document).ready(function() {
    oTable = $('#example').dataTable();
} );

function fnClickAddRow() {
    oTable.fnAddData( [
        giCount+".1",
        giCount+".2",
        giCount+".3",
        giCount+".4" ] );

    giCount++;
}

но мне интересно, что произойдет, если я хочу, чтобы у меня уже была строка таблицы?

Скажите, что это моя таблица.

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Теперь у меня это

var newRow = '<tr><td>row 3, cell 1</td><td>row 3, cell 2</td></tr>';

Как добавить его через addRow?

Я пробовал oTable.fnAddData(newRow);, но похоже, что это не сработает.

Поэтому я не уверен, как это сделать.

ОТВЕТЫ

Ответ 1

Вызвать fnAddData с массивом значений, которые вы хотите добавить, например:

oTable.fnAddData(["row 3, cell 1", "row 3, cell 2"]);

Из версии 1.10 используйте метод row.add(), описанный @froilanq

Здесь вы можете прочитать более подробную информацию из API, здесь приведены аргументы:

  • строки массива. Данные, добавляемые в таблицу. Этот массив должен иметь ту же длину, что и количество столбцов в исходной таблице HTML.
    или
    строки массива массива: 2D-массив данных, добавляемых в таблицу. Внутренний массив должен иметь ту же длину, что и количество столбцов в исходной таблице HTML.
  • boolean: необязательно - перерисовать таблицу или нет после добавления новых данных (по умолчанию true)

Ответ 2

Решено просто:

var newRow = "<tr><td>row 3, cell 1</td><td>row 3, cell 2</td></tr>";
var table = $('table').DataTable();
table.row.add($(newRow )).draw();

Ответ 3

Если у вас все еще есть эта проблема, посмотрите на плагин DataTables fnAddTr.

Я думаю, он может решить ваши проблемы.

Ответ 4

jQuery DataTables 1.10 позволяет сделать это изначально без необходимости в плагине. Возьмите самую последнюю ветку развития здесь: https://github.com/DataTables/DataTables/tree/1_10_wip/media/js

Вот пример кода о том, как его использовать:

$(document).ready(function() {
  var t1 = $('#t1').DataTable();
  var t2 = $('#t2').DataTable();

  $('#t1 tbody').on( 'click', 'tr', function () {
    t1.row( this ).remove().draw();
    t2.row.add( this ).draw();
  } );

  $('#t2 tbody').on( 'click', 'tr', function () {
    t2.row( this ).remove().draw();
    t1.row.add( this ).draw();
  } );
} );

Ссылка: http://www.datatables.net/forums/discussion/comment/52595#Comment_52595

Дополнительная информация

Обратите внимание, что вызов выше - это DataTable(), а не dataTable(). Если ваш объект dataTable() обращается к нему следующим образом:

t1 = $('#t1').dataTable();
t1.DataTable().row.add(this).draw();

Ответ 5

var dataTable = $('.table').DataTable();

// get the html table rows then
dataTable.destroy();

$("tbody").empty().promise().done(function(){
    $("tbody").html(data);
    dataTable = $(".table").DataTable();
});

Это работает, если вы хотите применить всю строку html, если у вас есть встроенные css или дополнительные html-теги внутри разделов таблицы.

Ответ 6

Привет мои друзья: этот код работал хорошо для меня.

var oTable = $('#datatable').dataTable();
var api = oTable.api(true);
var newRow = {
                colName1: '',
                colName2: 0,
                colName3: 0,
                colName4: 0
             };
api.row.add(newRow).draw();

удачи.