数据表服务器端人口
我花了几个小时试图找到如何使用来自后端的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