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

LeonHarddLeonHardd Posts: 6Questions: 1Answers: 0

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

This question has accepted answers - jump to:

Answers

  • colincolin Posts: 7,698Questions: 0Answers: 1,297
    Answer ✓

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

    Cheers,

    Colin

  • LeonHarddLeonHardd Posts: 6Questions: 1Answers: 0

    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.

  • colincolin Posts: 7,698Questions: 0Answers: 1,297
    Answer ✓

    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

  • LeonHarddLeonHardd Posts: 6Questions: 1Answers: 0

    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?

  • kthorngrenkthorngren Posts: 7,761Questions: 25Answers: 1,726

    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

  • LeonHarddLeonHardd Posts: 6Questions: 1Answers: 0

    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.

  • colincolin Posts: 7,698Questions: 0Answers: 1,297

    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

  • LeonHarddLeonHardd Posts: 6Questions: 1Answers: 0

    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.

  • colincolin Posts: 7,698Questions: 0Answers: 1,297
    Answer ✓

    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

  • LeonHarddLeonHardd Posts: 6Questions: 1Answers: 0

    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!!

Sign In or Register to comment.