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

JuanJoseVegaJuanJoseVega Posts: 6Questions: 1Answers: 0
edited March 2023 in Free community support

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

  • colincolin Posts: 15,095Questions: 1Answers: 2,581

    You have serverSide enabled, so the returned data needs to be a certain format. In your response, there isn't a draw value, which DataTables uses to marry up the response to the request.

    The protocol is discussed here. Also see examples here.

    Cheers,

    Colin

  • JuanJoseVegaJuanJoseVega Posts: 6Questions: 1Answers: 0

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

  • JuanJoseVegaJuanJoseVega Posts: 6Questions: 1Answers: 0

    I've handled other dataTables the same way with serverSide, true and they work correctly without the draw parameter

  • kthorngrenkthorngren Posts: 19,974Questions: 26Answers: 4,702

    I've handled other dataTables the same way with serverSide, true and they work correctly without the draw parameter

    Are you sure? The draw parameter 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 proper draw response.

    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

  • JuanJoseVegaJuanJoseVega Posts: 6Questions: 1Answers: 0

    @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);
    })

  • JuanJoseVegaJuanJoseVega Posts: 6Questions: 1Answers: 0

    sorry if I didn't make myself clear I'm a novice programmer

  • kthorngrenkthorngren Posts: 19,974Questions: 26Answers: 4,702
    edited March 2023

    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 draw parameter reflecting the proper sequence number that was sent in the request. Please see the SSP protocol docs for details.

    Kevin

  • JuanJoseVegaJuanJoseVega Posts: 6Questions: 1Answers: 0

    ok thanks for nothing

  • kthorngrenkthorngren Posts: 19,974Questions: 26Answers: 4,702

    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

  • kthorngrenkthorngren Posts: 19,974Questions: 26Answers: 4,702

    I see you are asking about sending parameters to the server. Use ajax.data as a function. See this example.

    Kevin

Sign In or Register to comment.