Tengo una tabla que hice con Datatables, server side, el cual me arroja un listado con una botonera de acciones, la cual funciona sin ningun problema:
El detalle, es que al querer colocar la botonera de acciones en la primera columna, me arroja error datatables y queda en estado "Procesando".
Mi script es este (app.js):
var serverSide = $("#serverSide").DataTable({
"processing": true,
"serverSide": true,
"rowReorder": true,
"ajax": {
"url": "ajax/serverside.php",
"type": "post",
},
"columnDefs": [
{ orderable: false, targets: 0 }, // No asignamos orden a columna Actions
],
"columns": [
{ "data": "Actions" },
{ "data": "Nombre" },
{ "data": "Apellido" },
{ "data": "Email" },
{ "data": "Genero" }
],
"language": spanishTraduction
});
Y desde php envio la informacion:
public function dataUsersDatatables($draw, $where, $params){
$dataUsers = [];
$users = $this->crud->serverSide($where, $params);
if ($users[0] == 1) {
$totalRecords = $users[1][0];
$totalRecordsFiltered = $users[2][0];
foreach ($users[3] as $key => $user) {
$dataRows[$key]["#"] = ($key+1);
$dataRows[$key]["Nombre"] = $user->Nombre;
$dataRows[$key]["Apellido"] = $user->Apellido;
$dataRows[$key]["Email"] = $user->Email;
$dataRows[$key]["Genero"] = $user->Genero;
$dataRows[$key]["Actions"] = "<div class='btn-group'><a href='javascript:void(0);' class='btn btn-info'><i class='fas fa-edit'></i></a><button class='btn btn-danger ml-2'><i class='fas fa-trash-alt'></i></button></div>";
}
$dataUsers = array(
"draw" => $draw,
"iTotalRecords" => intval($totalRecords),
"iTotalDisplayRecords" => intval($totalRecordsFiltered),
"aaData" => $dataRows
);
}
return $dataUsers;
}
Tendre que hacer algun cambio? Al querer usar un formato distinto en la primera fila, debo realizar otra operacion? No tengo idea, espero me puedan ayudar.
PD: Adjunto la captura del error:
PD2: Aqui agrego un ejemplo del json que recibo en la respuesta de php. Revise y segun datatable, tengo un error en la respuesta del Json (DataTables warning: table id=serverSide - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1):
{
"draw": "1",
"recordsTotal": 1000,
"recordsFiltered": 1000,
"data": [
{
"Nombre": "Abramo",
"Botonera": "<div class='btn-group'><a href='javascript:void(0);' class='btn btn-info'><i class='fas fa-edit'></i></a><button class='btn btn-danger ml-2'><i class='fas fa-trash-alt'></i></button></div>",
"Apellido": "Sayton",
"Email": "asaytonnd@istockphoto.com",
"Genero": "Male"
},
{
"Nombre": "Addie",
"Botonera": "<div class='btn-group'><a href='javascript:void(0);' class='btn btn-info'><i class='fas fa-edit'></i></a><button class='btn btn-danger ml-2'><i class='fas fa-trash-alt'></i></button></div>",
"Apellido": "Robilliard",
"Email": "arobilliardnt@state.gov",
"Genero": "Female"
},
{
"Nombre": "Addie",
"Botonera": "<div class='btn-group'><a href='javascript:void(0);' class='btn btn-info'><i class='fas fa-edit'></i></a><button class='btn btn-danger ml-2'><i class='fas fa-trash-alt'></i></button></div>",
"Apellido": "Thorley",
"Email": "athorleynz@etsy.com",
"Genero": "Female"
},
{
"Nombre": "Addy",
"Botonera": "<div class='btn-group'><a href='javascript:void(0);' class='btn btn-info'><i class='fas fa-edit'></i></a><button class='btn btn-danger ml-2'><i class='fas fa-trash-alt'></i></button></div>",
"Apellido": "Samme",
"Email": "asamme4d@mtv.com",
"Genero": "Female"
},
{
"Nombre": "Adeline",
"Botonera": "<div class='btn-group'><a href='javascript:void(0);' class='btn btn-info'><i class='fas fa-edit'></i></a><button class='btn btn-danger ml-2'><i class='fas fa-trash-alt'></i></button></div>",
"Apellido": "Mitro",
"Email": "amitroju@examiner.com",
"Genero": "Female"
},
{
"Nombre": "Adoree",
"Botonera": "<div class='btn-group'><a href='javascript:void(0);' class='btn btn-info'><i class='fas fa-edit'></i></a><button class='btn btn-danger ml-2'><i class='fas fa-trash-alt'></i></button></div>",
"Apellido": "Davydenko",
"Email": "adavydenko2m@goo.gl",
"Genero": "Female"
},
{
"Nombre": "Aggi",
"Botonera": "<div class='btn-group'><a href='javascript:void(0);' class='btn btn-info'><i class='fas fa-edit'></i></a><button class='btn btn-danger ml-2'><i class='fas fa-trash-alt'></i></button></div>",
"Apellido": "Houson",
"Email": "ahousoncy@moonfruit.com",
"Genero": "Female"
},
{
"Nombre": "Aggie",
"Botonera": "<div class='btn-group'><a href='javascript:void(0);' class='btn btn-info'><i class='fas fa-edit'></i></a><button class='btn btn-danger ml-2'><i class='fas fa-trash-alt'></i></button></div>",
"Apellido": "Backe",
"Email": "abackern@biblegateway.com",
"Genero": "Female"
},
{
"Nombre": "Agnes",
"Botonera": "<div class='btn-group'><a href='javascript:void(0);' class='btn btn-info'><i class='fas fa-edit'></i></a><button class='btn btn-danger ml-2'><i class='fas fa-trash-alt'></i></button></div>",
"Apellido": "Viccars",
"Email": "aviccarse@slideshare.net",
"Genero": "Female"
},
{
"Nombre": "Agnese",
"Botonera": "<div class='btn-group'><a href='javascript:void(0);' class='btn btn-info'><i class='fas fa-edit'></i></a><button class='btn btn-danger ml-2'><i class='fas fa-trash-alt'></i></button></div>",
"Apellido": "Schubuser",
"Email": "aschubuser21@utexas.edu",
"Genero": "Female"
}
]
}
columns
solo pon{ "data": "Actions" }
como primer elemento y debería funcionar sin problemas.