Individual column searching (text inputs) does not show input text after page changing

LeonHardd · December 2019

Hello,

I’m using the “Individual column searching (text inputs)” explained in

https://datatables.net/examples/api/multi_filter.html

but I have a problem.

When I change page and later come back, the values written inside the input controls are not displayed. The filters work (i.e. the columns contain only the filtered results), but the searched words are not visibile. The global Search is instead populated.

In DataTable constructor I set:

  `stateDuration: -1, //-1 means session storage
  `stateSave: true,

and

    `initComplete: function () {
    `var r = $('#myTableId tfoot tr');
      `r.find('th').each(function(){
        `$(this).css('padding', 8);
      `});
      `$('#myTableId thead').append(r);
      `$('#search_0').css('text-align', 'center');

      `var api = this.api();

      `// Apply the search
      `api.columns().every(function() {
        `var that = this;       
        `$('input', this.footer()).on('keyup change', function() {
          `if (that.search() !== this.value) {
            `that.search(this.value).draw();
          `}
            `});
        `});
     `},

Could anyone help me figure out where I'm wrong?

Thanks in advance, Leonardo

colin · December 2019

This thread should help, it's asking the same thing.

Cheers,

Colin

LeonHardd · December 2019

Hi Colin!
Thanks for your reply!
It works correctly on page change/refresh and logout/login!
I report the code, in order to help someone else.

In DataTable constructor I set:

      stateDuration: -1, //-1 means session storage
      stateSave: true,  


initComplete: function () {
              var r = $('#myTableID tfoot tr');
              $('#myTableID thead').append(r); //move on top of the table
              r.find('th').each(function(){
              // Restore state
              var tableTMP = $('#myTableID').DataTable();
              var state = tableTMP.state.loaded();
              if ( state ) {
                tableTMP.columns().eq( 0 ).each( function ( colIdx ) {
                  var colSearch = state.columns[colIdx].search;       
                  if ( colSearch.search ) {
                    $( 'input', tableTMP.column( colIdx ).footer() ).val( colSearch.search );
                  }
                } );      
                tableTMP.draw();
              }    
           
              // Apply the search
              tableTMP.columns().eq( 0 ).each( function ( colIdx ) {
                  $( 'input', tableTMP.column( colIdx ).footer() ).on( 'keyup change', function () {
                      tableTMP
                          .column( colIdx )
                          .search( this.value )
                          .draw();
                  } );
              } );                      
         } )
        }, // end init

Unfortunately, it does not work when columns are swapped, i.e. when importing the file

<script type="text/javascript" src="assets/DataTables/ColReorder-1.5.2/js/dataTables.colReorder.min.js"></script>

since the search fields are written in their original order, but the columns position has been changed.

Is there a solution for this? Meantime I have disabled the swap option.

Thanks in advance, Leonardo.

colin · December 2019

You would use colReorder.order() or colReorder.transpose() to save the changed the order in the stateSave information with stateSaveParams, then you can fill in the input element accordingly on reload.

Colin

LeonHardd · December 2019

Hi Colin!
Thanks for your reply!
You are really very polite! Thank you!
It was very useful for me the transpose function for the restore state of the search input fields!

To apply the filter I used the code written here

https://datatables.net/extensions/colreorder/examples/initialisation/col_filter.html

I report my updated code, in order to help someone else.

        initComplete: function () {
              var r = $('#myTableId tfoot tr');
              $('#myTableId thead').append(r); //move search fields on top of the table
              // Restore state
              var tableTMP = $('#myTableId').DataTable();
              var state = tableTMP.state.loaded();
              if ( state ) {
                tableTMP.columns().eq( 0 ).each( function ( originalColIdx ) {
                  var colSearch = state.columns[originalColIdx].search;
                  var transposeColIdx = tableTMP.colReorder.transpose( originalColIdx, "toCurrent" );       
                  if ( colSearch.search ) {    
                    //write already existing words in input fields (search columns), using the transpose position
                    $( 'input', tableTMP.column( transposeColIdx ).footer() ).val( colSearch.search ); 
                  }
                } );      
                tableTMP.draw();
              }          
              
              // Apply the filter
              $("#myTableId thead input").on( 'keyup change', function () {
                  table
                      .column( $(this).parent().index()+':visible' )
                      .search( this.value )
                      .draw();
              } );                  
        }, // end init

Unfortunately, I noticed a small bug:
These are the steps to reproduce it.
1. Search on a column
2. hide the column
3. change page
4. back to page containing the table
5. show column
6. The filter does not work no more.
It does not seem to be related to

$(this).parent().index()+':visible'

instruction: although removed, i.e. using

$(this).parent().index()

The bug is however there.
To solve it, it is necessary to change again page (while the column in visible) and come back to page: now the filter works again!
Is there a better way to fix it?

kthorngren · December 2019

The filter does not work no more.

Does it filter but incorrectly or is there no changes, ie, the keyup/change event is not firing?

Maybe you can put together a simple test case showing the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

I've been discussing with another person search inputs with ColVis and stateSave in this thread. Maybe some of the ideas will help you.

Kevin

LeonHardd · January 2020

Hi Kevin,
thanks for your reply and sorry if I answer late.

I read the thread you indicated me, but unluckily I was not able to find a solution.
I have created a test case

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

The expression “The filter does not work no more.” means that the keyup/change event is not firing.

These are the steps to reproduce it.
1. Search on a column
2. hide the column
3. change page
4. back to page containing the table
5. show column
6. The filter does not work no more (i.e. the keyup/change event is not firing ).

I would also indicate a small bug:

the property of reordering columns also works by setting

colReorder: false

to avoid the reordering of the columns it is necessary not to import the relative file

<script type="text/javascript" src="assets/DataTables/ColReorder-1.5.2/js/dataTables.colReorder.min.js"></script>

Thanks in advance, Leonardo.

colin · January 2020

I couldn't reproduce the error, possibly because I wasn't sure what step 4 meant. It would be best if you just say what to click, so easier to follow.

to avoid the reordering of the columns it is necessary not to import the relative file

Yep, if you don't import the ColReorder file then it definitely won't be enabled. If the file is present, but colReorder is set to false or not present, again it won't be enabled - see here.

Colin

LeonHardd · January 2020

Hi Colin,
thanks for your reply!

There are two separate questions:

A] The columns reordering works, even setting

