Datatables implementation with Zurb Foundation

bikedorkseattle

Looking to see if anyone has done an implementation of Datatables with Foundation. Found the Bootstrap one which was awesome.

allan

Not as far as I am aware - however the techniques used in the Bootstrap integration should allow integration with other frameworks as well.

If you do create an integration layer between the two, I've got a Github repo for this kind of integration, if you would be willing to share it with the world: https://github.com/DataTables/Plugins/tree/master/integration (Bootstrap is the only one thus far, but others can be added!).

Allan

bikedorkseattle

I will absolutely add the integration to your repo! Thanks Allan you rock!

allan

Fantastic - give us a shout if you have any questions on the integration.

Allan

bikedorkseattle

I've got this working with the Zurb Foundation responsive tables plugin. Just have to test it a bit more and put a little polish on it.

http://www.zurb.com/playground/responsive-tables

bikedorkseattle

The only issue I'm having at the moment is the foundation implementation of drop-down is a bit cumbersome.

http://foundation.zurb.com/docs/forms.php

It appears I need to override _fnFeatureHtmlLength, but I'm not sure how to go about that as I'm a jQuery novice.

allan

There is currently no way of overriding it without changing the DataTables core. If you just want to change the format the the HTML you could use sLenthMenu , or if you want to add a Javascript event listener to the menu you could use fnInitComplete .

To replace it entirely you need to create a feature plug-in, as described here: http://datatables.net/blog/Creating_feature_plug-ins

Allan

bikedorkseattle

Long story short I've got everything working except for the drop down integration. Foundation has pretty drop downs but the use syntax that is making this a challenge.

The Foundation form syntax looks like this.
[code]
"oLanguage": {
"sLengthMenu": 'Dropdown Label'+
''+
' 10'+
' 20'+
' 30'+
''+
''+
' This is a dropdown'+
' '+
' '+
' 10'+
' 20'+
' 30'+
' '+
''
[/code]

Currently I am able to get DT to change the menu length, but there is a catch. When you click on a length, say 20, it returns results for the previous length selection. Doh.

In _fnFeatureHtmlLength I'm replacing:

[code]
$('select', nLength).bind( 'change.DT', function(e) {
var iVal = $(this).val();
[/code]

with

[code]
$('div.custom ul', nLength).bind( 'click' , function(){
var iVal = $('div.custom ul li.selected', nLength).text();
[/code]

I know the problem is that when I click and select the length option the selected class has not been applied to the clicked on list item. I've tried doing this many different ways but I end up with the same result.

Since I can't detect a select change I wanted to detect a change of class with the list item, but you can't do that. The work around is in the Foundation js I add a trigger to the addClass/deleteClass portion of their code. It actually appears there is a change trigger already. However, what isn't clear to me is whether a trigger like .trigger('cssClassChange') in Foundation will work in DT. When you create an event with trigger are they global?

allan

Given how different the markup is for the styled list, I would suggest not using the DataTables build in length changing list and the language option, but rather creating a feature plug-in which you can use to build the Zurb select and use the fnLengthChange API plug-in to change the paging length: http://datatables.net/plug-ins/api#fnLengthChange .

This is a blog post showing how feature plug-ins can be created: http://datatables.net/blog/Creating_feature_plug-ins

I suspect that this method will be a lot easier than shoehorning the built in method into doing something it wasn't really designed for :-)

Allan

bikedorkseattle

Allan, I'm sorry I wasn't clear enough and I think my code above made things confusing. I am planning on creating a plugin but was just using the stock code for fnFeatureHtmlLength as a template, and I wasn't planning on changing the menu length.

I actually have everything working, just not as a plugin, and since this is my first time doing something like this I'm having some difficulty knowing how to proceed in creating a plugin that overrides the stock function. Could you provide me with a little bit more direction. Do I want to do something like this?

$.extend( $.fn.dataTableExt._fnFeatureHtmlLength = function( oSettings ) {}

Thanks

edit: I've uploaded some of the files to github, still a work in progress.
https://github.com/entropytc/Foundation-Datatables

allan

> $.extend( $.fn.dataTableExt._fnFeatureHtmlLength = function( oSettings ) {}

Possibly, but I doubt it. I'm not entirely sure what you are trying to achieve there? Are you trying to overwrite the internal DataTales function? You can't do that I'm afraid - its a private method and can only be changed by actually changing the DataTables source code.

Allan

bikedorkseattle

The way I've written it now it's just replacing the core datatables function but I was hoping to write a plugin, but really don't have enough experience about how to go about that.

Just revisiting this, sounds like I need to look through some other people's plugins to figure out how to override that functionality.

allan

Hopefully creating a feature plug-in should be described in this blog post: http://datatables.net/blog/Creating_feature_plug-ins . If you have any questions about it, fire away and I'll see if I can clarify the article.

Allan

bikedorkseattle

Hi Allan, just revisiting this as I actually want to finish this and make it public. I understand the idea of creating a plugin but I don't understand how I go about overriding the functionality of the private _fnFeatureHtmlLength function.

bikedorkseattle

Could I override it like this?

$.fn.DataTable.prototype.constructor.ext.oApi._fnFeatureHtmlFilter = function () {}

allan

No - it is a hidden function rather than being a prototype. As I mentioned above, there is currently no way of overriding the internal methods in DataTables without modifying the source.

Allan

jsh

Hi,

Anything new on this side?
I would also be interrested in the integration between Zurb Foundation 3 and datatable. I could help testing and improving it.

Thanks.
Jerome

sn0rcha

Heyas,

I would also love to know how bikedorkseattle got on with this. I'm happy to help test and improve it.

Cheers,
Ben

jhkchan

Hi all,

I have implemented a complete integration based on bikedorkseattle's codebase. Please find it at https://github.com/jhkchan/Foundation-Datatables and hope it helps.

Cheers,
Jacky