Как добавить несколько строк в datatables jquery

Я использовал ссылку https://datatables.net/reference/api/rows.add%28%29, но данные, показывающие таблицу как [object,object]. Как показать объект в строке. Я использовал JSON.stringify(obj), он также не работает.

HTML

<table id="exampleTable">
 <thead>
  <tr>
   <th>Year</th>
   <th>Month</th>
   <th>Savings</th>
  </tr>
 </thead>
 <tbody>
   <tr>
    <td>2012</td>
    <td>January</td>
    <td>$100</td>
   </tr>
   <tr>
    <td>2012</td>
    <td>February</td>
    <td>$80</td>
   </tr>
 </table>

$('#addRows').click(); 

var table3 = $('#exampleTable').DataTable(); 

$('#addRows').on( 'click', function () { 
    table3.row.add(
       [ { "Year": "Tiger Nixon", "Month": "System Architect", "Savings": "$3,120" },
         {"Year": "Tiger Nixon", "Month": "System Architect", "Savings": "$3,120" }]
    ).draw(); 
});

Ответ 1

Я создал два образца в FIDDLE.

Если вы хотите использовать объекты в строках add, вы должны добавить столбцы в свой datatable init:

var table3 = $('#exampleTable').DataTable({
    data:[{ "Year": "2012", "Month": "January", "Savings": "$100" },
      { "Year": "2012", "Month": "February", "Savings": "$80" }],
    columns:[{data: 'Year'},
        {data: "Month"},
        {data: "Savings"}]
});

но если вы не хотите этого делать, вы можете использовать следующий синтаксис в строках:

table4.rows.add(
   [[ "Tiger Nixon", "System Architect","$3,120" ],
     ["Tiger Nixon", "System Architect", "$3,120" ]]
).draw();

Посмотрите FIDDLE более информативным.

Ответ 2

Я тоже столкнулся с этой проблемой - я обнаружил, что документация будет менее ясной. Их пример на https://datatables.net/reference/api/rows.add() не работает, когда я передаю свой собственный динамически созданный массив объектов.

Чтобы заставить его работать, вы должны указывать имена столбцов при создании экземпляров DataTables.

В любом случае нижеследующее является рабочим решением.

var DataTable = $('#tableName').DataTable({
  iDisplayLength: 15,   // number of rows to display
  columns: [
    { data: 'id' },
    { data: 'name' },
    { data: 'car' },
  ]
});

// assume this is a dynamically created array of objects
var persons = [
  {
    id: 1,
    name: 'John',
    car: 'Mercedes',
  }, 
  {
    id: 2,
    name: 'Dave',
    car: 'BMW',
  }, 
  {
    id: 3,
    name: 'Ken',
    car: 'Jeep',
  },  
];

DataTable.rows.add(persons).draw();

Ответ 3

Попробуйте

var data = [
  {id : 1, name : 'John'},
  {id : 2, name : 'Joe'},
  {id : 3, name : 'Mathan'},
  {id : 4, name : 'Mani'},
  {id : 4, name : 'Karthik'}
];

//Таблица данных инициализации

var DataTable = $('#tableName').DataTable({
 iDisplayLength: 15,  
 columns: [
 { data: 'id' },
 { data: 'name' },
 ]
});

DataTable.rows.add(data).draw();