javascript - 如何在单击功能时将 json 加载到 jquery 上的数据表？

Question

我有这样的 json 数据，现在只要根据发送值单击搜索按钮，我就需要将此 json 数据输入到数据表中。

[
{
       "port_code":"BOM",
       "cont_details_id":"9",
       "price":"44.000",
       "cont_price":"500",
       "cont_no":"11",
       "cont_size":"20",
       "cont_type":"GP"
},
{
       "port_code":"BOM",
       "cont_details_id":"10",
       "price":"87.000",
       "cont_price":"500",
       "cont_no":"22",
       "cont_size":"20",
       "cont_type":"GP"        
},
.....
.....
etc.,
]

这就是我在 jquery 中尝试存储 json $("#search").click(function() 在此函数中我正在调用 json 文件并尝试存储在数据表中，但是它不起作用。请有人帮助我。谢谢。

$(document).ready(function() 
    {

    var oTable = $('#example').DataTable();

    $("#search").click(function()
    {
        $.post("invoice_ajax.php",
        {
            loc  : $("#location").val(),
            cust : $("#customer_details_id").val()
        },
        function(data)
        {
            $("#text").html(data);
            var s = JSON.parse(data);

                        for(var i = 0; i < s.length; i++) 
                        {   
                            oTable.fnAddData([
                            s[i].block_id,
                            s[i].block_id,
                            s[i].block_id,
                            s[i].block_id,
                            s[i].block_id,
                            s[i].block_id,
                            s[i].block_id
                            ]);
                        } // End For
        });
    }); 


    });

Answer 1

您几乎是对的，只是您在 1.10.x API 上使用旧的 1.9.x fnAddData 方法。改为执行此操作:

oTable.row.add([
   s[i].port_code,
   s[i].cont_details_id,
   s[i].price,
   s[i].cont_price,
   s[i].cont_no,
   s[i].cont_size,
   s[i].cont_type
]).draw();

或

var oTable = $('#example').dataTable();
...
oTable.fnAddData([
   s[i].port_code,
   s[i].cont_details_id,
   s[i].price,
   s[i].cont_price,
   s[i].cont_no,
   s[i].cont_size,
   s[i].cont_type
]);