如何用AJAX请求的JSON数据填充jQuery DataTable？

Question

我试图使用由AJAX请求的json.txt填充的jQuery数据表，但是由于某种原因，我的文件未加载到我的数据表中。

为什么我的数据表无法正确填充？ 我有语法错误吗？

这是我的数据表语法：

$(document).ready(function () {
    var table = $('#pftable_hdr').DataTable({
        "ajax": {
            "url": "/path.txt",
            "dataSrc": ""
        },
        "columns": [
            { "data": "Fecha" },
            { "data": "Rid" },
            { "data": "Pdv" },
            { "data": "Pla" },
            { "data": "Descripcion" },
            { "data": "Total" },
            { "data": "Cantidad" }
        ],
        scrollY: "500px",
        scrollX: true,
        scrollCollapse: true,
        fixedColumns: {
            leftColumns: 3
        }
    });
});

这是我的表格的HTML：

<table class="table table-hover no-more-tables table-iconmebanquet-detail" id="pftable_hdr">
    <thead>
        <tr>
            <th style="">Fecha</th>
            <th style="">Rid</th>
            <th style="">Pdv</th>
            <th style="">Pla</th>
            <th style="">Descripcion</th>
            <th style="">Total</th>
            <th style="">Cantidad</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th style="">Fecha</th>
            <th style="">Rid</th>
            <th style="">Pdv</th>
            <th style="">Pla</th>
            <th style="">Descripcion</th>
            <th style="">Total</th>
            <th style="">Cantidad</th>
       </tr>
   </tfoot>
</table>

这是我在正确路径下的JSON文件：

[
  {
    "Fecha": "/Date(1451631600000)/",
    "Rid": "CENAS",
    "Pdv": "REST",
    "Pla": "81",
    "Descripcion": "ENS FRUTAS",
    "Total": 53.0000,
    "Cantidad": 1
  },
  {
    "Fecha": "/Date(1451631600000)/",
    "Rid": "CENAS",
    "Pdv": "REST",
    "Pla": "87",
    "Descripcion": "CAFE AMER ILIMIT",
    "Total": 23.0000,
    "Cantidad": 1
  },
  {
    "Fecha": "/Date(1451631600000)/",
    "Rid": "CENAS",
    "Pdv": "REST",
    "Pla": "97",
    "Descripcion": "QUESADILLAS TRAD (2)",
    "Total": 51.0000,
    "Cantidad": 1
  },
  {
    "Fecha": "/Date(1451631600000)/",
    "Rid": "CENAS",
    "Pdv": "VTSI",
    "Pla": "114",
    "Descripcion": "ENS CHIAPANECA",
    "Total": 65.0000,
    "Cantidad": 1
  },
  {
    "Fecha": "/Date(1451631600000)/",
    "Rid": "COMIDAS",
    "Pdv": "VTMO",
    "Pla": "196",
    "Descripcion": "POZ ROJO SUP MAC",
    "Total": 91.0000,
    "Cantidad": 1
  }
]

Answer 1

源代码中文本文件的URL错误：

"url": "C:\inetpub\wwwroot\potzolcalli.brain.arpon.com\path.txt",

在JavaScript中，反斜杠\\是字符串的转义字符，例如换行符"\\n" 。

---

您应该使用file：//网址：

"url": "file://C:/inetpub/wwwroot/potzolcalli.brain.arpon.com/path.txt",

或使用本地http服务器来提供文件，例如http-server ，前提是您已安装节点 ：

npm install -g http-server
cd <root directory of your files, e.g. your index.html>
http-server

然后，您可以在http：// localhost：8080上打开浏览器以使用您的站点，这与以后在生产中由http服务器提供服务的方式类似。

Answer 2

更新：我通过@Leon Adles的建议解决了更改Ip的问题，因此我进行了下一次更正，现在它表现得很完美

“ url”：“ /path.txt”，