colReorder false

if, as indicated on the page

https://datatables.net/reference/option/dom#Plug-ins

the R plugin is inserted in the DOM.

I edited your example, this is the link

http://live.datatables.net/fotinesi/7/edit?js,output

It contains a DOM with R and another one without the R extensions.

I don't know if it can be called a bug, you have to see which of the two settings has a higher priority.

B] In order to make reproducible the detected error, I write in better detail the steps to follow in the test page

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

1) After searching on a column (for example, by searching for "soft" in the 'Position' column) and hiding it, you need to change the page (for example, by typing 'google.it' in the browser URL). Since session storage is enabled, the data will automatically be stored.

2) Now you need to press the back button of the browser, in order to return to my test page.
3) Make the 'Position' column visible again. The search field contains the word "soft", but writing in the search field, the search does not start (i.e. the keyup/change event is not firing ).
4) It is necessary to change the page again (going, for example, to google.it) and press the back button of the browser, so that the search on the 'Position' column works again.

I hope I have explained myself more clearly.
Thanks in advance for the time you are dedicating to me.

colin · January 2020

I don't know if it can be called a bug, you have to see which of the two settings has a higher priority.

Yep, you're still enabling in the dom so that would take priority.

I hope I have explained myself more clearly.

You did, thank you. You can also reproduce that by hiding the office column, press "Run with JS" again, and unhide the column.

The problem is that the event handler is being created in the initComplete function. This means that if the column isn't visible initially, then it won't get that handler.

The fix is to reset the handlers when the visibility changes - see here.

Colin

LeonHardd · January 2020

Hi Colin,
thanks for your reply!
It works perfectly, thank you very much!

I noticed a small imperfection, allow me to point out:

Localization .json files lack the key to translate the text of the 'Column visibility' button.

I have added in my Italian.json file

language: {"url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Italian.json"} ,

the block

"buttons": { 
        "colvis": "Colonne Visibili"
    }

It is probably also missing in other languages, but it is only a Cosmetic bug.

Thanks again and have a nice day!!

Individual column searching (text inputs) does not show input text after page changing

Individual column searching (text inputs) does not show input text after page changing

Answers

Howdy, Stranger!

Categories

DataTables

Individual column searching (text inputs) does not show input text after page changing

Individual column searching (text inputs) does not show input text after page changing

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables