DataTables стороне сервера население

Question

я есть потратить несколько часов, пытаясь найти, как заполнить DataTables с JSON, исходящим из внутреннего интерфейса, вот мой код:

<script>  
 
    $(document).ready(function() { 
 
     
 
     $('#dataTables-example').DataTable({ 
 
      responsive: true, 
 
      ajax: function (data, callback, settings) { 
 
       $.ajax({ 
 
        url: "classes/service.php", 
 
        data: { 
 
         task: "getNews", 
 
         start:"1", 
 
         end:"24", 
 
        }, 
 
        type: "POST", 
 
         success:function(data){ 
 

 
          var obj = $.parseJSON(data); 
 
          var i; 
 
          var divCreator =''; 
 
          for (i = 0; i < obj.length; ++i) { 
 
           divCreator+='<tr class="odd gradeX">'; 
 
           divCreator+='<td>'+obj[i].id+'</td>'; 
 
           divCreator+='<td>'+obj[i].title+'</td>'; 
 
           divCreator+='<td>'+obj[i].date+'</td>'; 
 
           divCreator+='<td class="center">'+obj[i].order+'</td>'; 
 
           divCreator+='<td class="center">'+obj[i].active+'</td>'; 
 
           divCreator+='<td id="news_"'+obj[i].id+' class="center">Eliminar</td>'; 
 
           divCreator+='</tr>'; 
 
          } 
 

 
          //$('#content').html(''); 
 
          //$('#content').append(divCreator);   
 
          
 
         }, 
 
        
 
       }); 
 
      } 
 
       
 
     }) 
 
    
 
    }) 
 
</script>

и JSON ответ, что у меня есть:

[{"id":"2","0":"2","title":"sfgdg","1":"sfgdg","summary":"       sdfgsadfg     ","2":"       sdfgsadfg     ","content":"      sdfgsdfg      ","3":"      sdfgsdfg      ","main":"0","4":"0","keywords":"sdfgsdfg","5":"sdfgsdfg","author":"1","6":"1","order":null,"7":null,"friendly_url":"sdfgsdfgsdfg","8":"sdfgsdfgsdfg","date":"2016-08-09 19:51:37","9":"2016-08-09 19:51:37","active":"1","10":"1"},{"id":"3","0":"3","title":"test","1":"test","summary":"        test    ","2":"        test    ","content":"       test    ","3":"       test    ","main":"1","4":"1","keywords":"test","5":"test","author":"1","6":"1","order":null,"7":null,"friendly_url":"test","8":"test","date":"2016-08-09 19:52:00","9":"2016-08-09 19:52:00","active":"1","10":"1"},{"id":"4","0":"4","title":"test","1":"test","summary":"test    ","2":"test    ","content":"test           ","3":"test           ","main":"1","4":"1","keywords":"keyw","5":"keyw","author":"1","6":"1","order":null,"7":null,"friendly_url":"url_amigable","8":"url_amigable","date":"2016-08-10 11:31:50","9":"2016-08-10 11:31:50","active":"1","10":"1"},{"id":"5","0":"5","title":"test","1":"test","summary":"testt           ","2":"testt           ","content":"test           ","3":"test           ","main":"1","4":"1","keywords":"twat","5":"twat","author":"1","6":"1","order":null,"7":null,"friendly_url":"twet","8":"twet","date":"2016-08-11 08:37:23","9":"2016-08-11 08:37:23","active":"1","10":"1"},{"id":"6","0":"6","title":"test","1":"test","summary":"testt           ","2":"testt           ","content":"test           ","3":"test           ","main":"1","4":"1","keywords":"twat","5":"twat","author":"1","6":"1","order":null,"7":null,"friendly_url":"twet","8":"twet","date":"2016-08-11 08:37:29","9":"2016-08-11 08:37:29","active":"1","10":"1"},{"id":"7","0":"7","title":"test5345","1":"test5345","summary":"resumen           ","2":"resumen           ","content":"contenido           ","3":"contenido           ","main":"1","4":"1","keywords":"test","5":"test","author":"1","6":"1","order":null,"7":null,"friendly_url":"testtte","8":"testtte","date":"2016-08-11 08:46:36","9":"2016-08-11 08:46:36","active":"1","10":"1"}]

Я пробовал несколько подходов без везения, в основном то, что я хочу, чтобы заставить json заполнить данные, чтобы я мог разбиться на страницы с помощью datatable pagination.

У кого-нибудь есть пример кода, чтобы я мог взглянуть и сделал необходимые изменения?

заранее спасибо

Answer 1

1) Создайте свой DataTable на document.ready.

2) Отправьте запрос ajax, чтобы получить данные json.

3) Внутри цикла вместо создания <tr> элементы используют данные fnAddData();. как -

$('#dataTables-example').dataTable().fnAddData([first-columnval, second-columnval, etc]); 

Я создал образец

HTML

<button id="addData">Add Data</button> 

<table id="dataTable" class="display" cellspacing="0" width="100%"> 
      <thead> 
       <tr>     
        <th>Id</th> 
        <th>Title</th> 
        <th>Summary</th> 
       </tr> 
      </thead> 
      <tbody> 
      </tbody> 
     </table> 

JS

$(document).ready(function() { 
//creating a temp json. you will get this from server side after ajax call 
var jsonString = '[{"Id": 1,"Title": "Title1","Summary": "Summary1" },{"Id": 2,"Title": "Title2","Summary": "Summary2"}]'; 

$("#addData").click(function(){ 
     var data = JSON.parse(jsonString); 
     for(i=0; i<data.length;i++) { 
       $('#dataTable').dataTable().fnAddData([ 
       data[i].Id, 
      data[i].Summary, 
      data[i].Title 
     ]); 
     } 
     //console.log(JSON.parse(jsonString)); 
}); 

    function createDatatable() { 
    $('#dataTable').dataTable({ 
     bFilter: false, 
     bLengthChange: false, 
     "sDom": 'lfrtip', 
     pagingType: 'full', 
     "oLanguage": { 
      "oPaginate": { 
       "sFirst": "<b><<</b>", 
       "sLast": "<b>>></b>", 
       "sNext": "<b>></b>", 
       "sPrevious": "<b><</b>" 
      } 
     } 
    }); 
} 

createDatatable(); 

}); 

Пожалуйста, проверьте это Fiddle