数据表服务器端人口

Question

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

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

以及我得到的 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 填充数据表，这样我就可以用数据表分页进行分页。

是否有人提供代码示例，以便我查看并进行必要的更改？

提前致谢

Answer 1

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

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

3) 在循环内部，不是创建<tr> 元素，而是使用数据表fnAddData(); 函数。喜欢-

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

我已经创建了一个示例

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

});

请查看Fiddle