could not get data from file by ajax with jquery datatable

Question

I use the sample here:https://datatables.net/examples/styling/jqueryUI.html

Below is my html and jquery code

<html>
<head>
  <link rel="stylesheet" type="text/css" href="jquery-dataTables.css">
  
  <script type="text/javascript" charset="utf8" src="jquery-min.js"></script>
  <script type="text/javascript" charset="utf8" src="jquery-dataTables.js"></script>
  <script>
  
  $(document).ready(function() {
    $('#example').dataTable( {
        "ajax": "data/test.txt",
        "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "extn" },
            { "data": "start_date" },
            { "data": "salary" }
        ]
    } );
} );
  </script>
  
</head>
<body>
<table id="example" class="display" cellspacing="0" 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>
</body>
</html>

This is the structure of my file

enter image description here

But it couldn't load data into datatable, anyone can help?

Edit (Attach my test data): this data is used for

"data": [ { "name": "Tiger Nixon", "position": "System Architect", "salary": "$320,800", "start_date": "2011/04/25", "office": "Edinburgh", "extn": "5421" }, { "name": "Garrett Winters", "position": "Accountant", "salary": "$170,750", "start_date": "2011/07/25", "office": "Tokyo", "extn": "8422" }, { "name": "Ashton Cox", "position": "Junior Technical Author", "salary": "$86,000", "start_date": "2009/01/12", "office": "San Francisco", "extn": "1562" }, { "name": "Cedric Kelly", "position": "Senior Javascript Developer", "salary": "$433,060", "start_date": "2012/03/29", "office": "Edinburgh", "extn": "6224" },
{ "name": "Cara Stevens", "position": "Sales Assistant", "salary": "$145,600", "start_date": "2011/12/06", "office": "New York", "extn": "3990" },
{ "name": "Donna Snider", "position": "Customer Support", "salary": "$112,000", "start_date": "2011/01/25", "office": "New York", "extn": "4226" } ]

Thanks

Gvidas Gvidas · Accepted Answer · 2015-06-26T08:23:31

I assume that you used example test.txt file from Datatables ajax simple example, but defined columns as in this example. The problem is test.txt file doesn't have columns, your datatable expecting. So there are two ways to fix it: Do not define columns in datatable

$(document).ready(function() {
    $('#example').dataTable( {
        "ajax": "data/test.txt"
    } );
} );

Or change your test.txt file to match columns, like:

"data": [
{
  "name": "Airi",
  "position": "Accountant",
  "office": "Tokyo",
  "extn": "...",
  "start_date": "28th Nov 08",
  "salary": "$162,700"
},...

could not get data from file by ajax with jquery datatable

1 Answers