DataTables warning: table id=tabla_clientes - Invalid JSON response
DataTables warning: table id=tabla_clientes - Invalid JSON response
Skuiz
Posts: 5Questions: 4Answers: 0
in DataTables
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>   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
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
@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
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