Selective State Saving (Only on ColVis plugin)

kmburke

I would like to be able to use State saving for saving the columns that are hidden/visible in ColVis.

I do not want State Saving to save other filters done on Datatables, just the ones done in ColVis. How do i do that?

I am using the colvis new method for displaying the dropdown

var colvis = new $.fn.dataTable.ColVis(table);

Thx

allan

You need to use the stateSaveParams callback to remove the parameters that you do not want to have saved.

Allan

kmburke

Could you provide an example of how to remove the filter? I just want to save only the hidden columns state or to not save the filters on the columns. Either one works for my work.

Here's what I tried.

// DataTable
        var table = $('#tblmain').DataTable({
            "scrollCollapse": true,
            "paging": false,
            "processing":true,
            "dom": 'lfrtip',
            "stateSave": true,
            "stateSaveParams": function (settings, data) {
                data.search.search = "";
            },
            "language": {
                "processing": "datatables is busy"
            },
            columnDefs: [
        { visible: false, targets: 2 }
            ],
            
        });

// Setup - add a text input to each header cell

$('#tblmain tfoot th').each(function () {
            var title = $('#tblmain thead th').eq($(this).index()).text();
            $(this).html('<input type="text" placeholder="Search" class="tbltextbox" />');
        });




// Apply the search
        table.columns().eq(0).each(function (colIdx) {
            $('input', table.column(colIdx).footer()).on('keyup change', function () {
                table
                    .column(colIdx)
                    .search(this.value)
                    .draw();
            });
        });

allan

Just delete the option you don't want: http://live.datatables.net/behemibi/1/edit .

  var table = $('#example').DataTable( {
    stateSave: true,
    stateSaveParams: function (settings, data) {
      delete data.search;
    }
  });

You need to be using 1.10.6 for this to work correctly.

Allan

kmburke

Hello Allen,

Your solution created some other issue and we are not sure whether it solved our problem or not, it is throwing the following error

"Uncaught TypeError: Cannot read property 'search' of undefined".

I used localStorage.clear(), the error is gone but its not saving the state anymore.

And also I made the upgrade to 1.10.6.

Here's my datatables code:

jQuery(document).ready(function () {

       
        var table = $('#tblmain').DataTable({
            "scrollCollapse": true,
            "paging": false,
            "processing":true,
            "dom": 'lfrtip',
            "stateSave": true,
            "stateSaveParams": function (settings, data) {
                delete data.search;
            },
            "language": {
                "processing": "datatables is busy"
            },
            columnDefs: [
        { visible: false, targets: 2 }
        ]
        });
        var tt = new $.fn.dataTable.TableTools(table);
        var colvis = new $.fn.dataTable.ColVis(table);
        
        // Setup - add a text input to each header cell
        $('#tblmain tfoot th').each(function () {
            var title = $('#tblmain thead th').eq($(this).index()).text();
            $(this).html('<input type="text" placeholder="Search" class="tbltextbox" />');
        });

// Apply the search
        table.columns().eq(0).each(function (colIdx) {
            $('input', table.column(colIdx).footer()).on('keyup change', function () {
                
                table
                    .column(colIdx)
                    .search(this.value)
                    .draw();
            });
        });

 localStorage.clear();
});

allan

Interesting - I don't immediately see any reason why it would work in my demo and not in your example. Could you possibly link to your page so I can debug it directly please?

Thanks,
Allan

kmburke

Yes. What we are doing is using the individual column search instead of the default search. We want to clear that search instead.

http://live.datatables.net/dubemubo/1/edit

allan

Oh I see. You will need to loop over the columns array in the state object and remove the search value for each of the columns. The state object is documented in the stateSaveCallback documentation.

Allan.

kmburke

Allan,

I may need to be more clear about what we are trying to do. The only thing we are trying to save through the pages is the ColVis hidden/show column settings. At this point the only thing that's causing us not to just do a full StateSave is the Individual Column Search being saved from the initial page (Advanced search that takes you to the datatable).

We have a home page which is setup as an Advanced search (html form) with its own settings to display the data in the datatables. If we leave any info in the individual column search, go back to the advanced search page, and click search there, it will only load the filtered data from the info that was still stored in the individual column search.

Your solution seems to clear the individual search ok, which is what we want. However it is not saving the settings made in the show/hide dropdown in the ColVis plugin, which we want to have.

"stateSave": true,
            "stateSaveCallback":function(settings, data){
                "columns"[
                    {
                        "visible": false,
                        "search": {}
                }]
            },

allan

The code above doesn't look like it is valid. Missing colon, and object property where an operator is expected.

The state saving object is described in the documentation for stateSaveCallback . You would use the stateSaveParams(!) option to remove the options that you don't want from that object. My example above shows how to remove the default global search. You need to add the required code to also remove the ordering, paging and individual column search information if that is what you want to do.

Allan

kmburke

based on what you said, a stateSaveParams is the way to go if individual columns search is all i want to remove. I've been playing around with a few delete properties, but non of them can target the individual column search correctly. I have run out of ideas.

"stateSave": true,
            "stateSaveParams": function(settings, data){
                delete data.columns.search;
            },

Do you have any idea on how to target the individual column search?

allan

As I noted above, you will need a loop to go over the columns array (a simple for loop with do it) and then delete the search property from each object in that array.

Allan

kmburke

Allan, I have been trying the approach you have suggested. However its not deleting whats stored in the individual columns array. Both my coworker and I have tried many different things, but can't get the values to clear. Could you provide a fix to the existing datatables example below?

Thanks

http://live.datatables.net/dubemubo/7/edit

allan

There are a number of issues with your for loop there. All you should need is this:

      for (var i = 0;i < data.columns.length; i++){
        delete data.columns[i].search;
      }

edit I stated before that it didn't work due to a bug in DataTables. That was incorrect, it does work just fine in DataTables - I was missing an s in the columns parameter name... Link: http://live.datatables.net/dubemubo/9/edit

Allan

kmburke

I believe it is working fine now. Thanks for all your help Allan!