Creating beautiful and functional tables with DataTables
Creating beautiful and functional tables with DataTables
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
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
This discussion has been closed.
Replies
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
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
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
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
[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
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
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!
@Greg: Thanks! good to hear that the post was useful.
Regards,
Allan
Allan
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
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
Regards,
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
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
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
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
tnx in advance :-)