Selective State Saving (Only on ColVis plugin)

Selective State Saving (Only on ColVis plugin)

kmburkekmburke Posts: 13Questions: 2Answers: 0
edited April 2015 in ColVis

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

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,439Questions: 1Answers: 10,052 Site admin

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

    Allan

  • kmburkekmburke Posts: 13Questions: 2Answers: 0

    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();
                });
            });
    
  • allanallan Posts: 61,439Questions: 1Answers: 10,052 Site admin

    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

  • kmburkekmburke Posts: 13Questions: 2Answers: 0

    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();
    });
    
  • allanallan Posts: 61,439Questions: 1Answers: 10,052 Site admin

    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

  • kmburkekmburke Posts: 13Questions: 2Answers: 0

    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

  • allanallan Posts: 61,439Questions: 1Answers: 10,052 Site admin

    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.

  • kmburkekmburke Posts: 13Questions: 2Answers: 0
    edited April 2015

    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": {}
                    }]
                },
    
  • allanallan Posts: 61,439Questions: 1Answers: 10,052 Site admin

    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

  • kmburkekmburke Posts: 13Questions: 2Answers: 0
    edited April 2015

    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?

  • allanallan Posts: 61,439Questions: 1Answers: 10,052 Site admin

    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

  • kmburkekmburke Posts: 13Questions: 2Answers: 0

    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

  • allanallan Posts: 61,439Questions: 1Answers: 10,052 Site admin
    edited April 2015 Answer ✓

    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

  • kmburkekmburke Posts: 13Questions: 2Answers: 0
    edited April 2015

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

This discussion has been closed.