DataTables warning: table id=example - Invalid JSON response. For more information about this error,

ScottSchmidt · March 2018

Error::
DataTables warning: table id=example - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1

Link https://datatables.net/manual/tech-notes/1#JSON-validation
According to the link, the fix is easy and in your developer chrome console. However, my chrome console shows no errors (first time looking at it, but its totally blank). Here is a link to my website: https://databasetable-net.000webhostapp.com/

What I expect: My datatables.net plug-in is working at like 80%. The biggest thing I noticed is that the pagination on bottom went missing and nothing actually populates with a search. So, I must have a small minor error?

Code:

<head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>DataTables example - HTML (DOM) sourced data</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
     <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="https://use.fontawesome.com/fab417e5fd.js"></script>



    <script type="text/javascript">
    $(document).ready(function() {

        $('#example').dataTable( {
             dom: "Bfrtip",
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url": "index.php",
                "type": "POST"
            },
            "columns": [
                { "data": "id" },
                { "data": "first_name" },
                { "data": "last_name" },
                { "data": "position" },
                { "data": "date" },
                { "data": "updated" },
                 { "data": "action" }
            ]

        } );
    } );
      </script>
      </head>

     <table id="example" class="display" style="width:100%"> 
     <thead>
    <tr>
          <th>
             <a <a class="column_sort" id="id" href="?order=id&sort=<?php echo $sort; ?>">
                ID</a>
          </th>
          <th><a class="column_sort" id="first_name" href="?order=first_name&sort=<?php echo $sort; ?>">First Name
          </a>
          </th>
          <th><a class="column_sort" id="last_name" href="?order=last_name&sort=<?php echo $sort; ?>">Last Name
             </a>
          </th>
          <th><a class="column_sort" id="position" href="?order=position&sort=<?php echo $sort; ?>">Position
             </a>
          </th>
          <th class="hidden-xs"><a class="column_sort" id="date" href="?order=date&sort=<?php echo $sort; ?>">Date
             </a>
          </th>
          <th class="hidden-xs">
             <a class="column_sort" id="updated" href="?order=updated&sort=<?php echo $sort; ?>">
                Updated</a>
          </th>
          <th>Action</th>
    </thead>
    </tr>

kthorngren · March 2018

Take a look at the response from the AJAX request in the developer tools. I see an HTML web page not a JSON formatted data structure. That is why you are getting the error.

You have server side processing enabled. You AJAX URL should point to a script that can process the server side request as documented here:
https://datatables.net/manual/server-side

Here is an example server side config:
https://datatables.net/examples/data_sources/server_side.html

Do you have enough data to need server side processing?

Life would be much easier without server side processing.

Kevin

ScottSchmidt · March 2018

Interesting. I do not really know if I need serverSide but when I commented out serverSide like this:

