ColReorder vs AJAX

PabloCamara

Excuse the translator, he is still learning English

hello,
I'm going to try to explain the problem that brings me here. I have a datatable that accesses the server to page, search, and fetch more pages. For each page that I request, Ajax makes a single call and brings the information. Up to here everything is perfect. I also have the possibility of loading filters from a file, that is, I can save the information on the order of the columns, the SearchBuildes criteria and the visibility of the columns. When I press the button to load all this information, AJAX triggers many POST calls. 1 for the searchbuilder criteria , ok , 1 for the visible columns ok and 1 for each column that is not in the original position and i have 124 columns .

I put below the code that I use to load the information.

The question is, how can I prevent Ajax from making a call for each reordering that makes colReorder.order(array_order)

dataTable definition

var table = $('#table_b').DataTable({language: lang, pageLength: 50,
    dom: 'Blfrtip',
    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,
    search: {
        return: true,
    },
    ajax: {
        url: '/post_reg_leg',
        type: 'POST',
    },

    columns: [   
        { data: "ENTIDAD"                                       , title:'Entidad'                        },
        { data: "FECINFO"                                       , title:'Fecha Reporte'                  },

.
. 121 columns more
.

        { data: "IDPROD"                                        , title:'Producto'                       },

    ],
    columnDefs: [
        {
            targets: [0,2,3,4,8,9,15,19,21],
            width: '30px',
        },
        {
            targets: [1,5,16,23],
            width: '60px',
        },
        {
            targets: [6,10,11,12,13,14],
            width: '100px',
        },    
        {
            targets: [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],
            width: '150px',
        },    
        {
            targets: [7,22,25,67,68,69,70,71,72,73,74,75,76,77,78,79,80],
            width: '300px',
        },                                                
        { className: 'dt-compact' ,targets: '_all'},                                 
    ],







});


$('#BtRestore').on('click', function() {
    var x  = document.getElementById("msin");
    var e  = document.getElementById("msrn");

    var valor = x.options[e.selectedIndex].value;
    var Resultado = valor.replaceAll('"','"');


    if ( Resultado != ' ' ) {
        XXResultado = JSON.parse(Resultado);
        table.searchBuilder.rebuild(XXResultado);
        table.columns.adjust().draw( true );
    }
    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);



table.colReorder.reset();
table.searchBuilder.rebuild(); 

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

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

table.colReorder.order(Campos_tabla , true);
table.columns().visible(false,false);
table.columns(Campos_ord).visible(true,false);

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

}); 

help pls

PabloCamara

I would like to add that it has been impossible for me to put the test case

PabloCamara

PabloCamara

colin

You have enabled serverSide, so all the ordering/paging/filtering is done by the server, which is why you're seeing those Ajax requests. If your dataset is small, < 50k records, then you probably don't need that enabled - just remove that option and all the processing will be done on the browser without a need to contact the server.

Colin

PabloCamara

Thanks for the answer, the problem is that having 124 columns it is not an option to do it without serverSide since I ran out of memory and it takes a long time. Is there any option to cancel the refresh when loading the column order? since the reordering of the columns does not affect the serverSide. I'm probably doing something wrong since when loading the filters from my file I do the following and I don't know if it's correct.

table.colReorder.reset();
table.searchBuilder.rebuild();

table_fields = JSON.parse(x.options[e.selectedIndex].value);
colViss = JSON.parse(zz.options[e.selectedIndex].value);

Fields_ord = colViss.sort(function (a, b) { return a - b; });
table.colReorder.order(table_fields, true);
table.columns().visible(false,false);
table.columns(ord_fields).visible(true,false);

allan

At the moment there isn't a way to cancel the Ajax reloads I'm afraid. It sounds like I need to spend some time with an example such as this scenario and try to optimise it a bit. Part of the issue is that ColReorder actually moves the data about (assuming arrays of data are used, which appears to be the case here), so all the other components need to update for the new column order - thus causing them to refresh from source.

Sorry I don't have a better and more immediate solution for you.

Allan

PabloCamara

Thanks, maybe with savestate I can minimize the impact of so many calls. That is to say, I keep the "photo" of the initial state. I have to try it. However, thank you very much for the response.