DataTables - как получить столбцы DATASRC

Question

Так что мой бэкенд возвращается

[{"id":"371","ref":"35\/2016","creator":"Name","status":"part1","username":"user","date":"2016-12-14 00:00:00","title":null,"site":null,"location":"","comment":null}] 

Я видел dataSrc : "" используется в качестве примера, но в этом примере: https://datatables.net/examples/ajax/custom_data_property.html они обычно не делают пример того, как получить это когда они представляют собой массив объектов.

Любые советы о том, как использовать работу columns: [...], будут оценены.

Answer 1

Похоже, что это было потому, что я неправильно инициализировал DataTable. Но я также нашел здесь пример: https://datatables.net/examples/ajax/custom_data_flat.html

Итак, вы по-прежнему используете «данные» в столбце.

https://datatables.net/examples/ajax/custom_data_flat.html

$(document).ready(function() { 
    $('#example').DataTable({ 
     "ajax": { 
      "url": "data/objects_root_array.txt", 
      "dataSrc": "" 
     }, 
     "columns": [ 
      { "data": "name" }, 
      { "data": "position" }, 
      { "data": "office" }, 
      { "data": "extn" }, 
      { "data": "start_date" }, 
      { "data": "salary" } 
     ] 
    }); 
}); 

Answer 2

Проверьте эту ссылку. https://datatables.net/examples/ajax/objects_subarrays.html

См. Вкладку ajax (ниже), чтобы узнать, что возвращает сервер.
Использование колонок также использовалось. Но для получения более подробной информации см https://datatables.net/reference/option/columns.data

EDIT: Измените запрос Ajax, как этот

"ajax": { 
      "url" : "", 
      "dataSrc" : function (object){ 
       return object.data; 
      } 
     } 

Answer 3

Метод 1: взглянуть here я думаю, что это ваш ответ.

Метод 2: Вы можете Разбираем ваш ответ JSON и создать массив multidimention и передать его в DATASRC how to convert JSON array into JavaScript 2D array

Способ 3: Вы можете Parse свой ответ и создать структуру таблицы что-то вроде ниже, и добавьте его в DIV:

<table id="example" class="display" cellspacing="0" width="100%"> 
      <thead> 
       <tr> 
        <th>Name</th> 
        <th>Position</th> 
        <th>Office</th> 
        <th>Extn.</th> 
        <th>Start date</th> 
        <th>Salary</th> 
       </tr> 
      </thead> 
<tbody> 
<tr> 
<td>Name xyz</td> 
<td>Position xyz</td> 
<td>Office xyz</td> 
<td>Extn xyz</td> 
<td>05-Jan-2017</td> 
<td>10lacs</td> 
</tr> 
<tbody> 
      <tfoot> 
       <tr> 
        <th>Name</th> 
        <th>Position</th> 
        <th>Office</th> 
        <th>Extn.</th> 
        <th>Start date</th> 
        <th>Salary</th> 
       </tr> 
      </tfoot> 
     </table> 

Теперь применить код JQuery, как показано ниже

$('#example').DataTable({ 
       responsive: true, 
       "pagingType": "full_numbers", 
       dom: 'Bfrtip', 
       buttons: [ 
        'copy', 'csv', 'excel', 'pdf', 'print' 
       ] 
    });