javascript - 如何使用 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:

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

或使用本地 http 服务器来提供您的文件，例如http-server ，假设您有 node安装:

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

然后您可以打开浏览器 http://localhost:8080使用您的网站的方式类似于稍后在生产中由 http 服务器提供服务的方式。