DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

How to use inline Ajax data source (arrays)

How to use inline Ajax data source (arrays)

vbkkvbkk Posts: 8Questions: 1Answers: 0
in Free community support

Link to test case: http://live.datatables.net/lodicoku/1/edit
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem: The table not shown the data.

Answers

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    Yep, ajax expects a URL to be given, which DataTables calls to get the data - see example here.

    Colin

  • vbkkvbkk Posts: 8Questions: 1Answers: 0

    Colin,
    why the data is not processed here at http://live.datatables.net/lodicoku/1/edit ?

  • kthorngrenkthorngren Posts: 21,567Questions: 26Answers: 4,995

    You have this:

        $('#example').DataTable( {
        "ajax": "data"
    } );

    "data" is not a valid URL. You need a URL pointing to a server. If you want to add data from a Javascript variable use the data option, for example:
    https://datatables.net/examples/data_sources/js_array.html

    If this doesn't help please provide more information of what you are trying to do. What do you expect "ajax": "data" to do?

    Kevin

  • vbkkvbkk Posts: 8Questions: 1Answers: 0

    Colin,

               Is it possible to load or process the data from the same page ?
  • vbkkvbkk Posts: 8Questions: 1Answers: 0

    Kevin,

    Is it possible to load or process the data from the same page ?

               As you mentioned like javascript array.
  • tangerinetangerine Posts: 3,365Questions: 39Answers: 395

    Kevin already gave you an example.

  • vbkkvbkk Posts: 8Questions: 1Answers: 0

    Hi,

           Don't get angry.

    I am not clear and not get the logic because may be i am logic less at this moment due to insufficient knowledge about the matter.

    Once again my question here as follows

    Is it possible to load or process the data from the same page ?

    as mention the data as ajax and put the data on the same page like js array shown above by kevin.

  • kthorngrenkthorngren Posts: 21,567Questions: 26Answers: 4,995

    Is it possible to load or process the data from the same page ?

    Sorry I don't understand what you mean by "data from the same page". PLease provide more details. These examples show the ways data can be loaded into Datatables:
    https://datatables.net/examples/data_sources/index.html

    The Data docs describe these options.

    Kevin

  • vbkkvbkk Posts: 8Questions: 1Answers: 0

    Hi,

    as mentioned at https://datatables.net/examples/data_sources/ajax.html

    with

    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

<meta charset=utf-8 />
<title>DataTables - JS Bin</title>
    $(document).ready(function() { $('#example').DataTable( { "ajax": "./data.txt" } ); } );

    </head>
    <body>

    <div class="container">

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
</table>

</div>

    </body>
    </html>

    and separate data file as

    "ajax": "./data.txt"

    as

     {

    "draw": 1,
    "recordsTotal": 4,
    "recordsFiltered": 4,
    "data": [
    [
    "Tiger Nixon",
    "System Architect",
    "Edinburgh",
    "5421",
    "2011/04/25",
    "$320,800"
    ],
    [
    "Garrett Winters",
    "Accountant",
    "Tokyo",
    "8422",
    "2011/07/25",
    "$170,750"
    ],
    [
    "Ashton Cox",
    "Junior Technical Author",
    "San Francisco",
    "1562",
    "2009/01/12",
    "$86,000"
    ],

    [
  "Donna Snider",
  "Customer Support",
  "New York",
  "4226",
  "2011/01/25",
  "$112,000"
]

    ]
    }

    not working.

  • kthorngrenkthorngren Posts: 21,567Questions: 26Answers: 4,995

    The URL given in the ajax option needs to point to a webserver. For security reasons the web browser won't allow direct access to the file system.

    Kevin

  • vbkkvbkk Posts: 8Questions: 1Answers: 0

    Hi All,

                Why the ajax data placed on the same html page like js array don't process ?

    May be my question is logic less ?

  • kthorngrenkthorngren Posts: 21,567Questions: 26Answers: 4,995

    The ajax option uses jQuery ajax which uses an HTTP request to fetch the data. Do you have a web server setup for the HTTP requests? If you do have a web server setup then you will need to verify the path to the file.

    If you are not familiar with how ajax works then maybe this tutorial will help:
    https://www.w3schools.com/xml/ajax_intro.asp

    Kevin

  • vbkkvbkk Posts: 8Questions: 1Answers: 0

    Hi All,

              Cheers for all support on this topic.
This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.