DataTables with FooTable plugin, failing to hide data in re-order
DataTables with FooTable plugin, failing to hide data in re-order
ComcarPete
Posts: 0Questions: 0Answers: 0
I'm using DataTables with FooTable to make my tables responsive. I've implemented the solution in a similar way to this blog:
http://techtoffee.blogspot.co.uk/2013/05/using-footable-to-make-datatable.html
It's all working fine but when I reorder my columns the FooTable initialisation doesn't always get called properly, and although my TH's get hidden on my phone, the TD cells will still appear.
Certain columns will fail every time, sometimes, I've not been able to work out what's causing the the FooTable plugin to fail to redraw.
If I use the DataTable filter to reduce the result set to only a few rows, it fails every time on every column.
I'm initialising my FooTable plugin in the fnDrawCallback function, and if I add a 2000ms delay before building FooTable, it works. All columns are hidden.
So it seems as though the fnDrawCallback is calling my FooTable initialisation before it's rendered the DOM, is that possible? Will fnDrawCallback run before the HTML has been injected?
I can't really link to the page I'm talking about as it's loading in a large amount of AJAX data, which for the same reason I can't put this in JSFiddle.
FooTable website: http://themergency.com/footable/
http://techtoffee.blogspot.co.uk/2013/05/using-footable-to-make-datatable.html
It's all working fine but when I reorder my columns the FooTable initialisation doesn't always get called properly, and although my TH's get hidden on my phone, the TD cells will still appear.
Certain columns will fail every time, sometimes, I've not been able to work out what's causing the the FooTable plugin to fail to redraw.
If I use the DataTable filter to reduce the result set to only a few rows, it fails every time on every column.
I'm initialising my FooTable plugin in the fnDrawCallback function, and if I add a 2000ms delay before building FooTable, it works. All columns are hidden.
So it seems as though the fnDrawCallback is calling my FooTable initialisation before it's rendered the DOM, is that possible? Will fnDrawCallback run before the HTML has been injected?
I can't really link to the page I'm talking about as it's loading in a large amount of AJAX data, which for the same reason I can't put this in JSFiddle.
FooTable website: http://themergency.com/footable/
This discussion has been closed.
Replies
[code]
// This (if) statement is here purely to make sure events aren't raised twice as mobile safari seems to do
if (!pinfo || ((pinfo && pinfo.width && pinfo.width != info.width) || (pinfo && pinfo.height && pinfo.height != info.height))) {
[/code]
It looks like there was code added to get around the table re-sizing multiple times. What I did was change the signature for the resize method to:
[code]
ft.resize = function (force) {
[/code]
Then changed the if statement to:
[code]
if (force || !pinfo || ((pinfo && pinfo.width && pinfo.width != info.width) || (pinfo && pinfo.height && pinfo.height != info.height))) {
[/code]
Then added in the following event binding:
[code]
$table.bind('footable_force_resize', function () {
ft.resize(true);
});
[/code]
On the data table side I simply have the following set for fnDrawCallback
[code]
"fnDrawCallback": function (oSettings) {
var table=$(".footable").footable();
table.trigger('footable_resize');
table.trigger("footable_force_resize");
}
[/code]
After doing this it seems to work the way I wanted it to. Definitely a bit of a hack, but it's a relatively easy solution to get things working correctly.
Let me know if it helps you at all...