数据库服务器端人口
问题描述：
我花了几个小时试图找到一个来自后台的json来填充数据表，这里是我的代码：
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>
回答我有：
[{"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分页。
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.
提前感谢
答
1）在文档上创建您的datatable
1) Create your datatable on document.ready.
2）发送ajax请求以获取json数据。
2) Send a ajax request to get json data.
3）在循环中，而不是创建< tr> 元素使用数据表 fnAddData（）; 函数。喜欢 -
3) Inside the loop, instead of creating <tr> elements use datatables fnAddData(); function. like -
$('#dataTables-example').dataTable().fnAddData([first-columnval, second-columnval, etc]);
我创建了一个示例
strong> HTML
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