从 json 文件渲染 DataTable 行答案

【问题标题】：Rendering DataTable rows from json file从 json 文件渲染 DataTable 行
【发布时间】：2016-05-12 11:37:51
【问题描述】：

我正在尝试从放置在同一目录中的 json 文件呈现 DataTable-rows。但不幸的是，DataTable-Body 保持为空，并且控制台中没有显示错误。

这是（简化的）HTML 代码：

<table id="opTable">
    <thead>
      <tr><th class="partner_id">ID</th><th>ShortName</th><th>DisplayName</th><th>LogoUrl</th><th>Incent</th><th>JTS-URL</th></tr>
    </thead>
    <tbody>
    </tbody>
</table>

这是我用来从 json 文件加载数据的 JavaScript：

      <script>
    $(document).ready(function() {  
        $('#onlinePartnerTable').DataTable({
             "ajax" : "../test2.json",
            "columns": [{
                "data": "pId"
            }, {
                "data": "shrName"
            }, {
                "data": "DplayName"
            }, {
                "data": "lgo"
            }, {
                "data": "inc"
            }, {
                "data": "featured"
            }]
        });
    });
  </script>

这是我的 json 文件的示例：

{
"partnerList": [ 
         {
            "shrname": "bchan",
            "Dplayname": "bchang-Shop",
            "pId": "id12345",
            "featured": "0",
            "lgo": "https://url.here.com/url",
            "inc": "1 to 1",
            "dets": {
                "tmage": "someUrl/here",
                "desp": "desciption",
                "jturl": "jtUrl/here",
                "jtbut": "Shop",
                "termy": [
                    {
                        "heady": "",
                        "body": ""
                    }
                ]
            }
        },
         {
            "shrname": "hereIsIt",
            "Dplayname": "HereIs-Shop",
            "pId": "id65432",
            "featured": "0",
            "lgo": "https://url.here.com/url",
            "inc": "2 to 1",
            "dets": {
                "tmage": "someUrl/here",
                "desp": "desciption",
                "jturl": "jtUrl/here",
                "jtbut": "Shop",
                "termy": [
                    {
                        "heady": "",
                        "body": ""
                    }
                ]
            }
        }
  ]
}

我现在出现此错误。请参见下图。

【问题讨论】：

有什么问题？
数据未加载到数据表中。正文保持为空
然后将重要信息添加到您的问题中。
您的数据结构似乎与文档here 或here 中使用的结构不匹配（单击AJAX 选项卡）
有人知道怎么做吗？

标签： javascript jquery html json datatables

【解决方案1】：

试试这个

var t = [{
  "shrname": "bchan",
  "Dplayname": "bchang-Shop",
  "pId": "id12345",
  "featured": "0",
  "lgo": "https://url.here.com/url",
  "inc": "1 to 1",
  "dets": {
    "tmage": "someUrl/here",
    "desp": "desciption",
    "jturl": "jtUrl/here",
    "jtbut": "Shop",
    "termy": [{
      "heady": "",
      "body": ""
    }]
  }
}, {
  "shrname": "hereIsIt",
  "Dplayname": "HereIs-Shop",
  "pId": "id65432",
  "featured": "0",
  "lgo": "https://url.here.com/url",
  "inc": "2 to 1",
  "dets": {
    "tmage": "someUrl/here",
    "desp": "desciption",
    "jturl": "jtUrl/here",
    "jtbut": "Shop",
    "termy": [{
      "heady": "",
      "body": ""
    }]
  }
}];
$(document).ready(function() {
  $('#opTable').DataTable({
    "aaData": t,
    "columns": [{
      "data": "pId"
    }, {
      "data": "shrname"
    }, {
      "data": "Dplayname"
    }, {
      "data": "lgo"
    }, {
      "data": "inc"
    }, {
      "data": "featured"
    }]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" />
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<table id="opTable">
  <thead>
    <tr>
      <th class="partner_id">ID</th>
      <th>ShortName</th>
      <th>DisplayName</th>
      <th>LogoUrl</th>
      <th>Incent</th>
      <th>JTS-URL</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

【讨论】：

听起来不错，但我正在从 json 文件中读取数据，这就是重点。而不是来自变量（var t）
我改变了问题.. 现在显示错误，当我加载页面时，我将其截屏并放在上面。 @Krupesh 你有什么想法吗？

【解决方案2】：

根据 cmets 中提供的其中一个链接 Turnip，Datatables Ajax Data Source (objects)，您的数据应如下所示：

{
  "data": [
        {
            "shrname": "bchan",
            "Dplayname": "bchang-Shop",
            "pId": "id12345",
            "featured": "0",
            "lgo": "https://url.here.com/url",
            "inc": "1 to 1",              
        },
         {
            "shrname": "hereIsIt",
            "Dplayname": "HereIs-Shop",
            "pId": "id65432",
            "featured": "0",
            "lgo": "https://url.here.com/url",
            "inc": "2 to 1",             
        }
    ]
}

我不确定您要对数据的“dets”部分做什么

【讨论】：

这应该是传入的 JSON 应该采用的形式