Question

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

var links = Array.from(document.querySelectorAll("a")); // creates an actual array from the node list returned by document.query
var links_to_hide = links.slice(14, 22); // gets just the bits we want to affect from the array, and is still an array

// ok so 'links_to_hide' is an array, and it is an array of 'a' anchor tags.
// if I go into the inspector and set the visibility property it affects the tag but doing it via scripting seems to not work.
// so if links_to_hide is an array it should be possible to 

for(var i = links_to_hide.length; i <= links_to_hide.length; i++){
  links_to_hide.style['visibility'] = 'hidden';
}
// this for loop doesn't seem to actually affect anything

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

有人有一个代码示例，所以我可以看看并做出必要的更改吗？

提前致谢

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

数据表服务器端人口

1 个答案: