jQuery DataTables 列出 JSON 数据

Question

$.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 分配给列表项，以便在单击时引导与该列表项关联的特殊页面。

Answer 1

这里的问题是您在填充表之前初始化 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'
           ]
       });

    },