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

how does the content of test.txt looks like?

davidkonrad
– davidkonrad

2015-06-26 08:01:32 +00:00
Commented Jun 26, 2015 at 8:01 — davidkonrad
– davidkonrad, Commented Jun 26, 2015 at 8:01

Gvidas · Accepted Answer · 2015-06-26 08:23:31Z

1

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"
},...

answered Jun 26, 2015 at 8:23

Gvidas

1,9642 gold badges15 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Allen4Tech Over a year ago

Thanks for your reply, but both of the solutions don't work. :(

Gvidas Over a year ago

Could you provide test.txt content, it would be easier to help

Collectives™ on Stack Overflow

could not get data from file by ajax with jquery datatable

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related