DataTables with jQuery Layout resizing recursion issue

SteveJ

I'm trying to use DataTables with jQuery Layout - http://layout.jquery-dev.net/. Layout has a plugin available that triggers a table redraw when the layout pane that the table is in is resized. This is a good. But, when the table is resized (i.e. when I switch from pages of 10 to pages of 25), the layout panel doesn't adjust by either resizing or adding a vertical scroll bar. I could trigger a resize of the layout pane with fnDrawCallback, but that creates an infinite recursion. Here's some of the relevant code:

[code]
myLayout = $('body').layout({
center__onresize: $.layout.callbacks.resizeDataTables
});
[/code]

Then the resizeDataTables callback looks like:

[code]
(function ($) {
$.layout.callbacks.resizeDataTables = function (x, ui) {
// may be called EITHER from layout-pane.onresize OR tabs.show
var oPane = ui.jquery ? ui[0] : ui.panel;
// cannot resize if the pane is currently closed or hidden
if ( !$(oPane).is(":visible") ) return;
// find all data tables inside this pane and resize them
$( $.fn.dataTable.fnTables(true) ).each(function (i, table) {
if ($.contains( oPane, table )) {
$(table).dataTable().fnAdjustColumnSizing();
}
});
};
})( jQuery );
[/code]

This part works great, and makes the table fit in the layout pane perfectly. But when I change the number of rows to display, causing the table to grow vertically beyond the bounds of the pane, no scroll bar appears. Layout needs to be told to redraw the pane since the content of it has changed. fnDrawCallback could be used to do that:

[code]
var oTable = $("#query1")
.dataTable({
...
"fnDrawCallback": function( oSettings ) {
myLayout.resizeAll();
},
...
[/code]

But, as I mentioned, this creates infinite recursion. How can I tell Layout to redraw itself in such a way that it doesn't then call the DataTable redraw, etc...?

Is there any type of recursion detection I can put into fnDrawCallback? i.e. a check to say "If I'm already in a fnDrawCallback, don't start another one"? I'm afraid my jquery-fu may not be strong enough to figure this out on my own.

Thanks!

-steve j

allan

> Is there any type of recursion detection I can put into fnDrawCallback?

There is no built in check, but you could attach a boolean flag to the settings object that would allow you to do that.

However, why can't you put the length change call into the resize function, next to your fnAdjustColumnSizing call?

Allan

SteveJ

Thanks Allan - It turns out I didn't really need the fnDrawCallback. Things were working the way they were supposed to. I think, though, that I ran into an issue with DataTables makeEditable which was causing the bad behavior. I've opened issue 130 - http://code.google.com/p/jquery-datatables-editable/issues/detail?id=130 - with that project, if you're interested.

Once I added the extra mentioned in the issue, resizing the table caused the layout to adjust appropriately.