Creating beautiful and functional tables with DataTables

allan

Hello all,

In this latest blog post, I'm skipping over the API and options that DataTables presents, and focusing on how tables can be styled to make the attractive, and fit smoothly into your own site:

http://datatables.net/blog/Creating_beautiful_and_functional_tables_with_DataTables

If you come up with any colour schemes of your own, please drop a note in here, or feel free to discuss the article as you wish.

Enjoy :-)
Allan

tacman1123

Thanks, can't wait for 1.8 to come out! To polish this example a little more, can you show the best way to right-align the columns? Centering the student counts looks wrong.

And although unnecessary, since the article is about styling datatables, could you do something like adding a '%' to the percent columns, right-aligning, and making the negative numbers red? There are a couple of ways to do this, but some of those ways are definitely more elegant than others, so I very much appreciate "best practices" examples.

How stable is 1.8? Any idea what the timeline for release is?

Thanks again,

Tac

allan

Hi Tac,

Thanks for the feedback!

> '%' to the percent columns

This is just in the HTML of the table - so whatever is generating the table can output that. If needed you could use fnRender to modify the data string.

> right-aligning

td.rightClass { text-align: right }, and using sClass:"rightClass" would do it

> making the negative numbers red

I'd suggest using an fnRowCallback for this. I purposefully didn't want to include any Javascript beyond the basic init for this post, but these are some nice ideas, and I'll see about expanding on them for an new post in future which shows how this can be done.

> How stable is 1.8? Any idea what the timeline for release is?

Quite stable :-). Passing all unit tests, just a few things I want to tweak. Release should be this month.

Allan

tacman1123

> This is just in the HTML of the table - so whatever is generating the table can output that. If needed you could use fnRender to modify the data string.

Can you post an example using fnRender? Sure, modifying the HTML is easy, especially if the script is creating an HTML table. But most of our work is done making server-side calls to get the data, and I hate the idea of sending back formatted data in a big data structure. In addition to be being bigger, it can throw off sorting, and there's something unsettling about sending back a data table of HTML blobs.

The more common case we keep running into is turning a table cell into a link. So if I list a bunch of categories, clicking on the category then opens up the list of books (or whatever), clicking on the book title opens the detail page, clicking on the ## reviews opens up the reviews page, etc. While I could send back our server-side data with the tags inside, learning how to use all the callback functions is obviously a much more sophisticated and powerful approach.

Thanks!

Tac

allan

> But most of our work is done making server-side calls to get the data, and I hate the idea of sending back formatted data in a big data structure

Agreed! I dislike that at lot as well, and that's exactly why fnRender is available, particularly for creating links :-)

Docs: http://datatables.net/usage/columns#fnRender
Example: http://datatables.net/examples/advanced_init/column_render.html

Regards,
Allan

tacman1123

Great, thanks. Is it possible to access aData via something besides the column number? I hesitate to write code like

[code]
return oObj.aData[0] +' '+ oObj.aData[3];
[/code]

when I'd prefer to do something like this:

[code]
return sprintf("%s", oObj.aData['id'], oObj.aData['title']);
[/code]

(assuming, of course, that you have sprintf.js loaded). Obviously, the above won't work, but could you include a function that got the data via a TH id? So in the thead, you'd have Book Title, and then you could access it within a row as oObj.fnRowValue('title'). It would make it much easier to read the js, and not break it every time a column change was made. I guess you could also do oObj.aData[fnIdToIndex('title')], but it didn't read quite as nicely.

Not sure if any if this is possible, just brainstorming on how to make the js part of datatables easier to maintain.

Tac

allan

Yes indeed, this is now possible in 1.8 (currently in beta): http://datatables.net/blog/Extended_data_source_options_with_DataTables . With 1.8 you can send any abstract JS object you want to DataTables and tell which column to use what through the mDataProp property. Then in fnRender you get the original object you passed in for the data, thus allowing you do use object / array notation as you have above :-)

Allan

kmerkle

Allan,

I just discovered DataTables.net today and I'm very impressed. I noticed in your example in this blog entry (Creating beautiful and functional tables with DataTables ) that when sorting the columns, that even though the values were numeric, they sorted alphabetically. Is there a setting to allow you to specify the data type of the column so that it can be sorted correctly? I'm imagining having text, numeric, and dates and would hope that they would sort aphabetically, numerically, and chronologically.

Thanks!

Kurt

GregP

Haha, love how threads always get derailed on forums. ;-) Well, maybe not "love" but it's interesting.

I found the ThemeRoller capability to be really useful in creating a nice-looking DataTable. But it requires a bit of tweaking to get it just right (ThemeRoller doesn't include every single thing known to DataTables, such as :hover colors). The blog article was great for detailing every bit that you might need to style.

Cheers!

allan

@Kurt: Oops - thanks for picking up on that. the reason that this occurs in that table is that the numeric data is formatted with a thousands separator - e.g. '4,213'. DataTables won't automatically sort on that numerically since it's not actually a number - it's a formatted number (DataTables will automatically numerically sort unformatted numbers). So what is needed here is the formatted numbers sorting plug-in ( http://datatables.net/plug-ins/sorting#formatted_numbers ) to sort numerically. I'll add this to the table used in the blog when I get home :-)

@Greg: Thanks! good to hear that the post was useful.

Regards,
Allan

allan

@Kurt: Now done :-). Table sorts as would be expected.

Allan

citizenjkl

Hello:

This is a wonderful example!

Great job and thank you very much.

I am a new user of DataTables (using the 1.9.0 version) and I found that there are two issues that prevent the beautiful and functional table example from working. #1: When using Version 1.9.0 you will need the Wed 8th Feb 2012, 08:34 nightly build to get around a page number button issue. #2: The css needs updates referred to in the upgrade notes that instruct you to use A tags, rather than SPAN.

Hope this helps others.....

John

allan

Hi John,

Thanks for noting these points! I've made a note to myself to update the CSS in the demo and ensure that 1.9.1 is used with the demo when I release that.

Regards,
Allan

allan

Updates made :-).

Regards,
Allan

citizenjkl

Allan:

In the Scripting and Styling section, I think the reference to



is missing. I seem to remeber seeing this on an earlier version of the page.

John

allan

Hi John,

I think that link comes later on in the document - in the "Table styles" section (at the bottom of that section there is a link to the cell_styles.css file and a demo page that uses it).

Allan

citizenjkl

Guess I did not remember correctly...

My boss always says 'Users are Losers'.

Think that applies to me sometimes as well. ;-)

When I get a chance, I plan to run build the example again to make sure I completely understand what is happening.

Thanks for all of your great work!

John

arjun

Hi,

I am new to dataTables, so if the question is dumb i am very sorry. I was trying to replicate the things in the blog everything went on fine except the last step. I am unable to style the pagination buttons and the sort dosent turn up. i inspected the elements in the fire bug and saw that in the example table pagination classes get added to pagination buttons(example first), but in my table no class is getting added, should i do something extra or did i make any silly mistake. Can some one guide me i am stuck from last 2 hours.

Thanks a lot
P.S:- @allan dataTable is pretty wonderful, thanks for that

akmad

Hi to all. i want to query database into this. what should I do?
tnx in advance :-)