JQuery DataTable дает ошибку при визуализации

Question

Я пытаюсь заполнить JQuery DataTable с данными с помощью AJAX:

HTML

<table id="table-productMaterials"> 
    <thead> 
     <tr> 
      <th>Id</th> 
      <th>Name</th> 
      <th>Quantity</th> 
      <th>Status</th> 
     </tr> 
    </thead> 
</table> 

Javascript

$(document).ready(function() { 
    var options = { 
     "processing": true, 
     "ajax": { 
      "url": "ProductMaterials.ashx?action=get", 
      "type": "POST", 
      "data": { 
       "productId": $('#product_id').val() 
      }, 
      "columns": [ 
         { "data": "Id" }, 
         { "data": "MaterialName" }, 
         { "data": "Quantity" }, 
         { "data": "Status" } 
      ] 
     }, 
    }; 
    table = $('#table-productMaterials').DataTable(options); 
}); 

Общий выход обработчика:

{"data": [{"Id":1,"Quantity":15.00,"Status":"1","MaterialName":"Iron","ProductName":"French onion soup"},{"Id":3,"Quantity":14.00,"Status":"1","MaterialName":"Nails","ProductName":"French onion soup"}]} 

erro г сообщение при перегрузке данных: DataTables предупреждение: таблица ID = таблица-productMaterials - Запрошенный неизвестный параметр «0» для строки 0. Для получения дополнительной информации об этой ошибке, см http://datatables.net/tn/4

Я refered на эту страницу и прочитать пример но, похоже, не может быть решена. Что я делаю неправильно?

Answer 1

Вы должны поместить свойство колонки вне АЯКС собственности, как это:

$(document).ready(function() { 
    var options = { 
     "processing": true, 
     "ajax": { 
      "url": "ProductMaterials.ashx?action=get", 
      "type": "POST", 
      "data": { 
       "productId": $('#product_id').val() 
      }, 
     }, 
     "columns": [ 
           { "data": "Id" }, 
           { "data": "MaterialName" }, 
           { "data": "Quantity" }, 
           { "data": "Status" } 
     ] 
    }; 
    table = $('#table-productMaterials').DataTable(options); 
}); 

Тогда он будет работать.