jQuery DataTables列出了JSON数据

时间:2017-09-21 07:01:46

标签: jquery jquery-ui datatable jquery-plugins datatables

$.ajax({
        url: "https://localhost:450/rest/products?pageNumber=1&pageCount=100",
        type:"post",
        dataType:"json",
        traditional:true,
        contentType : "application/json; charset=utf-8",
        processData : false,
        data:
            JSON.stringify(hostAddresses)

        ,



       success:function (response) {
            console.log(response);
            var trHTML ='';
           $('.js-exportable').DataTable({
               dom: 'Bfrtip',
               responsive: true,
               buttons: [
                   'copy', 'csv', 'excel', 'pdf', 'print'
               ]
           });
            for(var i = 0 ; i < response.length ; i++)
            {

                for(var j = 0 ; j < response[i].Products.length ; j ++)
                {


                   // trHTML  += '<tr><td>' +response[i].IP + '</td><td>' + response[i].Products[j].Product + '</td><td>' + response[i].Products[j].CVECount + '</td>';
                    //console.log(response[i].Products[j].Product);
                    //console.log(trHTML);
                    //$('#ProductsTableBody').append(trHTML);
                }

            }


        },
        error:function (xhr) {
            console.log("Error...");

        }
    })

我有这个代码。注释行中的代码是添加到常规有序列表的过程。但不适用于jQuery dataTables。我怎样才能做到这一点。

其次,在添加这些dataTable之后,我如何为列表项分配id,以便在单击时指向与该列表项关联的特殊页面。

1 个答案:

答案 0 :(得分:0)

这里的问题是您在填充表格之前初始化DataTables。因此它只能处理一个空表。

您需要在DataTable循环后移动for初始化程序:

    success:function (response) {
        console.log(response);
        var trHTML ='';

        for(var i = 0 ; i < response.length ; i++)
        {

            for(var j = 0 ; j < response[i].Products.length ; j ++)
            {


                trHTML  += '<tr><td>' +response[i].IP + '</td><td>' + response[i].Products[j].Product + '</td><td>' + response[i].Products[j].CVECount + '</td>';
                console.log(response[i].Products[j].Product);
                console.log(trHTML);
                $('#ProductsTableBody').append(trHTML);
            }

        }
        $('.js-exportable').DataTable({
           dom: 'Bfrtip',
           responsive: true,
           buttons: [
               'copy', 'csv', 'excel', 'pdf', 'print'
           ]
       });

    },