带有 JSON 数据的 jQuery DataTables 列表答案

【问题标题】：jQuery DataTables listing with JSON data带有 JSON 数据的 jQuery DataTables 列表
【发布时间】：2018-03-02 10:08:06
【问题描述】：

$.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 数据表。我怎样才能做到这一点。

其次，添加这些数据表后，我如何将 id 分配给列表项，以便在单击时引导与该列表项关联的特殊页面。

【问题讨论】：

您最好使用 DataTables 为您生成表格。看这里：datatables.net/reference/option/ajax
我已经检查过了，但我找不到解决方案
也许您提供了您返回的数据样本？

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

【解决方案1】：

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

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

    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'
           ]
       });

    },

【讨论】：