Question

如何使用 jquery Datatables 进行 Ajax 调用？

2014-01-23

4735

ajax datatables

我正在从 jquery Datatables 进行 AJAX 调用以填充表格。AJAX 调用正在进行，并返回有效的 JSON（使用 JSONlint 验证）。发生的情况是，Datatables 在 AJAX 调用完成并返回数据之前创建了一个空表。

我已将 Web 服务返回的 JSON 放入文件中，并将其用作 sAjaxSource，Datatables 正确地填充了表格，因此这是 Datatables 不等待 AJAX 调用完成的问题。

Datatables 似乎知道他们的 AJAX 调用存在一些问题，因为他们所包含的文档显示了如何从 AJAX 调用填充表格，只是从文件加载数据。

有没有人让 Datatables 与真正的 AJAX 调用一起工作（而不是从文件加载 JSON）？任何指向适用于实际 AJAX 调用的 Datatables 示例的指针都将不胜感激。

我还可以切换到不同的表库。我决定使用 Datatables 而不是 Jtable，但如果 Datatables 不支持 AJAX，我可能不得不切换。

这是我的代码。欢迎提供反馈。

<html>
<head>
<link rel="stylesheet" type="text/css"
    href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
</head>
<body>
    <table id="example">
        <thead>
            <tr>
                <th>Serial Number</th>
                <th>Sales Order</th>
                <th>Part Number</th>
                <th>Part Description</th>
                <th>Shipped Date</th>
                <th>Date Sold</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <script type="text/javascript" charset="utf8"
        src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" charset="utf8"
        src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>


    <script>
    $(function() {
        $("#example").dataTable({
              "bServerSide": true,
              "sAjaxSource": "/mtprest/Product/productByStatus?status=awaiting",
              "aoColumns": [{
                    "mData":"serialNumber"
                  },{
                    "mData": "sONumber"
                  },{
                    "mData": "partNumber"
                  },{
                    "mData": "desc"
                  },{
                    "mData":"shippedDate"
                  },{
                    "mData":"soldDate"
                  },{
                    "mData":"status"
                  }
                ]                      
            });
    });
    </script>

</body>
</html>

这是 Web 服务返回的 JSON：

{"iTotalRecords":12,"iTotalDisplayRecords":0,"sEcho":"","aaData":[{"productId":47209009,"serialNumber":"0909090","sONumber":"dev35001484_","partNumber":"987654KP-GL","desc":"TEST MEC","shippedDate":null,"soldDate":null,"status":"Awaiting Validation"}, ...}

Answer 1

当我尝试使用 AjaxSource 时，我遇到了很多问题。我最终自己进行了 Web 服务调用，然后在初始化 DataTable 时将返回的 JSON 数据传递到 DataTable 中。

Answer 2

您的 JSON 显示“iTotalDisplayRecords”：0

我认为数据表不显示任何行是正确的。看看

http://datatables.net/usage/server-side

Answer 3

//Try This

$("#example").dataTable({
              "bServerSide": true,
              "sAjaxSource": "/mtprest/Product/productByStatus?status=awaiting",
              "columns": [{
                    "mData":"serialNumber"
                  },{
                    "data": "sONumber"
                  },{
                    "data": "partNumber"
                  }
                ],
                "columnDef" :  
                   { "targets" : 0, //first row
                     "render" : function (data) {
                                  return data
                                }
                    },
                   { "targets" : 1, //second row
                     "render" : function (data) {
                                  return data
                                }
                    },
                   { "targets" : 2, //third row
                     "render" : function (data) {
                                  return data
                                }
                    }
            });

//Do it for the number of rows you need.