Zurb Foundation integration for DataTables

allan

Hello all,

As part of the on-going work to modularise DataTables (see http://datatables.net/development/roadmap ) and to enhance its ease of development, I've recently added integration files for Zurb's Foundation CSS framework ( http://foundation.zurb.com ). This is a fantastic CSS library, providing everything that is needed to build flexible sites. Now, by simply including the two DataTables integration files (one JS and one CSS), your DataTable will take on the same look and feel as the rest of your Foundation powered site.

I've put an example up here:
http://datatables.net/dev/foundation.html

And the integration files are here:
https://github.com/DataTables/Plugins/tree/master/integration/foundation

This is a work in progress, so please let me know if you have any feedback / suggestions for this, or encounter any issues.

With this, DataTables now provides direct integration support for:

- Bootstrap
- Foundation
- jQuery UI (currently embedded into DataTables core, but will be moved to a plug-in)
- Custom styling

If you have any suggestions for other styling frameworks, please do let me know, or fire up a pull request on the DataTables plug-in's repository.

Regards,
Allan

vzhernovoi

Allan, you are awesome!

I was just searching for a Foundation integration.

Thank you many times!

Wrey75

Great! I just finished to integrate Datatables with Zurb Foundation version 3...!

I will move to the next version...

:-) Thanks you again, your library is really amazing.

jlocashio

This seems to be having issues with Foundation4 if you are using Zepto instead of jQuery (which is the default framework for Foundation4 on non-IE browsers). This looks like a known issue ( http://www.datatables.net/forums/discussion/7680/examples-of-mobile-web-andor-html5-apps-with-datatables-on-mobile/p1 ), so if you are planning on using this with the latest Foundation, you will have to rely on jQuery for your JS functionality.

allan

DataTables is not compatible with Zepto, as Zepto provides only a limited subset of the jQuery API. I have looked at what would be required to provide Zepto compatibility in the past, but it would require a lot of changes as it doesn't support things such as deep object extending. So full Zepto integration is currently on on the cards.

Allan

camainc

Awesome, just what I was looking for! You guys are fantastic.

aprillwin

Hi All,

I'm Data Tables user. Now I using with Zurb foundation. After I integration with Zurb my page don't search, sorting, paging etc.. . Anybody can u guide to me. Thz.
P.S I using NuGet and install Data Table

allan

Link to a test case please!

Allan

aprillwin

sorry allan, I test on my pc.

allan

In which case we can't help since we have no idea what is wrong. Sorry.

bim

This is awesome, but clicking the pagination numbers won't trigger "page" event.
I got it fixed by adding
[code]
$(oSettings.oInstance).trigger('page', oSettings);
[/code]

To the bind('click') event. Around line 128:
[code]
.bind('click', function (e) {
e.preventDefault();
var pageNum = parseInt($('a', this).text(),10);
if ( ! isNaN(pageNum)) {
oSettings._iDisplayStart = (pageNum-1) * oPaging.iLength;
fnDraw( oSettings );
$(oSettings.oInstance).trigger('page', oSettings);
}
} );
[/code]

:)

allan

Doh! I think this is probably fixed by how paging have been changed in 1.10 (which is heading for beta...).

Allan

aswinramakrish

Even though this is a year late - Thanks a lot Allan!

juju64

great