数据表服务器端人口

我花了几个小时试图找到如何使用来自后端的json填充数据表,这是我的代码:

 $(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+=''; divCreator+=''+obj[i].id+''; divCreator+=''+obj[i].title+''; divCreator+=''+obj[i].date+''; divCreator+=''+obj[i].order+''; divCreator+=''+obj[i].active+''; divCreator+='Eliminar'; divCreator+=''; } //$('#content').html(''); //$('#content').append(divCreator); }, }); } }) })  

和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填充数据表,以便我可以使用数据表分页进行分页。

有人有一个代码示例,所以我可以看看并使变化必要吗?

提前致谢

1)在document.ready上创建数据表。

2)发送ajax请求以获取json数据。

3)在循环内部,使用数据表fnAddData();而不是创建

元素fnAddData(); function。 喜欢 –

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

我创建了一个样本

HTML

  
Id Title Summary

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<<", "sLast": ">>", "sNext": ">", "sPrevious": "<" } } }); } createDatatable(); }); 

请检查这个Fiddle