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,

ScottSchmidtScottSchmidt Posts: 38Questions: 5Answers: 0

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>

Answers

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    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

  • ScottSchmidtScottSchmidt Posts: 38Questions: 5Answers: 0

    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.

  • ScottSchmidtScottSchmidt Posts: 38Questions: 5Answers: 0
    edited 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

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    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

  • ScottSchmidtScottSchmidt Posts: 38Questions: 5Answers: 0

    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 } ?>

  • ScottSchmidtScottSchmidt Posts: 38Questions: 5Answers: 0

    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.

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    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

  • ScottSchmidtScottSchmidt Posts: 38Questions: 5Answers: 0
    edited 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,

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    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

  • ScottSchmidtScottSchmidt Posts: 38Questions: 5Answers: 0
    edited 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

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    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

  • kleeh9091kleeh9091 Posts: 3Questions: 0Answers: 0

    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 ...

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735
    edited 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

  • manigopalmanigopal Posts: 11Questions: 3Answers: 0

    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/

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

  • genryianchevgenryianchev Posts: 1Questions: 0Answers: 0
    edited 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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

This discussion has been closed.