$('#example').dataTable( {
dom: "Bfrtip",
"processing": true,
//"serverSide": true,
"ajax": {
"url": "index.php",
"type": "POST"
},

....The whole webpage plug-in worked! Now I just have to get the data to get-fetched from the database.

It currently says. "No data available in table". I will do some google search on this. I am assuming I just have to connect the Jquery to the DB.

ScottSchmidt · March 2018

If by server side you mean connect to the DB using php, then yes I will unfortunately need server side.

Looks like I need to create a server.php form by using code similar to this link? https://datatables.net/examples/server_side/object_data.html

kthorngren · March 2018

If by server side you mean connect to the DB using php, then yes I will unfortunately need server side.

By server side I mean you have too many rows to fetch in one request because of the delay in processing. In this case each time the table is drawn a new request is sent to the server for the page of data. In this case the server script is responsible for sorting and searching.
https://datatables.net/manual/server-side

The best option though is to use client side processing so that all the data is in the client and Datatables performs the sorting and searching using the data in the client. However you may still have a server script to get the data from the DB. In Datatables terminology this is not "Server Side Processing". Here is an example of a client side Datatable with an ajax data source:
https://datatables.net/examples/data_sources/ajax.html

Kevin

ScottSchmidt · March 2018

Well I am all for doing which ever one is easier as I can always make it more complex later. I will continue to reread those articles. I guess I am partly not sure which way I am trying to do yet (but will do client side).

All I know is that I have all the php code ready to get the data from the DB. I just cannot figure out how to connect ajax to the data? If that makes sense. Here is my php code that is ready to go:

<?php $order = array("first_name","last_name","date", "position", "updated"); $key = array_search($sort ,$order); $orderby = $order[$key]; $records = mysqli_query($con, "SELECT * FROM employees ORDER BY $orderby $sort"); while ($row = mysqli_fetch_array($records)) { ?>
<tr>
<td><?php echo $row['id']; ?> </td>
<td><?php echo $row['first_name']; ?> </td>
<td><?php echo $row['last_name']; ?> </td>
<td><?php echo $row['position']; ?> </td>
<td class="hidden-xs"><?php echo $row['date']; ?> </td>
<td class="hidden-xs"><?php echo $row['updated']; ?> </td>
<td>
<a href="edit.php?edit=<?php echo $row['id']; ?>" type="button" name="edit" class="btn-success"><span class="glyphicon glyphicon-pencil"> </a>
<button type="button" ><a href="index.php?del=<?php echo $row['id']; ?>" name="del" class="btn-danger" onclick="return confirm('Are you sure you want to delete this item?');"><span class="glyphicon glyphicon-trash"></span> </a> </button>
</td>

</tr>
<?php
}

<?php > ?>

ScottSchmidt · March 2018

Ok so I watched a video on server-side vs client-side. I believe I am doing server side. I have all my files on 000webhost connected to a DB. I am not using files on my own computer (if that is what you are asking). I will take a look at both examples. Understanding the difference helps though as I may have been using some of the wrong articles for code.

allan · March 2018

At the moment when I load the page in your first post I get the following in response from the server:

<br />
<b>Fatal error</b>:  Uncaught Error: Class 'Editor' not found in /storage/ssd3/634/3741634/public_html/server.php:29
Stack trace:
#0 {main}
  thrown in <b>/storage/ssd3/634/3741634/public_html/server.php</b> on line <b>29</b><br />

That isn't valid JSON, hence the error message from DataTables. i looks like that might be a different error from what yourself and Kevin were discussing above - perhaps continued development?

Can you show me what server.php contains?

Allan

ScottSchmidt · March 2018

server.php code:

<?php
$table = 'datatables_demo'; // DB table to use
 
$primaryKey = 'id'; // Table's primary key
 
// Array of database columns which should be read and sent back to DataTables.
// The `db` parameter represents the column name in the database, while the `dt`
// parameter represents the DataTables column identifier. In this case object
// parameter names
$columns = array(
       array( 'db' => 'id',     'dt' => 'id' ),
    array( 'db' => 'first_name', 'dt' => 'first_name' ),
    array( 'db' => 'last_name',  'dt' => 'last_name' ),
    array( 'db' => 'position',   'dt' => 'position' ),
    array( 'db' => 'date',     'dt' => 'date' ),
       array( 'db' => 'updated',     'dt' => 'updated' ),
 );
 
// SQL server connection information
$sql_details = array(
    'user' => 'id3741634_username',
    'pass' => 'password',
    'db'   => 'id3741634_database',
    'host' => 'localhost',
);
 
 
// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'employees', 'id' )
    ->fields(
        Field::inst( 'first_name' ),
        Field::inst( 'last_name' ),
        Field::inst( 'position' ),
        Field::inst( 'date' ),
        Field::inst( 'updated' )
    )
    ->process( $_POST )
    ->json();

Link: https://databasetable-net.000webhostapp.com/

It looks like it is almost there. Just have one minor mistake somewhere.

Thanks,

allan · March 2018

Thanks. I don't see any require or include statements in your code there.

You need to include the DataTables.php library to make sure that the Editor class is available. It would be worth reading over this part of the manual.

The examples also have a "Server script" tab below the table which you can use to see a full working example of a server-side script.

Allan

ScottSchmidt · March 2018

Thank you, fixed the issue. I also fixed a error 7 issue. Now I just have the error http://datatables.net/tn/1 issue. I looked at my code and think I am missing this part:

data: JSON.stringify({
first_name: $("#namec").val(),
last_name: $("#surnamec").val(),
email: $("#emailc").val(),
mobile: $("#numberc").val(),
password: $("#passwordc").val()
}),
success: function(response) {
console.log(response);
},
error: function(response) {
console.log(response);
}

Whenever I try to add the code, it gets rid of the error but all of datatables.net plug-in breaks. Used: https://stackoverflow.com/questions/17426199/jquery-ajax-and-json-format

allan · March 2018

What does the server return that isn't valid JSON. The instructions at the linked tech note will tell you how to see the returned data.

Allan

kleeh9091 · December 2019

I do not understand how a tool like this, with pagination DISABLED (i.e., I ain't doing it in datatables), gets to determine how many rows of my dam query data are displayed on the screen. I am NOT using Ajax in many of my scripts. Now, I see from recent docs that I'm supposed to use some freakin' option called ' "serverSide": true'. When I do that, I get a dam warning that says "Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1". I'm NOT USING JSON, dammit!!! And don't tell me to use the 'ajax' parm either, because that causes the Export Buttons to disappear. What a crock ...

kthorngren · December 2019

@kleeh9091

I see from recent docs that I'm supposed to use some freakin' option called ' "serverSide": true'.

This is meant for large data sets. This FAQ provides some details.

And don't tell me to use the 'ajax' parm either, because that causes the Export Buttons to disappear.

This doc explains the date source types and sources supported. Using Ajax is one option. As mentioned in the other thread you posted in please start a new thread explain the problems and providing your config. This will give us a chance to help.

Kevin

manigopal · May 2020

got a issue when my code runs fine at localhost but at live server datas are not loading properly.,

DataTables warning: table id=user_data - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1

Hosted URL : http://basicajaxcrud.22web.org/

colin · May 2020

@manigopal see my response in your other thread (I pulled theese out of the spam filter - they were sucked into there for some reason).

genryianchev · November 2020

Hi, I have a problem on the local everything works well as soon as I installed it on the global, errors started coming.
Please tell me what I need to do to fix this?

DataTables warning: table id=manageTable – Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1

colin · November 2020

The best bet would be to follow the diagnostic steps in the link provided in the error message. Have you tried that yet? What were the conclusions?

Colin

DataTables warning: table id=example - Invalid JSON response. For more information about this error,

DataTables warning: table id=example - Invalid JSON response. For more information about this error,

Answers

Howdy, Stranger!

Categories

DataTables

DataTables warning: table id=example - Invalid JSON response. For more information about this error,

DataTables warning: table id=example - Invalid JSON response. For more information about this error,

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables