Нет данных в таблице в режиме обработки на стороне сервера

Question

Я хочу показать свои данные записи в таблице, усиленной плагином jQuery DataTables, используя режим обработки на стороне сервера. Я следовал за документами Datatables Server side, но в моей таблице я не могу показать данные записи.

Вот мой Ajax ответ:

{ 
    "draw": 0, 
    "recordsTotal": 4, 
    "recordsFiltered": 4, 
    "data": [ 
     [ 
      27, 
      "Brokoli Segar", 
      "25000" 
     ], 
     [ 
      28, 
      "Tomat Super", 
      "2000" 
     ], 
     [ 
      29, 
      "Oreo Roll", 
      "9400" 
     ], 
     [ 
      30, 
      "Close Up Toothpaste Fire Freeze", 
      "7000" 
     ] 
    ], 
    "queries": [ 
     { 
      "query": "select count(*) as aggregate from (select '1' as row_count from `product` where `product`.`deleted_at` is null) count_row_table", 
      "bindings": [], 
      "time": 0.79 
     }, 
     { 
      "query": "select `id`, `name`, `price` from `product` where `product`.`deleted_at` is null", 
      "bindings": [], 
      "time": 0.68 
     } 
    ], 
    "input": [] 
} 

Мой HTML таблице:

<table class="table table-bordered" id="tabelStokBarang"> 
     <thead> 
      <tr> 
       <th>ID</th> 
       <th>Nama Barang</th> 
       <th>Harga Barang</th> 
      </tr> 
     </thead> 
    </table> 

Мои JavaScript:

$('#tabelStokBarang').DataTable({ 
     processing: true, 
     serverSide: true, 
     ajax: '{!! route('admin.product.stock.getAll') !!}', 
     columns: [ 
      { data: 'id', name: 'id' }, 
      { data: 'name', name: 'name' }, 
      { data: 'price', name: 'price' } 
     ] 
    }); 

Мой результат в таблице по-прежнему "Нет данных". Я не знаю, что я пропустил.

Answer 1

Удалить columns в соответствии с вашими данными, потому что вы возвращаетесь строки как массивы, но с columns собственности ожидавших строками объектов со свойствами id, name и price. Смотрите код ниже:

$('#tabelStokBarang').DataTable({ 
    processing: true, 
    serverSide: true, 
    ajax: '{!! route('admin.product.stock.getAll') !!}' 
}); 

Другой потенциальной проблемой является то, что ваш параметр draw является 0. Ваш скрипт должен вернуть параметр draw с тем же значением параметра draw в запросе. Я считаю, что он начинается с 1, а затем увеличивается с каждым запросом.

Из manual:

draw

Жеребьевка счетчик, что этот объект является ответом на - от параметра draw передается как часть запроса данных. Обратите внимание, что это настоятельно рекомендуется по соображениям безопасности указать, что вы передаете этот параметр целому числу, а не просто отсылаете обратно клиенту то, что оно отправило в параметре draw, чтобы предотвратить атаки на сценарии Cross Site Scripting (XSS).