get response from server but does not show me the data Table information
get response from server but does not show me the data Table information
JuanJoseVega
Posts: 6Questions: 1Answers: 0
Hello everyone I am trying to show the information in the Jquery dataTable getting the data through ajax the server response brings me the data, but when showing the information in the table it shows me nothing.
please anything would help me
this is my js code:
function generarDataTable() {
if(validarFormulario()){
var datos=$("#filtroFichas").serialize();
//DataTables para las fichas
if(tblFichas != null)
{
tblFichas.destroy();
}
tblFichas = $('#dtFichas').DataTable({
dom: 'Bfrtip',
"lengthMenu": [ [ 10, 50, 100, 500, 1000], [10, 50,100,500, 1000] ],
stateSave: true,
"processing": true,
"serverSide": true,
"ajax":/*{*/function (data, callback, settings){
$.ajax({
url: '<?= RUTAW ?>/secciones/bienestarsocial/ajaxserver.php',
method: 'POST',
data: new FormData(document.querySelector("#filtroFichas")),
processData: false, // !importawnt
contentType: false, // !important
})
.done(function(data) {
callback(data);
console.log(data);
})
},
"columns": [
<?= (in_array('A', $privs) ? '{ name:"check", "data": "check", "bSortable": false,"sWidth": "1%" },':''); ?>
{ "name":"id", "data": "id", "sClass": "dt-center","sWidth": "1%" },
<?php if($fichaModelo->getAtributoTipo('habilitar_clasificacion')): ?>
{ "name":"clasificacion", "data": "clasificacion", "sClass": "dt-center","sWidth": "1%" },
<?php endif; ?>
{ "name":"codigo", "data": "codigo", "sClass": "dt-center","sWidth": "1%" },
{ "name":"fecha", "data": "fecha", "sClass": "dt-nowrap","sWidth": "1%" },
{ "name":"municipio", "data": "municipio", "sClass": "dt-center","sWidth": "1%" },
{ "name":"barrio", "data": "barrio", "sClass": "dt-center" },
{ "name":"direccion", "data": "direccion", "sClass": "dt-center","sWidth": "7%" },
<?php if($fichaModelo->getAtributoTipo('habilitar_tabviewpersonas')): ?>
{ "name":"cabeza", "data": "cabeza" },
<?php endif; ?>
{ "name": "asociados", data: "asociados"},
<?php if($fichaModelo->getAtributoTipo('habilitar_telefono')): ?>
{ "name": "telefono", "data": "telefono", "sClass": "dt-right","sWidth": "7%" },
<?php endif;
if($camposDataTable && isset($camposDataTable['headersDt']) && strlen($camposDataTable['headersDt'])>0)
{
echo $camposDataTable['headersDt'];
}
?>
<?php if($fichaModelo->getAtributoTipo('habilitar_tabviewpersonas')): ?>
{ "name":"cantidad_personas", "data": "cantidad_personas", "sClass": "dt-nowrap","sWidth": "1%" },
<?php endif; ?>
<?php if(_BSFICHA_RIESGO): ?>
{ "name":"calificacion", "data": "calificacion", "sClass": "dt-center","sWidth": "1%" },
<?php endif;
if(_BSFICHA_HABILITAR_ESTADO): ?>
{ "name":"estado", "data": "estado", "sClass": "dt-center","sWidth": "1%" },
<?php endif; ?>
<?php if(_BSFICHA_GEOREFERENCIAR): ?>
{ "name": "geolocalizacion", data: "geolocalizacion", sClass: "dt-center", sWidth: "1%"},
<?php endif; ?>
{ "name":"ver", "data": "ver", "bSortable": false ,"sWidth": "1%" },
{ "name":"editar", "data": "editar", "bSortable": false ,"sWidth": "1%" }
],
buttons: [
{
extend: 'colvis',
columns: ':not(".noVis")', //Ocultar columnas que tengan determinada clase en el th (ejemplo class="noVis")
},
'pageLength',
],
"language": {
"url": "<?= RUTAW?>/lib/js/jquery/datatables1.10.11/Spanish.json",
buttons: {
colvis: 'Columnas',
pageLength: {
"_": "Mostrar %d registros",
"-1": "Mostrar todos"
}
}
},
"bFilter": false,
"order": [[2, "asc"]],
//"columnDefs": [ { "visible": false, "targets": 0 }]
columnDefs: [{
targets: "sVis",
visible: false
}],
});
if(esFiltro)
{
tblFichas.page('first').draw('page');
esFiltro = false;
}
return false;
}
}
this is my HTML code:
<!--Tabla para las fichas-->
<table id="dtFichas" class="display stripes" cellspacing="0" width="100%">
<thead>
<tr>
<?= (in_array('A', $privs) ? '<th width="1%" class="noVis"></th>' : ''); ?>
<th width="1%" nowrap class="sVis">ID</th>
<?php if($fichaModelo->getAtributoTipo('habilitar_clasificacion')): ?>
<th width="1%" class="sVis">Clasificación</th>
<?php endif; ?>
<th width="1%" nowrap><?= $fichaModelo->getAtributoTipo('etiqueta_codigo')?></th>
<th width="1%" nowrap>Actualización</th>
<th width="1%"><?= $fichaModelo->getAtributoTipo('etiqueta_municipio') ?></th>
<th width="1%"><?= $fichaModelo->getAtributoTipo('etiqueta_barrio') ?></th>
<th><?= $fichaModelo->getAtributoTipo('etiqueta_direccion') ?></th>
<?php if($fichaModelo->getAtributoTipo('habilitar_tabviewpersonas')): ?>
<th><?= $fichaModelo->getAtributoTipo('etiqueta_cabeza_familia') ?></th>
<?php endif; ?>
<th class="sVis">Usuarios</th>
<?php if($fichaModelo->getAtributoTipo('habilitar_telefono')): ?>
<th>Teléfono</th>
<?php endif;
if($camposDataTable && isset($camposDataTable['headers']) && strlen($camposDataTable['headers'])>0)
{
echo $camposDataTable['headers'];
}
?>
<?php if($fichaModelo->getAtributoTipo('habilitar_tabviewpersonas')): ?>
<th width="1%" class="noVis"><img title="Personas asociadas a la ficha" border="0" src="/sgi/lib/img/users.png"></th>
<?php endif;
if(_BSFICHA_RIESGO): ?>
<th><?= _BSFICHA_ETQ_RIESGO ?></th>
<?php endif; ?>
<?php if(_BSFICHA_HABILITAR_ESTADO): ?>
<th>Estado</th>
<?php endif ?>
<?php if(_BSFICHA_GEOREFERENCIAR): ?>
<th class="noVis"></th>
<?php endif; ?>
<th class="noVis"></th>
<th class="noVis"></th>
</tr>
</thead>
</table>
this is my response from the server:
{"recordsTotal":"56","recordsFiltered":"56","data":[{"check":"<input type=\"checkbox\" name=\"fichas[]\" id=\"ficha_7022\" value=\"7022\" class=\"cbx fichasId\" >","id":"7022","codigo":"<a href=\"\/sgi\/secciones\/index.php?a=bienestarsocial&option=editarFicha&fichaId=7022\" title=\"7022\">123<\/a>","fecha":"<a href=\"\/sgi\/secciones\/index.php?a=bienestarsocial&option=editarFicha&fichaId=7022\">2021-05-03<\/a>","municipio":"Tumaco","barrio":"Brisas del Mar","direccion":"","cabeza":"","asociados":null,"clasificacion":"","cantidad_personas":"<span class=\"sgitag\">1<\/span>","calificacion":1,"ver":"
<
div class=\"btnlupa\" onclick=\"verFicha(7022);\"><\/div>","editar":"
<
div onclick=\"document.location.href='\/sgi\/secciones\/index.php?a=bienestarsocial&option=editarFicha&fichaId=7022'\" class=\"btnedit\"><\/div>","eliminar":"
<
div onclick=\"eliminarFicha(7022)\" class=\"btncan\"><\/div>","telefono":null,"estado":"A","geolocalizacion":""}
Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
Answers
You have
serverSideenabled, so the returned data needs to be a certain format. In your response, there isn't adrawvalue, which DataTables uses to marry up the response to the request.The protocol is discussed here. Also see examples here.
Cheers,
Colin
@colin greetings and thanks for the prompt reply, I'm a bit new to programming, I understand your answer but I don't know how to implement it in the code I already have.
I've handled other dataTables the same way with serverSide, true and they work correctly without the draw parameter
Are you sure? The
drawparameter is a sequence number that Datatables uses to match the requests and responses, as Colin mentioned. I've never seen a case where server side processing worked without the properdrawresponse.Do you need server side processing? How many rows of data do you plan to have? According to your snippet you have 56 rows. You won't need server side processing in this case.
Kevin
@kthorngren If I am sure I have worked with other dataTables that at this moment work correctly and have the serverSide: true and without the parameter draw the difference I see is in the ajax call.
In this case there are few records (56) because I work on a test database but if you take it to production there are many more.
This is an example of how I did it and they work well:
ajax: {
type: "POST",
url: "/sgi/sections/adm_systemreference/ajaxserver.php",
data: {
f: "generateDtReferences"
}
},
columns: [.....
but in this case I have it like this because I have a form that would be to filter information from the dataTable:
$.ajax({
url: '<?= RUTAW ?>/sections/sections/wellbeing/ajaxserver.php',
method: 'POST',
data: new FormData(document.querySelector("#filterFiches")),
processData: false, // !importawnt
contentType: false, // !important
})
.done(function(data) {
callback(data);
//console.log(data);
})
sorry if I didn't make myself clear I'm a novice programmer
I'm not going to argue with whether it worked in the past. But for server side processing to work now the response needs to have the
drawparameter reflecting the proper sequence number that was sent in the request. Please see the SSP protocol docs for details.Kevin
ok thanks for nothing
Not sure what you mean. I'm telling you what needs to happen for server side processing to work. Do you not believe me?
Kevin
I see you are asking about sending parameters to the server. Use
ajax.dataas a function. See this example.Kevin