Table Data not loading data it is only showing "Loading..."

kamar

My data table is not loading i am only getting "Loading..." on my browser. Also when inspect i get the error below.

Uncaught TypeError: Cannot read property 'length' of undefined
at datatables.min.js:48
at i (datatables.min.js:35)
at Object.success (datatables.min.js:35)
at i (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at A (jquery.min.js:4)
at XMLHttpRequest.<anonymous> (jquery.min.js:4)

Here's my JSON Data
Array
(
[0] => 490
[atm_id] => 490
[1] => 123220
[terminal_id] => 123220
[2] => CDMN_67_1
[terminal_name] => CDMN_67_1
[3] => 201
[branch_code] => 2012
[4] => Onsite
[onsite_offsite] => Onsite
[5] => NCRC
[vendor_FK] => NCRC
[6] => 10.0.8.1
[local_ip] => 10.0.8.2
[7] => JUSTINA
[custodian_name] => JUSTINA
[8] => 10.0.85.1
[default_gateway] => 10.0.8.1
[9] => LAGOS ISLAND 1
[region] => LAGOS ISLAND 1
)

Here is my html:

manageAtmFleetTable = $("#manageAtmFleetTable").DataTable({
'ajax' : 'php_action/fetchTerminal.php',
'order' : [],

});

tangerine

https://jsonlint.com/ says your JSON is invalid....

manageAtmFleetTable = $("#manageAtmFleetTable").DataTable({
'ajax' : 'php_action/fetchTerminal.php',
'order' : [],
});

....and that's not HTML.

kamar

Thanks for your response tangerine, however the JSON i posted is the data i want passed from my DB to the table on my website.

i know the below is javascript, however, that is how i am passing the data to my website table

manageAtmFleetTable = $("#manageAtmFleetTable").DataTable({
'ajax' : 'php_action/fetchTerminal.php',
'order' : [],
});

here is fetchTerminal.php

<?php

require_once 'core.php';

$sql = "SELECT atm_id, terminal_id, terminal_name, branch_code, 
onsite_offsite, vendor_FK, local_ip, custodian_name, default_gateway, 
region FROM atm_database ";

$result = $connect->query($sql);

$output = array('data' => array());

if($result->num_rows > 0) {
    while($row = $result->fetch_array()) {
         // echo "<pre>";
         // print_r($row);
         // echo "</pre>";
        $atmId = $row[0];
        



    $output['data'][] = array( 
            $atmId,
            $row[1],
            $row[2],
            $row[3],
            $row[4],
            $row[5],
            $row[6],
            $row[7],
            $row[8],
            $row[9]

            );


        
    } // while
    
} // /if

$connect->close();

echo json_encode($output);

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

kthorngren

As tangerine mentioned your JSON data is not a valid JSON string. This page discusses the data structures Datatables supports.
https://datatables.net/manual/data/

The structure you posted does not meet the requirements.

Kevin

kamar

Thank you kthorngren, i have gone through the document how ever i looked through my code and realize i was using ajax form.serialize(), pls could that be the problem

if(terminalId && terminalName) {
var form = $(this);

//button loading
$("#createTerminalBtn").button('loading');

$.ajax({
    url: form.attr('action'),
    type: form.attr('method'),
    data: form.serialize(),
    dataType: 'json',
    success:function(response){
        //button loading
        $("#createTerminalBtn").button('reset');

        if(response.success == true) {

allan

What is shown above as "JSON" appears to be the result of the print_r on line 16 (commented out at the moment) rather than the result of the echo json_encode(), which I think is causing some of the confusion.

Could you run the debugger on your table so we can take a look at the raw response from the server please? There isn't anything obviously wrong that I can see in the code above.

It would also be worth checking the server's error log to see if there is any information shown there.

Thanks,
Allan

kamar

Allan, thank you for your reply however i need clarification on where to paste the debugger code, google chrome has no debugger and mozilla debugger is not writeable. Please help

tangerine

You are expected to use DataTables' own debugger. Instructions for use are right there in the link Allan gave you.

kamar

Please what does this line on datatable.min.css 48 mean

c);for(b=0;b<f.length;b++)M(a,f[b]);a.iInitDisplayStart=

allan

Its a for loop that is part of the minimised code. I could explain it character by character, but I doubt that is actually want to want to know.

As I said before, I'm happy to help, but please use the debugger I linked to and @tangerine explained, or link to a page showing the issue.

Allan