The pagination's Next button doesn't disable

CamiloFranco

I made a paged table that brings me a certain amount of data and as I advance it brings me more through a server side process but the Next button does not work.

CamiloFranco

function tableInit(){

$('#tbl_solicitud_devolucion_all').dataTable().fnDestroy()
$('#tbl_solicitud_devolucion_all').DataTable({
        "ajax":
            $.fn.dataTable.pipeline( {
                "url": $("input#base_url").val()+"api/solicitud/getSolicitudesDevolucionPaginada?estado=0,1,2,4",
            "type" : "GET",
            "pages": 5,
            }),
        "lengthMenu": [
            [5, 10, 15, 25, 50],
            [5, 10, 15, 25, 50],

        ],
        "language": {
            sProcessing: "Procesando...",
            sLengthMenu: "Mostrar _MENU_ registros",
            sZeroRecords: "No se encontraron resultados",
            sEmptyTable: "Ningún dato disponible en esta tabla",
            sInfo: "Del _START_ al _END_ de un total de _TOTAL_ reg.",
            sInfoEmpty: "0 registros",
            sInfoFiltered: "(filtrado de _MAX_ reg.)",
            sInfoPostFix: "",
            sSearch: "Buscar:",
            sUrl: "",
            sInfoThousands: ",",
            sLoadingRecords: "Cargando...",
            //sDom: "tlip",
            oPaginate: {
                sFirst: "Primero",
                sLast: "Último",
                sNext: "Sig",
                sPrevious: "Ant"
            },
            oAria: {
                sSortAscending:
                ": Activar para ordenar la columna de manera ascendente",
                sSortDescending:
                ": Activar para ordenar la columna de manera descendente"
            }
        },

        'iDisplayLength': 10,
        'paging':true,
        'info':true,
        "searching": false, 
        "processing":true,
        "serverSide": true,
        "order": [[ 2, "desc" ]],
        'columns':[
            {
                "data": null,
                "render": function(data, type, row, meta){
                    return moment(data.fecha).format('DD/MM/YYYY')
                }
            },
            {
                "data": "hora",
                "render": function(data, type, row, meta){
                    return data
                }
            },
            {
                "data": "solicitado",
                "render": function(data, type, row, meta){
                    return data
                }
            },
            {
                "data": "documento",
                "render": function(data, type, row, meta){
                    return data
                }
            },
            {
                "data": null,
                "render": function(data, type, row, meta){
                    return (data.nombres+' '+data.apellidos);
                }
            },
            {
                "data": null,
                "render": function(data, type, row, meta){
                    return formatNumber(data.monto_devolver);
                }
            },
            {
                "data": null,
                "render": function(data, type, row, meta){ 
                    return (data.fecha_proceso != null)? moment(data.fecha_proceso).format('DD/MM/YYYY hh:mm:ss'):'';
                }
            },
            {
                "data" : "resultado"
            },
            {
                "data": null,
                "render": function(data, type, row, meta){
                    return formatNumber(data.monto_devuelto);
                }
            },
            {
                "data": null,
                "render": function(data, type, row, meta){
                    if(data.estado == 1){
                        return '<p class="text-success">PROCESADO</p>';
                    }
                    if(data.estado == 0){
                        return '<p class="text-info">PENDIENTE</p>';
                    }
                    if(data.estado == 2){
                        return '<p class="text-warning">PROCESANDO</p>';
                    }
                    if(data.estado == 4){
                        return '<p class="text-warning">DESCARTADA</p>';
                    }

                }
            },
            {
                "data" : null,
                "render": function(data, type, row, meta ){
                    var buttonUp = "<div>"+ 
                                        "<a class='btn btn-xs btn-primary ' onclick='cargarInfoDevolucion("+data.id_cliente+","+data.id+" )' title='Ver Solicitud'><i class='fa fa-eye'></i></a></div>";

                    return buttonUp; 
                }
            }            
        ],


    });
}

colin

You have serverSide enabled, so the table only displays what is sent from the server. This works as expected here.

Your problem is likely that the server script is sending the same data - you can confirm that by opening the browser's developer tools and watching the network tab while you press the table's Next button.

If nothing is being requested/sent, then that would suggest the data in the previous response sent incorrect table numbers, in that case, see the protocol here. Also see examples here.

Cheers,

Colin