Datatables with Scroller plugin issue.

Weinrib

Hello everyone, I'm having some issues trying to make a scrollable table using Datatable's plugin. The thing is that my table has a checkbox column, which I use to select the row's value.
Like this..
.

So basically, the user just selects a few and a price counter goes up for each selected. That's just fine.. But when the scroller loads the second "page" via ajax my checkboxes get unchecked..

So I find myself scrolling through the table, not knowing which input I checked before.

Is there a way to to scroll back and forth the previously loaded records without having datatables calling the ajax and drawing them again?

Thanks in advance,

Weinrib.

prats

Add one button to save previous state into db or cookie https://datatables.net/examples/basic_init/state_save.html

$.ajax( {
      url: realPath+"/ws/ticketreporting/getsavedSettings?reportId=rd_ticket_Summary",
      async: false,
      dataType: "json",
      type: "GET",
      success: function (savedSettings,callback) {
      localStorage.setItem( 'DataTables_rd_ticket_Summary_'+user_code , JSON.stringify(savedSettings) )   
      }
    } );

oTable= $('#rd_ticket_Summary').DataTable( {
      
        stateSave:true,
         "bProcessing": true,
        stateSaveCallback: function(settings,data) {
        localStorage.setItem( 'DataTables_rd_ticket_Summary_'+user_code , JSON.stringify(data) )
    },
        stateLoadCallback: function(settings) {
        // ajax to URL to get json and return settings.
        return JSON.parse( localStorage.getItem( 'DataTables_rd_ticket_Summary_'+user_code) );
    
    },
"buttons": [
                    {
                        text: '<i class="fa fa-floppy-o" aria-hidden="true" style="color:#585858"></i>',
                        //changed "Save Report" to "Save Settings"
                        titleAttr: 'Save Settings',
                        action: function ( e, dt, node, config ) {
                        var data =dt.state() || {}
                        var data=JSON.stringify(data);      
    // Send an Ajax request to the server with the state object
    $.ajax( {
      "url": realPath+"/ws/ticketreporting/saveSettings?reportId=rd_ticket_Summary",
      "data": data,
      "dataType": "json",
      "type": "POST",
      "success": function () {}
    } );
  
                        }
                    }]
});

allan

Are you using server-side processing? If so, that's the issue. When using server-side processing only the visible rows (and a bit of an overflow if you are using Scroller) actually exist on the client-side. So when you scroll it creates new elements, even if that row has been shown before. Hence why it would appear to become unchecked.

What you need to do, is like @prats suggests and store the checked rows, then recheck them when they are redisplayed. But keep in mind that you can't actually do anything with the rows that no longer exist on the client-side. You could probably tell the server to delete them based on their ids, but you can't update them on the client-side, since they don't exist on the client-side!

This all assumes you are using server-side processing.

Allan