Not able to do ajax.url().load() on multiple Tables

Not able to do ajax.url().load() on multiple Tables

jfrjfr Posts: 71Questions: 24Answers: 0

Hi Allan
I am having the same problem then question
20075
I am using the lates version of chrome, Firefox, safari, datatable, jquery and jqueryui
I use accordion and tabs
The first table in the first tab always work fine.
The second table in the second tab works only on my tablet or once in a while on my pc or laptop

I will send you the link if you want to have a look

Thanks in advance

Replies

  • jfrjfr Posts: 71Questions: 24Answers: 0

    Here is Allan solution
    I am using the dataTabes.scroller.js

        jQuery(function() {
            jQuery("#tabs").tabs({
                active: 0,
                activate: function( event, ui ) {
                    activeTab = ui.newPanel.selector;
                    if (ui.newPanel.selector == "#tab0") {
                        oTable1.columns.adjust().draw();
                        oTable1.scroller().measure();
                    }
                    if (ui.newPanel.selector == "#tab1") {
                        oTable2.columns.adjust().draw();
                        oTable2.scroller().measure();
                    }
                }
            })
        }); 
    

    But the best thing is the follwing link for pageresize
    http://datatables.net/blog/2015-04-10#How-it-works

    Thank Allan and Daniel Buchner.

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    To follow up for anyone else reading this, basically the problem is that when Scroller is activated it calculated the height of the table rows to it can perform its positional calculations. However, if you initialise it in a hidden element, then there is no height that can be calculated!

    I've replicated this in a little test case here:

    Note that the table appears to be empty (it does actually have data, as do your own, but because the row height is 0, you can't see it!).

    The fix is to have Scroller calculate the row height when the tab is made visible. The row height in Scroller can be recalculated through use of the scroller().measure() API method that Scroller adds to the DataTables API. My little test case shows the problem being resolved using that method here:

    For anyone interested in further options, I've recently come up with an idea for how this requirement to call an API method can be resolved. There are details on a recent blog post here:

    The only downside that I can see at the moment is that IE requires a solid background colour for the table using that method. Otherwise it paints a border around the table that simply cannot be removed...

    Allan

This discussion has been closed.