DataTable is not being displayed with data from the database.

Omar Martin
Omar Martin used Ask the Experts™
on
Data Tables are not being displayed with data from the database.  I am receiving the following error:

jquery.dataTables.min.js:40 Uncaught TypeError: Cannot read property 'length' of undefined

Here is the code:

<!--Data Tables:css-->
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<!--Data Tables-->
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

$(document).ready(function () {
$('#datatable').DataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": "http://localhost:5000/alldata",
"type": "GET"
},
"columns": [
{ "data": "ID" },
{ "data": "Station" },
{ "data": "Address" },
{ "data": "C-Store Sales" },
{ "data": "Operator" },
{ "data": "Top SKU" }
]
});
});

Open in new window


<!---(2b)-->
    <h3>Data Table</h3>
    <form id="form1">
      <table class="table table-bordered table-striped" id="datatable">
        <thead>
          <tr>
            <th>ID</th>
            <th>Station</th>
            <th>Address</th>
            <th>C-Store Sales</th>
            <th>Operator</th>
            <th>Top SKU</th>
          </tr>
        </thead>
      </table>
    </form>

    <hr>

    <br />

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Hi,

This errors TypeError: Cannot read property 'length' of undefined usually means that jQuery DataTables cannot find the data in the response to the Ajax request.

By default jQuery DataTables expects the data to be in one of the formats shown below.
Error occurs because data is returned in the format other than default.

Check the documentation about it
https://datatables.net/reference/option/ajax.dataSrc
https://datatables.net/reference/option/ajax
https://datatables.net/manual/server-side


Array of arrays

{ 
   "data": [
      [
         "Tiger Nixon",
         "System Architect",
         "$320,800",
         "2011/04/25",
         "Edinburgh",
         "5421"
      ]
   ]
}

Open in new window

Array of objects

{ 
   "data": [
      {
         "name": "Tiger Nixon",
         "position": "System Architect",
         "salary": "$320,800",
         "start_date": "2011/04/25",
         "office": "Edinburgh",
         "extn": "5421"
      }
   ]
}

Open in new window

Omar MartinBridgemaker

Author

Commented:
See below the Header for the request using Chrome Devtools....It appears the information is being requested.....

Request URL: http://localhost:5000/alldata?draw=1&columns%5B0%5D%5Bdata%5D=ID&columns%5B0%5D%5Bname%5D=&columns%5B0%5D%5Bsearchable%5D=true&columns%5B0%5D%5Borderable%5D=true&columns%5B0%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B0%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B1%5D%5Bdata%5D=Station&columns%5B1%5D%5Bname%5D=&columns%5B1%5D%5Bsearchable%5D=true&columns%5B1%5D%5Borderable%5D=true&columns%5B1%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B1%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B2%5D%5Bdata%5D=Address&columns%5B2%5D%5Bname%5D=&columns%5B2%5D%5Bsearchable%5D=true&columns%5B2%5D%5Borderable%5D=true&columns%5B2%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B2%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B3%5D%5Bdata%5D=Monthly+C-Store+Sales&columns%5B3%5D%5Bname%5D=&columns%5B3%5D%5Bsearchable%5D=true&columns%5B3%5D%5Borderable%5D=true&columns%5B3%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B3%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B4%5D%5Bdata%5D=Operator&columns%5B4%5D%5Bname%5D=&columns%5B4%5D%5Bsearchable%5D=true&columns%5B4%5D%5Borderable%5D=true&columns%5B4%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B4%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B5%5D%5Bdata%5D=Top+SKU&columns%5B5%5D%5Bname%5D=&columns%5B5%5D%5Bsearchable%5D=true&columns%5B5%5D%5Borderable%5D=true&columns%5B5%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B5%5D%5Bsearch%5D%5Bregex%5D=false&order%5B0%5D%5Bcolumn%5D=0&order%5B0%5D%5Bdir%5D=asc&start=0&length=10&search%5Bvalue%5D=&search%5Bregex%5D=false&_=1562697357208
Request Method: GET
Status Code: 200 OK
Remote Address: [::1]:5000
Referrer Policy: no-referrer-when-downgrade
Access-Control-Allow-Origin: *
Connection: keep-alive
Content-Length: 957
Content-Type: application/json; charset=utf-8
Date: Tue, 09 Jul 2019 18:35:57 GMT
ETag: W/"3bd-fZAQHOLgM1GceLJT3tlFonmVb6A"
X-Powered-By: Express
Accept: application/json, text/javascript, */*; q=0.01
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Host: localhost:5000
Referer: http://localhost:5000/
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36
X-Requested-With: XMLHttpRequest
draw: 1
columns[0][data]: ID
columns[0][name]:
columns[0][searchable]: true
columns[0][orderable]: true
columns[0][search][value]:
columns[0][search][regex]: false
columns[1][data]: Station
columns[1][name]:
columns[1][searchable]: true
columns[1][orderable]: true
columns[1][search][value]:
columns[1][search][regex]: false
columns[2][data]: Address
columns[2][name]:
columns[2][searchable]: true
columns[2][orderable]: true
columns[2][search][value]:
columns[2][search][regex]: false
columns[3][data]: Monthly C-Store Sales
columns[3][name]:
columns[3][searchable]: true
columns[3][orderable]: true
columns[3][search][value]:
columns[3][search][regex]: false
columns[4][data]: Operator
columns[4][name]:
columns[4][searchable]: true
columns[4][orderable]: true
columns[4][search][value]:
columns[4][search][regex]: false
columns[5][data]: Top SKU
columns[5][name]:
columns[5][searchable]: true
columns[5][orderable]: true
columns[5][search][value]:
columns[5][search][regex]: false
order[0][column]: 0
order[0][dir]: asc
start: 0
length: 10
search[value]:
search[regex]: false
_: 1562697357208
Omar MartinBridgemaker

Author

Commented:
Here is the response itself from Chrome Dev Tools....so the data is being sent....

[{"ID":1,"Station":"Carmichael Rd.","Address":"54 Myers Rd.","Monthly C-Store Sales":120000,"Operator":"Michael Sears","Top SKU":"Hotdogs"},{"ID":2,"Station":"Baillou Hill","Address":"564 Jackson Ave.","Monthly C-Store Sales":89000,"Operator":"Marla Pikes","Top SKU":"Burgers"},{"ID":3,"Station":"Oakesfield","Address":"42 Peterson St.","Monthly C-Store Sales":150000,"Operator":"Yolanda Gray","Top SKU":"Chicken"},{"ID":4,"Station":"Bayshore","Address":"13 Clayton Dr.","Monthly C-Store Sales":180000,"Operator":"Mikey Miller","Top SKU":"Tacos"},{"ID":5,"Station":"Winton","Address":"45 Fairway Blvd.","Monthly C-Store Sales":169000,"Operator":"John Peterson","Top SKU":"Wedges"},{"ID":6,"Station":"Bargain City","Address":"29 Rounda Ct.","Monthly C-Store Sales":91000,"Operator":"Keith Michelson","Top SKU":"Tuna"},{"ID":7,"Station":"Village Road","Address":"45 Eastern Rd.","Monthly C-Store Sales":97899,"Operator":"Earvin King","Top SKU":"Soft Drinks"}]
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Omar MartinBridgemaker

Author

Commented:
Got a breakthrough.......Had to add "dataSrc" at the end of the url.

"url": "http://localhost:5000/alldata", dataSrc:"",

Open in new window

Bridgemaker
Commented:
"url": "http://localhost:5000/alldata", dataSrc:"",
Yes this is why I suggested you to read this page
https://datatables.net/reference/option/ajax.dataSrc

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial