Datentabellen Serverseite Bevölkerung

Question

ich mehrere Stunden verbringen versuchen, wie zu finden, die Datentabellen mit einem json aufzufüllen, die aus dem Backend kommt, hier ist mein Code:

<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>

und die json Antwort, die ich habe:

[{"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"}]

Ich habe mehrere Ansätze ohne Glück versucht, im Grunde, was ich will ist, dass die Json die Datentabelle bevölkern, so dass ich mit der Datentabelle Paginierung paginieren kann.

Hat jemand ein Codebeispiel, damit ich einen Blick darauf werfen kann und die notwendigen Änderungen vorgenommen habe?

Dank im Voraus

Answer 1

1) Erstellen Sie Ihre Datentabelle auf document.ready.

2) Senden Sie eine AJAX-Anfrage, um JSON-Daten zu erhalten.

3) Innerhalb der Schleife, anstatt <tr> Elemente zu erstellen, verwenden Sie die Daten fnAddData(); Funktion. wie -

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

Ich habe eine Probe erstellt

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(); 

}); 

Bitte überprüfen Sie diese Fiddle