Question

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

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

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

有没有人让Datatables使用真正的AJAX调用（不从文件中加载JSON）？我很感激任何指向适用于真实AJAX调用的Datatables示例的指针。

我也可以切换到不同的表库。我决定在Jtable上使用Datatables，但如果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服务，然后在初始化时将返回的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.

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

3 个答案: