Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Integrating DataTables with FooTable for responsive tables #139

Closed
oller opened this Issue · 2 comments

2 participants

@oller

Hello all,

As some of you may be aware FooTable has recently been developed over at: http://github.com/bradvin/FooTable . It's a very nice looking responsive table script. Which allows certain columns to be hidden at certain resolution breakpoints. This data is not lost though, it's moved to a hidden row, which is shown when the user expands the row.

Of all the responsive table scripts, I've found this is the closest in terms of integrating with datatables out of the box.

FooTable has been written with plugin extensibility, so I'm hoping if I've time I'll be able to work on this, but I'd like to share my thoughts if I'm unable to to.

On each draw of the datatable, you need to re-initialise footable:

$('.dataTable').dataTable( {
   ......
   "fnDrawCallback": function() {
        $('.dataTable').footable();
    }
});

The only problem I've found is cells moving all over the place when sorting a column using the datatables sort, once footable has hit a breakpoint and started hiding columns.

JSFiddle : http://jsfiddle.net/pxDb6/1/

The gist of the plugin I'd be looking to create would be to try and use the dataTables function fnSetColumnVis() on the fooTable breakpoint snapping event to hide the columns, so the sort should then behave.

http://www.datatables.net/release-datatables/examples/api/show_hide.html

How does that sound to you guys?

@DataTables
Owner

Sounds fantastic. I hadn't actually seen FooTable yet, but thanks for introducing me to it - it looks really useful!

A wrapper around DataTables that calls fnSetColumnVis sounds just about perfect to allow DataTables to work in a flexible use case such as this.

Interested to hear how you get on :-)

@DataTables
Owner

Going to close this issue for the moment - no changes required in DataTables.

Still interested to hear how this integration goes though, if anyone progresses with this!

@DataTables DataTables closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.