Zurb Foundation integration for DataTables

Zurb Foundation integration for DataTables

allanallan Posts: 62,484Questions: 1Answers: 10,262 Site admin
edited March 2013 in Announcements
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:

And the integration files are here:

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.



  • vzhernovoivzhernovoi Posts: 1Questions: 0Answers: 0
    Allan, you are awesome!

    I was just searching for a Foundation integration.

    Thank you many times!
  • Wrey75Wrey75 Posts: 1Questions: 0Answers: 0
    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.
  • jlocashiojlocashio Posts: 3Questions: 0Answers: 0
    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.
  • allanallan Posts: 62,484Questions: 1Answers: 10,262 Site admin
    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.

  • camainccamainc Posts: 19Questions: 3Answers: 0
    Awesome, just what I was looking for! You guys are fantastic.
  • aprillwinaprillwin Posts: 2Questions: 0Answers: 0
    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
  • allanallan Posts: 62,484Questions: 1Answers: 10,262 Site admin
    Link to a test case please!

  • aprillwinaprillwin Posts: 2Questions: 0Answers: 0
    edited September 2013
    sorry allan, I test on my pc.
  • allanallan Posts: 62,484Questions: 1Answers: 10,262 Site admin
    In which case we can't help since we have no idea what is wrong. Sorry.
  • bimbim Posts: 1Questions: 0Answers: 0
    This is awesome, but clicking the pagination numbers won't trigger "page" event.
    I got it fixed by adding
    $(oSettings.oInstance).trigger('page', oSettings);

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

  • allanallan Posts: 62,484Questions: 1Answers: 10,262 Site admin
    Doh! I think this is probably fixed by how paging have been changed in 1.10 (which is heading for beta...).

  • aswinramakrishaswinramakrish Posts: 1Questions: 0Answers: 0
    Even though this is a year late - Thanks a lot Allan!
  • juju64juju64 Posts: 1Questions: 0Answers: 0
    edited September 2014


This discussion has been closed.