JQuery-UI'ified the DataTable

bchic869

A colleague and I needed a JQuery grid for our company's internal web applications. After looking around for a bit, this grid's philosophy of progressive enhancement fit right in for what we were doing. The paging and real time searching are things we never would have implemented ourselves and are ecstatic to have.

This grid fit in to our philosophy and got us 70% of the way to where we wanted to go. There were a couple things it didn't have so we implemented them.

The first was support for actual JSON objects. Instead of one JSON object filled with arrays of data, it can take an array of JSON objects and each column is tied to a property of the data object. This is most useful when getting data via AJAX calls and serializing server side business objects. One drawback is that the server side paging doesn't work. Transformation of an already set up HTML table still works as intended.

[code]
var dataTable = $("#example").dataTable({
bProcessing: true,
sAjaxSource: '../Example/Ajax',
bAutoWidth: false,
aoColumns: [
{ sProperty: "CompanyName"
},
{ sProperty: "ContactName",
sWidth : "130px"
},
{ sProperty: "City",
sWidth : "130px"
},
{ sProperty: "Country",
sWidth : "130px"
},
{ sProperty: "Phone",
sWidth : "100px"
},
{ sProperty: "ID",
sWidth : "65px",
fnRender: function(obj) {
return "Details";
}
}
]
});
[/code]

Having our grid fit into the JQuery-UI theme and general look was the other feature we needed to add. The classes we changed the DataTables source to use come from the jquery-ui stylesheet.

Is this something the community would be interested in? I'd post links but we're not using it anywhere publicly and don't have an easy place to host it. I've got a self enclosed example zip file that people can check out.

Thanks, Brian

bchic869

Ok, so I found somewhere to host the image and examples zip file. Hope they can help.

http://dl.getdropbox.com/u/836561/dataTables/jquery-ui-datatables.jpg
http://dl.getdropbox.com/u/836561/dataTables/jquery-ui-datatable.zip

TomC

I did something similar over here: http://datatables.net/forums/comments.php?DiscussionID=515&page=1#Item_0
I felt comfortable using sDom to apply jQuery UI themes to everything except the pagination for which Allan recommended I write a plug-in. I'd at least be interested in seeing snippets of your class additions.

allan

Hi Brian,

Thanks very much indeed for posting your code! Adding support for jQuery UI's themes into DataTables is very much something I am actively looking at, so this will be a great help - thanks! I'm looking at integrating it in a manner which will present maximum flexibility, but also maintain backwards compatibility.

@TomC - could you possibly post what sDom you are using? It would be interesting to see what classes you have applied.

Regards,
Allan

TomC

[code]$('#example').dataTable({
"bAutoWidth":false,
"sDom": '<"fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lipf><"ui-widget ui-widget-content"rt>',
"sPaginationType": "themed"

});[/code]

I'm using jQuery's ui theme css and some of the code Filament Group wrote that will likely be in an upcoming release of jQuery UI. sDom provides enough markup control for me to do anything I want with css specificity alone. If I hadn't insisted on using the jQuery theme styles on the paginations buttons I could have duplicated the look with a custom style. The jQuery UI theme just needed more boxes to implement their icon buttons.

http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/

Result:
http://img195.yfrog.com/i/picture1uoa.png/

PS - If you see $j in my code that is the jQuery.noconflict alias I use to avoid collision with Prototypejs.

bchic869

The JSON changes we needed to make will probably impact overall backward compatibility. The styling modifications can probably be pulled out independent of the breaking changes however.

Thanks for the robust platform!

ssteinerX

Has anyone got the built-in support for themes working properly?

I just included the theme CSS (only, no other css) and set {bJQueryUI:true} as the only parameter to dataTable() and the sort graphics come out on a separate line in the header, and the search and # rows displays do the same thing:

http://tinypic.com/r/x2a0zb/5

[IMG]http://i40.tinypic.com/x2a0zb.png[/IMG]

TomC

You need to include some of the css in Allan's stylesheet. IT looks like you are missing some float:right instructions.
There is css file that Alan includes marked: demo_table_jui.css That has the definitions for jQuery style tables. it is pretty well commented.

ssteinerX

Thank you!

That fixed the table headers right up.

I'll go look through that css file.

I was working on getting as little "extra" stuff in as possible, I guess this helps put the line at where "essential" ends and "extra" begins...

Thanks!

S
aka/Steve Steiner
aka/ssteinerX