Ajax.reload() vs searchbuilder.rebuild()

PabloCamara · December 2023

Tengo un datatable que en un momento borro su contenido y lo vuelvo a cargar con ajax.reload(). Además después de reload cargo el criterio anterior con searchbuilder.rebuild(). Como ajax.reload() es asíncrono cargo el criterio en el evento xhr.dt para asegurarme que los datos están cargados. Hasta aquí todo bien . Cuando muestro el datatables tengo que pulsar el botón de searchbuilder para que aplique el filtro . ¿ existe alguna manera que searchbuilder ejecute el filtro sin tener que pulsar el botón del menú de searchbuilder. .?

Gracias

allan · December 2023

Hi,

Could you give me a link to a page showing the issue please? SearchBuilder should be active as soon as the button is initialised.

Allan

PabloCamara · December 2023

de verdad que me gustaria poder publicar un enlace , pero estoy detras de un firewall muy estricto .

basicamente estoy en bucle. El reto principal que tengo es que una de las tablas llega a tener hasta 145 columnas,

cada vez que el usuario genera un informe lo puede guardar :

    $('#BtGuarda').on('click', function() {
        var arr_tabla = [];
        var arr_visible = [];
        var Arr_resultado = [];
        var contador = 0;
        var valor = 0;


        stored = table.searchBuilder.getDetails();
        $('#CadenaCriterio').val(JSON.stringify(stored));
        table.searchBuilder.rebuild(stored);        

        arr_tabla = table.colReorder.order();

        for( i=0 ; i < arr_tabla.length;i++) {
           if ( table.column(i).visible()) {
                arr_visible.push(arr_tabla[i]);
           }
        }

        $('#CadenaCampos').val(arr_tabla);
        $('#CadenaVisibles').val(arr_visible);
        table.columns.adjust().draw( true );            

    });

Me guardo en un fichero .csv el criterio de SearchBuilder , las columnas ( visibles ) , y el orden de las columnas.

Hasta aqui todo bien.

