Datatables.net добавить строку не работает

Question

Я использую составную jquery datatables.net. Я создаю свой стол, но когда я хотел бы добавить строку «вручную», строка не добавляется в конце таблицы. Я вижу, что после добавления строки таблицы моя консоль.log (данные) в Render 'Email' отображает '123', но строка не добавляется.

Мой код JavaScript:

$(document).ready(function() { 
    var $select = $('<select id="selectoption"></select>'); 
    var $checkbox = $('<div class="container"></div>'); 
    var $input = $('<input type="text">'); 
    var $span = $('<span></span>'); 
    var table = $('#griduser').DataTable({ 
     "processing": true, 
     "serverSide": true, 
     "dom": '<"toolbar">frtip', 
     "ajax": { 
      "url": "/User/ReadUserTest/", 
      "dataType": "json" 
     }, 
     columns: [ 
      {"data": "Delete"}, 
      {"data": "Id", 
       render: function (data, type, row, meta) { 
        var $clone = $span.clone(); 
        $clone.attr("id", "userid"); 
        $clone.append('<label>' + data + '</label>'); 
        return $clone.wrap('<span></span>').parent().html(); 
       } 
      }, 
      {"data": "UserName", 
       render: function (data, type, row, meta) { 
        var $clone = $input.clone(); 
        $clone.attr("id", "userid"); 
        $clone.attr('value', data); 
        return $clone.wrap('<div></div>').parent().html(); 
       } 
      }, 
      {"data": "Login", 
       render: function (data, type, row, meta) { 
        console.log(data); 
        var $clone = $input.clone(); 
        $clone.attr("id", "userlogin"); 
        $clone.attr('value', data); 
        $clone.val(data.Login); 
        return $clone.wrap('<div></div>').parent().html(); 
       } 
      }, 
      {"data": "Email", 
       render: function (data, type, row, meta) { 
        var $clone = $input.clone(); 
        $clone.attr("id", "email"); 
        $clone.attr('value', data); 
        $clone.val(data.Email); 
        return $clone.wrap('<div></div>').parent().html(); 
       } 
      }, 
      {"data": "Save"} 
     ] 
     , 
     "columnDefs": [ 
      {"targets": -1, 
       "data": null, 
       "defaultContent": "<input type='image' id='saverole' src='/images/save.png' alt='Submit' width='48' height='48'>" 
      }, 
      {"targets": 0, 
       "data": null, 
       "defaultContent": "<input type='image' id='saverole' src='/images/remove.png' alt='Submit' width='48' height='48'>" 
      } 
     ], 
     "initComplete": function (settings, json) { 
      table.row.add({ 
       Delete: 'delete123', Id: 'id123', UserName: 'name123', Login: 'login123', Email: 'email123', Save: 'save123' 
      }).draw();     
     }, 
    }); 
}); 

Json данные:

{"sEcho":null,"iTotalRecords":2,"iTotalDisplayRecords":2,"aaData":  
[{"Id":"09b90bca-7bf5-4956-91c9- 0d7cee180ba5","UserName":"nouveau@test.com","Login":"nouveau@test.com","Email":" nouveau@test.com"}, 
{"Id":"86f9eabd-ec1e-40b1-af5b- fea899d4c1c0","UserName":"nouveautest@test.com","Login":"nouveautest@test.com"," Email":"nouveautest@test.com"}]} 

И мой HTML код:

<table id="griduser" class="display" cellspacing="0" width="100%"> 
    <thead> 
     <tr> 
      <th></th> 
      <th>Id</th> 
      <th>Nom</th> 
      <th>Login</th> 
      <th>Email</th> 
      <th></th> 
     </tr> 
    </thead> 

    <tfoot> 
     <tr> 
      <th></th> 
      <th>Id</th> 
      <th>Nom</th> 
      <th>Login</th> 
      <th>Email</th> 
      <th></th> 
     </tr> 
    </tfoot> 
</table> 

Спасибо за вашу помощь

Update:

Ошибка с oninitcomplete:

-in яваскрипта qjuery.datatables.js (строка 2022):

var aoData = oSettings.aoData[ iDataIndex ]; 
if (aoData.nTr === null) 
{ 
_fnCreateTr(oSettings, iDataIndex); 
} 

-in console.log ошибки: Uncaught TypeError: Не удается прочитать свойство 'НТР' из неопределенный

Answer 1

Добавление объекта/буквальным как это

table.row.add({ 
    Login: '123', Email: '123', Id: '123', Save: '123', UserName: '123' 
}).draw(); 

правильна если вы определили правильные крепления data в columns, как вы на самом деле сделали выше. Тем не менее, вы должны хотя бы иметь те же свойства в объекте, который вы собираетесь вставить, как вы определили в columns. dataTables будет искать каждое связывание data в объекте и не вставляться, если некоторые свойства отсутствуют. Delete отсутствует объект:

table.row.add({ 
    Delete: 'something', Login: '123', Email: '123', Id: '123', Save: '123', UserName: '123' 
}).draw(); 

должен работать.

Answer 2

надстройку Funtion принимает список в параметре не dictionnary, используйте

table.row.add([ 
     'Login Value','Email Value','Id Value', 'Save Value', 'UserName Value' 
    ] 
    ).draw(); 

Используя этот метод, значения должны быть в том же порядке, что и столбцы таблицы. Это Exemple предполагает, что ваша таблица выглядит следующим образом:

__________________________________________________ 
|--login--|--email--|--id--|--save--|--username--| 

EDIT

С HTML кодом, я могу видеть, у вас есть 6 колонок, когда вы добавляете строку, вы должны определить значение для каждого столбца, как так:

table.row.add([ 
    "", "09b90bca-7bf5-4956-91c9- 0d7cee180ba5", "nouveau@test.com", "nouveau@test.com", "nouveau@test.com", "" 
] 
).draw();