DataTables warning: table id=tabla_clientes - Invalid JSON response

DataTables warning: table id=tabla_clientes - Invalid JSON response

SkuizSkuiz Posts: 5Questions: 4Answers: 0

Good day,

I have a datatable with employees information.
When the table loads i get the error message:
DataTables warning: table id=tabla_clientes - Invalid JSON response

I have checked the page but there is no information on the Network ->XHR, i get this showing on the image:

I have 5 records and have 5 columns for it on the HTML table.
Any ideas what is wrong?
Thanks for reading.
Here is my HTML code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description"
    content="Responsive sidebar template with sliding effect and dropdown menu based on bootstrap 3">
    <title>Clientes Credito Prestashop</title>
    <link rel="stylesheet" href="//malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.min.css">
    <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
    integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
    integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>  
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css" />

    <script src="https://markcell.github.io/jquery-tabledit/assets/js/tabledit.min.js"></script>
    <link rel="shortcut icon" type="image/png" href="img/favicon.png" />
    <style>
    .img-container {
        text-align: center;
        display: block;
    }
</style>
</head>

<body style="background-color: #26292b">

   <div class="card">
    <div class="card-body">
       <h3 align="center">Tabla Clientes de Credito Prestashop</h3>
       <span class="img-container">
           <img src="logo.jpg">
       </span>
   </div>
</div>
<div class="panel panel-default">
    <div class="card">
        <div class="card-body">
          <table id="tabla_clientes" class="table table-bordered table-striped">
           <thead class="text-center" style="background:#007bff;color:white;">
            <tr>
             <th>ID Empleado</th>
             <th>Nombre(s)</th>
             <th>Apellido(s)</th>
             <th>Correo</th>
             <th>Activo</th>
         </tr>
     </thead>
     <tbody></tbody>
 </table>
</div>
</div>

</html>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous">
</script>
<script src="//malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>


    <script>
        $(document).ready(function(){

         var dataTable = $('#tabla_clientes').DataTable({
          "language": {
            "url": "https://cdn.datatables.net/plug-ins/1.10.20/i18n/Spanish.json"
        },  
        "processing" : true,
        "serverSide" : true,
        "order" : [],
        "ajax" : {
           url:"fetchPermisos.php",
           type:"POST"
       }

   });

         $('#tabla_clientes').on('draw.dt', function(){
          $('#tabla_clientes').Tabledit({
           url:'actionPermisos.php',
           deleteButton: false,
           autoFocus: false,
           buttons: {
            edit: {
                class: 'btn btn-sm btn-primary',
                html: '<span class="glyphicon glyphicon-pencil"></span> &nbsp Editar',
                action: 'edit'
            }
        },
        dataType:'json',
        columns:{
            identifier : [0, 'id_employee'],
            editable:[[1, 'firstname'], [2, 'lastname'], [3,'email']]
        },
        restoreButton:false,
        onSuccess:function(data, textStatus, jqXHR)
        {

        }
    });
      });



    }); 



    </script>

Here is the Fetch Code:

<?php

//fetch.php

include('conexion.php');

$column = array("id_employee", "firstname", "lastname","email","active");

$query = "SELECT id_employee, firstname, lastname, email , active from prstshp_employee";

if($_POST["search"]["value"]){
if(isset($_POST["search"]["value"]))
{
 $query .= '
 AND id_employee LIKE "%'.$_POST["search"]["value"].'%" 
 OR firstname LIKE "%'.$_POST["search"]["value"].'%" 
 OR lastname LIKE "%'.$_POST["search"]["value"].'%" 
 OR email LIKE "%'.$_POST["search"]["value"].'%" 
 ';
}
}

if(isset($_POST["order"]))
{
 $query .= ' ORDER BY '.$column[$_POST['order']['0']['column']].' '.$_POST['order']['0']['dir'].' ';
}
else
{
 $query .= ' ORDER BY id_employee DESC ';
}
$query1 = '';

if($_POST["length"]){
if($_POST["length"] != -1)
{
 $query1 = ' LIMIT ' . $_POST['start'] . ', ' . $_POST['length'];
}
}

$statement = $connect->prepare($query);

$statement->execute();

$number_filter_row = $statement->rowCount();

$statement = $connect->prepare($query . $query1);

$statement->execute();

$result = $statement->fetchAll();

$data = array();

foreach($result as $row)
{
 $sub_array = array();
 $sub_array[] = $row['id_employee'];
 $sub_array[] = $row['firstname'];
 $sub_array[] = $row['lastname'];
 $sub_array[] = $row['email'];
 $sub_array[] = $row['active'];
 $data[] = $sub_array;
}

function count_all_data($connect)
{
 $query = "SELECT id_employee, firstname, lastname, email , active from prstshp_employee";
 $statement = $connect->prepare($query);
 $statement->execute();
 return $statement->rowCount();
}

$output = array(
 'draw'   => intval($_POST['draw']),
 'recordsTotal' => count_all_data($connect),
 'recordsFiltered' => $number_filter_row,
 'data'   => $data
);

echo json_encode($output);

?>

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited September 2021 Answer ✓

    The request has no response data available.

    Your server script isn't returning anything. Start by looking at the server logs and debugging the server script to see why the data isn't being returned to the client. Let us know what you find.

    Kevin

  • SkuizSkuiz Posts: 5Questions: 4Answers: 0
    edited September 2021

    @kthorngren It seems for some reason, the datatable was struggling with a record i have the letter "ñ" on it, since my lenguage here its spanish, its a common letter for lastname or names.
    Its there something i can do to bypass this on the datatable to show on it?
    If i change that letter, the table works correctly, but its not working if a record had the "Ñ or ñ" letter on it

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    It won’t be DataTables that is struggling with non-latin characters, but the database / PHP connection I suspect. You might need to do something like SET NAMES utf8; (assuming you are using MySQL) when you first make the database connection.

    Allan

Sign In or Register to comment.