Si implemento serverSide Metodo POST ( ya que GET no lo permite) ( tamaño del mensaje demasiado grande . Cuando cargo la informacion realiza hasta 200 llamadas POST ya que colReorder por cada columna llama a POST y SearchBuilder tambien hace llamadas POST. Despues de ver que no era una solucion volvi al metodo original , es decir SIN serverside. De esta manera la carga del fichero(json) es rapida , pero me vuelvo a encontrar con Colreorder.order. . PEgo aqui la parte de codigo de Carga del perfil de reporte.

        var e       = document.getElementById("msrn");
        var xx      = document.getElementById("msca");
        var zz      = document.getElementById("msxx");
        var x       = document.getElementById("msin");          
        var arr_or = [];



        var valor = x.options[e.selectedIndex].value;
        var Resultado = valor.replaceAll('&#34;','"');
        console.log('resultado='+Resultado)



        var Campos_tabla = [];
        var colViss = [];
        var Campos_ord = [];
        var table = $('#table_b').DataTable();

// table.clear();

// table.stateRestore.state('inicial').load();

        Campos_tabla =  JSON.parse(xx.options[e.selectedIndex].value);
        colViss      =  JSON.parse(zz.options[e.selectedIndex].value);

        for ( a = 0 ; a < Campos_tabla.length ; a++) {
            arr_or.push(a);
        }
        table.colReorder.order(arr_or , true);
        console.log('el array_or='+arr_or);
        table.colReorder.order(Campos_tabla , true);

        Campos_ord = colViss.sort(function (a, b) {  return a - b;  });


        table.columns().visible(false,false);
        table.columns(Campos_ord).visible(true,false);


        table.buttons(0,0).enable(true);
        table.buttons(0,1).enable(true);
        table.buttons(0,2).enable(true);        
        table.buttons(0,3).enable(true); 
        $('#BtGuarda').prop('disabled' , false); 
        $('#BtUpdate').prop('disabled' , false);

/* for( a = 0 ; a < Campos_tabla.length ; a++) {
console.log('columnas='+Campos_tabla[a] + 'a='+a);
table.colReorder.move( Campos_tabla[a] , a , false , false );

        } */

// table.colReorder.transpose(Campos_tabla,'toOriginal');
// table.colReorder.reset();

// table.ajax.reload();

        if ( Resultado != ' ' ) {
            var XXResultado = JSON.parse(Resultado);
            table.searchBuilder.rebuild(XXResultado);
        }

        table.columns.adjust().draw(true);

He intentado TOD ( creo ) , guardar el estado , borrar la tabla y recargarla para que el colreorder no tiviera datos y asi ( creo ) fuera mas rapido , pero en este caso al hacer table.clear() , colreorder , ajax.reload() no me toma los filtros . Es decir , cargo los filtros table.searchBuilder.rebuild(XXResultado); en el evento xhr.dt pero estos no se ejecutan hasta que pulso el boton de searchbuilder.

Realmente no se que estoy haciendo mal ( 145 columnas no es muy buena idea ) . yo lo que creo que seria buena idea es una vez cargado el "perfil" del reporte poder volver a llamara a init o create datatable , pero no se ni entiendo como hacer esto o cual es la solucion mas sencilla ( sin eliminar 145 columnas ).

pongo parte de la inicializacion de la datatable por si ayuda.

PabloCamara · December 2023

var table = $('#table_b').DataTable({language: lang, pageLength: 50,
    dom: '<"container-fluid"<"row"<"col"B><"col"l><"col"f>>>rtip',
    colReorder: true,
    colReorder: { realtime:false,},
    scrollY: '530px',
    scrollX: true,
    scrollCollapse: true,
    responsive: false,
    processing: true,
    buttons: {
        buttons: [
                { extend: 'searchBuilder',

                    className: 'btn btn btn-light btn-outline-dark btn-sm',
                    text:'Filtrar' , 
                    config: { 

                            liveSearch: false,  
                            columns: ':visible' , 
                            depthLimit: 2
                    } 
                },
                { extend: 'csv'  , 
                    className: 'btn btn btn-light btn-outline-dark btn-sm',
                    text: 'CSV'   , 
                    action: newexportaction,
                    exportOptions: { 
                            columns: ':visible'
                    } 
                },
                { extend: 'excel', 
                    className: 'btn btn btn-light btn-outline-dark btn-sm' ,
                    text: 'Excel' , 
                    title:'Reporte Legacy Contratos',
                    exportOptions: { columns: ':visible'},
                    action: newexportaction,
                    excelStyles:{
                        template:'gray_medium'
                    },
                    customizeData: function(data) {
                        for(var i = 0; i < data.body.length; i++) {
                            for(var j = 0; j < data.body[i].length; j++) {
                                data.body[i][j] = '\u200C' + data.body[i][j];
                            }
                        }
                    }

                }

        ],
        dom: {
            button: {
                className: 'btn'
            },
        }
    },
    lengthMenu: [ [ 25, 50, 75, 100 ], [25, 50, 75, 100 ] ] ,

// autoWidth: true,
// serverSide: true,
paging: true,
deferRender: true,
search: {
return: true,
},
ajax: {
url: 'static/dato dataSrc: '',
},
columns: [
{ data: "ENTIDAD" { data: "FECINFO" { data: "IDPROD" { data: "IDSPROD" { data: "ST_REF" { data: "REF_CONTR" { data: "REF_MERCURY" { data: "FAC_REF" { data: "NUM_UTI" { data: "ESTADO" { data: "FEC_ESTADO" { data: "FEALTCON" { data: "FECVENCI" { data: "FEC_CAN" { data: "FEC_ULT_REN" { data: "TIPO_PERSONA" .
. 145 colunas
.
{ data: "Codigo_postal" ],
columnDefs: [
{
targets: width: '30px',
},
{
targets: width: '60px',
},
{
targets: width: '100px',
},
{
targets: width: '150px',
},
{
targets: width: '300px',
},
{ className: ], s/DatosBase/agrupado_trade_contracts_mexico.json',
, title:'Entidad' },
, title:'Fecha Reporte' },
, title:'Producto' },
, title:'Sub Producto' },
, title:'Standard Referencia' },
, title:'Ref.Contrato' },
, title:'Ref.TradeNxt' },
, title:'Ref.Facility' },
, title:'Numero Utilización' },
, title:'Estado' },
, title:'Fecha Estado' },
, title:'Fech.Alta Contrato' },
, title:'Fecha Vencimiento' },
, title:'Fecha Cancelación' },
, title:'Fecha Ultima Renovación' },
, title:'Tipo Persona' },
, title:'Codigo Postal' },
[0,2,3,4,8,9,15,19,21],
[1,5,16,23],
[6,10,11,12,13,14],
[17,18,20,24,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58 ,59,60,61,62,63,64,65,66,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122],
[7,22,25,67,68,69,70,71,72,73,74,75,76,77,78,79,80],
'dt-compact' ,targets: '_all'},

});


new $.fn.dataTable.Buttons(table , { 
    buttons: [ {extend:'columnsToggle'}, ]
});
table.buttons(1 , null).container().appendTo('.mis-botones');
table.on( 'buttons-action', function ( e, buttonApi, dataTable, node, config ) {
    var botones = $( 'button.buttons-columnVisibility.dt-button-active' );


    if( botones.length > 0 ) {
        table.buttons(0,0).enable(true);
        table.buttons(0,1).enable(true);
        table.buttons(0,2).enable(true);
        $('#BtGuarda').prop('disabled' , false);
        $('#BtUpdate').prop('disabled' , false);


    } else {
        table.searchBuilder.rebuild(); 
        table.buttons(0,0).enable(false);
        table.buttons(0,1).enable(false);
        table.buttons(0,2).enable(false);
        $('#BtGuarda').prop('disabled' , true);  
        $('#BtUpdate').prop('disabled' , true);  


    }
    setTitles();

} );


table.on('init.dt', function () {

    table.buttons(0,0).enable(false);
    table.buttons(0,1).enable(false);
    table.buttons(0,2).enable(false);
    $('#BtGuarda').prop('disabled' , true);        
    $('#BtUpdate').prop('disabled' , true);  
    setTitles();
    table.columns().visible(false,false);



});

$('#BtGuarda').on('click', function() {
    table = $('#table_b').DataTable();
    var arr_tabla = [];
    var arr_visible = [];
    var Arr_resultado = [];
    var contador = 0;
    var valor = 0;


    stored = table.searchBuilder.getDetails();
    $('#CadenaCriterio').val(JSON.stringify(stored));
    arr_tabla = table.colReorder.order();

    for( i=0 ; i < arr_tabla.length;i++) {
       if ( table.column(i).visible()) {
            arr_visible.push(arr_tabla[i]);
       }
    }
    $('#CadenaCampos').val(arr_tabla);
    $('#CadenaVisibles').val(arr_visible);

});

muchas gracias por vuestra ayuda.

Ajax.reload() vs searchbuilder.rebuild()

Ajax.reload() vs searchbuilder.rebuild()

Answers

Howdy, Stranger!

Categories

DataTables

Ajax.reload() vs searchbuilder.rebuild()

Ajax.reload() vs searchbuilder.rebuild()

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables