Solar Confinement Solar Confinement - 3 months ago 29
jQuery Question

datatables server side population

i have spend several hours trying to find how to populate the datatables with a json that comes from the backend, here is my 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>





and the json answer that i have:



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





i have tried several approaches with no luck, basically what i want is to make the json populate the datatable so i can paginate with the datatable pagination.

does someone have a code example so i can take a look and made the changes necesary?

thanks in advance

Answer

1) Create your datatable on document.ready.

2) Send a ajax request to get json data.

3) Inside the loop, instead of creating <tr> elements use datatables fnAddData(); function. like -

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

I have created a sample

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

});

Please check this Fiddle