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

【问题标题】：How do I make an Ajax call with jquery Datatables?如何使用 jquery Datatables 进行 Ajax 调用？
【发布时间】：2014-01-23 00:29:21
【问题描述】：

我正在从 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"}, ...}

【问题讨论】：

标签： ajax jquery-datatables

【解决方案1】：

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

【讨论】：

【解决方案2】：

您的 JSON 显示“iTotalDisplayRecords”：0

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

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

【讨论】：

【解决方案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.

【讨论】：