CODEWITHSUNDEEP
javascriptjqueryhtmlajaxdatatables
Arturo Martinez
Arturo Martinez

Reputation: 385

How to fill a jQuery DataTable with AJAX-requested JSON data?

Im trying to use jQuery Datatables filled by a AJAX-requested json.txt but for some reason my file does not load into my datatable.

Why is my datatable not filling correctly? Do I have some syntax error?

This is my datatable syntax:

$(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
        }
    });
});

and this is the HTML for my table:

<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>

And this is my JSON file at the correct route:

[
  {
    "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
  }
]

Upvotes: 0

Views: 327

Answers (2)

Arturo Martinez
Arturo Martinez

Reputation: 385

UPDATED: i solved the proble changing my Ip by the suggestion of @Leon Adles so i made the next correction and it dysplayed perfectly now

"url": "/path.txt",

Upvotes: 0

Leon Adler
Leon Adler

Reputation: 3351

The url to your textfile in your source code is wrong:

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

In JavaScript, a backslash \ is an escape character for strings, such as a newline character: "\n".

You should either use a file:// url:

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

or use a local http server to serve your files, e.g. http-server, assuming you have node installed:

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

You can then open your browser at http://localhost:8080 to consume your site similar to the way they will get served by an http server in production later.

Upvotes: 1

Related Questions