Responsive issue with clear search and savestate

Responsive issue with clear search and savestate

lenamtllenamtl Posts: 132Questions: 37Answers: 1

Hi,

I'm having an issue
I have a lot of columns let say 15
I'm using responsive
I'm using savestate
When using the main search let say I search for John
Then I go to another page and get back, the result is ok and still there
Now if I clear the search field
Then the columns are not well aligned they are a little bit outside the template
If refresh the page this is ok.

This occurred only if I quit and get back and clear the search value.
It does not occurred if I don't quit the page.

The only solution I have for now is to reload the page on clear search
but I'm wondering if someone have encounter this and have a solution for this.

Answers

  • kthorngrenkthorngren Posts: 4,342Questions: 19Answers: 947

    Hard to say exactly without seeing it but maybe one of these APIs will help; columns.adjust() or responsive.recalc().

    Kevin

  • lenamtllenamtl Posts: 132Questions: 37Answers: 1

    Hi,

    Thanks a lot

    As the problem occurred only when clearing the search field I endup with this:

        var table7 = $('#users-list').DataTable({..});
    
    
            table7.on('search.dt', function() {
                table7.columns.adjust();
                table7.responsive.recalc();
            });
    

    This is working fine

    Now I'm wondering if there is a way to do it for any datatables not only for a specific table because I have several table id on my page and if I can endup with a global fix that would be great.

  • lenamtllenamtl Posts: 132Questions: 37Answers: 1

    Is this possible to put it on the clear search action instead of on search?

  • lenamtllenamtl Posts: 132Questions: 37Answers: 1

    Well after several tests it's not working well on all my table.
    In fact applying this on some table display are worst.

    So at the moment the only fix is a page reload when clearing the search field,

  • colincolin Posts: 3,102Questions: 0Answers: 538

    Hi @lenamtl ,

    We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • lenamtllenamtl Posts: 132Questions: 37Answers: 1

    @colin I usually set a Jsfiddle but now this is not possible because my code is using PHP and MySQL and savestate from DB

    I just like to know if this is possible to attach an even when the search field get cleared. (Cleared manually or by using the X)

    So I can attach a page reload to this even.

    I cannot use this because it is for all events, not only for the clear event.
    table7.on('search.dt', function() {... });

    Thanks

  • lenamtllenamtl Posts: 132Questions: 37Answers: 1

    @colin

    Finally I can reproduce the problem with client side too
    http://jsfiddle.net/lenamtl/skzdeb6m/3/
    search for Jane
    click back button of your browser, then get back to Jsfiddle
    clear the search value
    Now the table is not displayed correctly

  • colincolin Posts: 3,102Questions: 0Answers: 538

    Hi @lenamtl ,

    Thanks for that fiddle. I tried it, but it's working fine for me - I cleared the search value and it was as expected. When you say "the table is not displayed correctly", what did you see that was wrong?

    Cheers,

    Colin

  • lenamtllenamtl Posts: 132Questions: 37Answers: 1
    edited November 21

    don't forget to quit the page and get back and clear the search otherwise the problem does not occurred

    Bad (this is the result when clearing the field)
    This is not resized correctly see the column are outside and scroll bar appear, this is no good

    Good this is what it should look TOOLS should be the latest visible item and table resized correctly

  • kthorngrenkthorngren Posts: 4,342Questions: 19Answers: 947

    It looks like you might not be loading all the correct Datatables Bootstrap integration files. I took your test case and simplified it here with Bootstrap:
    http://live.datatables.net/retogeni/1/edit

    It seems to work. I used the download Builder to generate the files needed. The following are needed:

    DataTables-1.10.18/css/dataTables.bootstrap.min.css < you have datatables.min.css instead
    Responsive-2.2.2/css/responsive.bootstrap.min.css
     
    DataTables-1.10.18/js/jquery.dataTables.min.js
    DataTables-1.10.18/js/dataTables.bootstrap.min.js  < looks like this file is missing
    Responsive-2.2.2/js/dataTables.responsive.min.js
    Responsive-2.2.2/js/responsive.bootstrap.min.js
    

    I might be misreading what you have but it looks like one is incorrect and one is missing.

    Kevin

  • lenamtllenamtl Posts: 132Questions: 37Answers: 1

    Hi,

    Yes my bald I took one of my existing JSfiddle without noticing the files ... as there are too many files ...

    I have took another JSfiddle projects and verify the files everything seems there
    and I still can reproduce the problem
    http://jsfiddle.net/lenamtl/nm5k1ro3/3/

    I'm not using the latest build and cannot update at the moment because the system is already validated and tested. So by changing the files this will require a whole set of complex tests. I'm allowed to make single patch at the moment.

    I have checked on changelog and didn't find anything about responsive issue...
    If there was I could just make a simple fix.
    https://cdn.datatables.net/releases.html
    I will verify again I may have missed it

    From the demo you have set I cannot see the resources link and their order..
    So maybe the problem is only the order of the file

    I'm using this
    jQuery 2.2.0
    Datatables 1.10.11
    Bootstrap 3.3.6

    Here is the order from my local project
    I just put the name to be easy to read this is the

    bootstrap.min.css   
    theme.css   
    dataTables.bootstrap.css
    responsive.bootstrap.css    
    buttons.bootstrap.css       
    colReorder.bootstrap.css
    select2.css
    
    jQuery-2.2.0.min.js
    jquery-ui.min.js
    bootstrap.min.js
    
    jquery.dataTables.js
    dataTables.bootstrap.min.js
    dataTables.responsive.min.js
    responsive.bootstrap.min.js
    
    dataTables.buttons.min.js
    buttons.bootstrap.min.js
    buttons.html5.min.js
    buttons.print.min.js
    jszip.min.js
    pdfmake.min.js
    vfs_fonts.js
    buttons.colVis.js
    
    dataTables.colReorder.min.js
    jquery.dataTables.yadcf.js
    
    file-size.js
    date-uk.js
    time.js
    date-euro.js
    

    *Note : using this seems to fix the problem on client side tables
    unfortunately this is not working on my server side table.

    table14.on('search.dt', function() {
                        table14.columns.adjust();
                        table14.responsive.recalc();
     });
    
  • kthorngrenkthorngren Posts: 4,342Questions: 19Answers: 947

    I can replicate the problem with my first example using DT 1.10.18 and Responsive 2.2.2:
    http://live.datatables.net/retogeni/1/edit

    Steps to recreate:
    - Search for jane
    - Click Run with JS button
    - Resize the Output panel until the active column just appears
    - Clear the search input
    - The table expands past where it should

    The problem seems to be that when searching if one of the responsive hidden columns becomes visible it is not considered when the search is cleared. The column becomes visible because there is no data in a coupe columns causing them to become smaller.

    Sounds like more fun for @allan .

    Kevin

  • lenamtllenamtl Posts: 132Questions: 37Answers: 1

    Hi,

    does using this as a temporary solution is making sense ?
    (till now it's seems to work on client side tables)

    table14.on('search.dt', function() {
                        table14.columns.adjust();
                        table14.responsive.recalc();
     });
    
  • allanallan Posts: 48,480Questions: 1Answers: 7,023 Site admin

    Yes. It shouldn't be needed, but that would be a valid workaround.

    Thanks for the research into this one Kevin!

    Allan

  • lenamtllenamtl Posts: 132Questions: 37Answers: 1
    edited December 6

    Hi @allan

    I'm having the same problem when using the pagination
    does using page.dt is the correct way to do it

    table14.on('page.dt', function() {
                        table14.columns.adjust();
                        table14.responsive.recalc();
     });
    
  • kthorngrenkthorngren Posts: 4,342Questions: 19Answers: 947

    I think you are asking for the page event?

    Kevin

Sign In or Register to comment.