Ajax 加载时出现 Datatables.net 错误

Question

我正在处理数据表中的一个简单的 ajax 示例，但它不起作用，我无法解释它。我有一个简单的表格如下：

<table id="tblAddresses">
  <thead>
    <tr>
        <th>Street Address</th>
        <th>City</th>
        <th>State</th>
        <th>Zip Code</th>
    </tr>
 </thead>
 <tfoot>
    <tr>
        <th>Street Address</th>
        <th>City</th>
        <th>State</th>
        <th>Zip Code</th>
        </tr>
 </tfoot>
</table>

我有一个 json 数据源，其中的数据看起来像这样（我稍微修饰了一下以便在此处显示，但文件是一行很长的行，没有换行符）。

{"data":[{"street":"19 Brook Avenue","city":"PASSAIC","state":"NJ","postcode":"07055"},
{"street":"27 Brook Avenue","city":"PASSAIC","state":"NJ","postcode":"07055"},
{"street":"31 Brook Avenue","city":"PASSAIC","state":"NJ","postcode":"07055"},
{"street":"35 Brook Avenue","city":"PASSAIC","state":"NJ","postcode":"07055"},
{"street":"39 Brook Avenue","city":"PASSAIC","state":"NJ","postcode":"07055"},
{"street":"49 Brook Avenue","city":"PASSAIC","state":"NJ","postcode":"07055"}]}

最后，我将它加载到我的文档就绪函数中：

<script type="text/javascript">
    $(document).ready(function(){
        $("#tblAddresses").DataTable({
            "ajax" : {
                "url" : "/json/07055.json",
                "columns" : [{"data":"street"},
                             {"data":"city"},
                             {"data":"state"},
                             {"data":"postcode"}]
            }
        });
    });
</script>

当我加载页面时，我看到了 ajax 调用。我可以看到浏览器接受的数据，但 DataTables 给了我一个错误：

DataTables 警告：表 id=tblAddresses - 请求第 0 行第 0 列的未知参数“0”。

我之前曾多次使用 ajax，尽管从未从静态数据文件加载。我在 JSON 或 Javascript 中找不到错误。

Answer 1

您以错误的方式绑定数据。您需要在 ajax 方法之后绑定列，如下所示，

$("#tblAddresses").DataTable({
        "ajax" : {
            "url" : "/json/07055.json",
            "type": "Get"
        }, //Here end of ajax method. Now you can bind the columns
         "columns" : [{"data":"street"},
                      {"data":"city"},
                      {"data":"state"},
                      {"data":"postcode"}]
        });

希望对你有帮助！