I'm using DataTables on wiki-data.com (just perform a search to see it in action).
The process of getting to where I am now has been interesting, and Allan's help has been invaluable! The FixedHeader plugin came in very handy, which Allan wrote partly due to my nagging. :)
I wrote a plugin to let you drag columns around [1], and it was good to see how easy the framework was to extend.
Many thanks to Allan for his great work and continued improvements and support.
I have been using DataTables in 3 different projects the last 6 months. And it works great every time. Two of the projects just has small tables with less than hundred rows, so here I do everything in javascript. On the last project I have used it with up to 2000 rows, and here performance made me do things server side.
Thanks a lot for this peace of great software, a donation will be coming your way.
Just testing out datatables for an internal product sales and logging feature. Essentially we sell products online, and I am using DT's so our agents can pull up previous order histories/details.
So far it looks great, and in fact I will probably use it in a number of other places that I see a need for already.
I'm working on a project involving various tables holding sports team, event, and player information. We're moving from a heavily YUI-oriented interface to a jQuery one because...well it's awesome, and we need to find a suitable replacement for the very capable YUI Datatable.
After almost going with a tablesorter/tablesote-pagination/quicksearch combination, I found datatables a couple days ago. I plugged it into a couple tables and so far, it's great! Nice to have everything in one package.
I think I might have some suggestions/requests that I'll get around to posting soon
-jannon
I like the way you have the tree folders on the left and files on the right, been trying to come up with something like that. What did you use for getting the tree structure and linking it up with the right hand side? Is it all data table stuff?
Just a quick answer from me on this, since this isn't really the place to have a discussion about it (perhaps you could open a new thread if you want to consider it further - but it is a good question!) I would imagine josk is using a tree view plug-in for jQuery (or some other JS library) which, when clicked will populate a DataTable. DataTables only does table display, not tree view stuff etc - that would need a tree view library :-)
I just thought that I would add to this thread. I am using DataTables in a number of places in an application for a local walking group (part of the Ramblers Association, a charity in the UK).
It integrates really well and makes the application look very professional, Many thanks Allan
There is a link to one of the pages http://www.walkinggroup.org/H2030PlannerPage.PNG
Hi Allan,
I use DataTables 1.6.2 and it's really awesome. I tried the add-on TableTools, but the toolbar didn't show up.
Could you help me to see what's going on?
Here is the code:
I have been using datatables exclusively on several projects and can't say enough about it. I did a little write up on using datatables with WCF services:
I am a newbie in programming and want to develop a simple but professional and user friendly accounting application. Several open source libraries and classes are helping me enormously (though slowly as I am still climbing the learning curve). Datatables is one of them and an important one at that. Accounting is about reporting and tables, editing and filtering. For the user friendliness is where datatables comes in, e.g. the ajax-edit.
I selected DataTables from quite some options in this post:
where to me, and for my requirements, DataTables stood out from the crowd.
Before starting to ask questions I will first dive into this forum, documentation and JS and jQuery in general. I want to learn more on how to generate tables from server side and do some customisation on presentation.
Allan, thanks a lot so far for this impressive one man show.
we're using DataTables for http://www.topicmapsforge.org to represent a lot of statistics and data. At the moment we have approximately 6000 automatically generated tables, and the number keeps growing :)
We are using DataTables for our time tracking software LogMyTime Zeiterfassung - http://www.logmytime.de (currently only available in German).
We use it in the adminstration area to list all users, projects and clients of an account.
I really enjoyed using DataTables, my part was to style them with CSS and that was very easy thanks to the great instructions on the DataTables website.
I am happy to announce that the next site built with datatables just took off.
You can check the results at http://alert-grid.com
Idea of this website is to provide instant notifications for custom events in IT infrastructure and applications. To give some example:
You have some scheduled tasks (probably trigerred by cron) which does important stuff in your business (like sending invoices in application supporting invoicing). If this fails for some reasons - your company could have a headache with answering calls from angry clients, and maybe even worse things can happen.
You can secure yourself easily by integrating your scheduled task with AlertGrid. This will allow you to set up rules like "IF my_task haven't responded for X minutes, then send SMS/make phone call to responsible person". You can also send some parameter like NUMBER_OF_INVOICES and build rule around that, eg. "IF NUMBER_OF_INVOICES > threshold send information with suggestion to upgrade infrastructure".
Hope you'll like it:)
We use datatables with django - we send some time ago script how to integrate django with datatables to Allan and you can already find it on this site.
Here are some pages of AlertGrid:
http://alert-grid.com
http://twitter.com/alertgrid
http://www.facebook.com/pages/AlertGrid/112051298840278
The page uses
1) jquery UI layout (http://layout.jquery-dev.net/documentation.cfm)
2) jquery datatables
3) jquery.ui dialog, tabs and the datepicker on top of the dialog [this is a big deal because the datepicker has z-index problems when used in a dialog]
The client loves the system and the functionality. To quote him, "It's intuitive."
[and Allan, good to see you participating in the discussions in the jquery.ui @ pbworks. I really do hope that you can push some form of datatables as the table widget.]
One note: I had to move from async to sync calls in a for loop that I have that updates the second table when a change is made on the first. For example, when you delete a diagnostic it unlinks the 1-n questions that are associated to it. On the diagnostics table I delete the row, and a part of the ajax return from that call is a list of question id's that have been unlinked and have to be updated in the second table. I then call another ajax routine that visually unlinks the ids by getting the TR pointer to that id in the table (jquery selection of the row by id in a TD field), then calling the ajax routine that gets the new TR for that question to update the question table item. This second ajax call has to be made as a sync verse an async call since the pointer to the table row is reused in the loop.
Really great software!! ... but really poor developer (not Allan, but me) ;)
I travel a lot and I want to adapt datatables-keytables to edit my travelling data, in a fast-web-spreadsheet way to store them in a remote server.
By now I am done with part of it, but not the "fast" (keytables gets mad when you keep pressed arrow keys to move inside an edit table).
I am also finding pretty odd behaviour by now ... my code only works well in Internet Explorer 8-(
(it's the kind of comment I wouldn't ever expect to post anywhere; I hope I can edit this to delete it soon!)
If someone else is interested in fast-editing-spreadsheet usage, please enter and comment in this thread:
http://datatables.net/forums/comments.php?DiscussionID=1906
(link to my testing code there)
I'm using DataTables for our billing department to sort through tens of thousands of remittance files. I spent the last week hammering out the code to work with our current data. They love it.
I've implemented my application into SharePoint using a C# data class deployed to the web server GAC, SQL 2008, and generic handlers to handle requests from DataTables. Along with jQueryUI for some of the UI tools and row editing it's awesome. I was using Far Point Spread before this and it turned out to be a performance nightmare. We didn't need the full Excel functionality so after trying jqGrid, Ingrid and DataTables, I chose the obvious.
Thank you Allan for making this wonderfull tool. You' ve made my job easier. Expect a donation from me once I've finished the rest of this project. I'll share my code once I've polished everything. I hope it will help someone else.
We've just released a new version (2.0) of our danish online newsletter service (http://www.ubivox.com), where we integrated datatables heavily as a way of presenting a lot of our list data (recipients, newsletters and so on).
We also use it for our segmentation interface to preview the result (using server side processing) of the segmentation rules on a maillist. You can se a short example of this interface in this video at 2:37.
At this point we all really like datatables and the way it integrates, allthough it took os a couple of experiments to get an implementation going which was easy to reuse in the way we structure our scripts, both for server side processing and with DOM data.
I'll make sure a donation is heading your way as soon as the budget allows it, you deserve it.
first off i would like to say howdy, i am new to these forums and DataTables.
this is a great plugin for jquery, i am enjoying using it.
What am i using it for?
i am using it to present and manipulate data from a My Sql database, in use it in conjunction with ajax, jquery, tinyMCE, PHP, and Codeigniter Framework to present and edit data. have to say, great work on a excellent grid framework.
Allan! Great plugin! I've used datatables extensively to create and manage a fantasy sports draft application. There are several tables at once, and rows are moved from one table to the other.
See the results here:
http://fantasysportstools.net/drafttool
it is amazing! I have some questions about possible performance optimization, it runs smoothly on chrome, a little slower on firefox, and pretty much unusable for IE. However, i'll create a new post about it.
Hi, just thought I'd share how I am using custom sorting in my DataTables.
I just started using DataTables a couple of days ago. I have a table of concerts that have columns for date and venue. The date is formatted in Norwegian friendly format (e.g. 5. november 2010). JavaScript Date() of course doesn't understand this format, so I have to find a different way.
I have searched for some usages that might be used.
1) Use a hidden column with the date in Iso 8601 format (YYYY-MM-DD) http://datatables.net/forums/comments.php?DiscussionID=2467
2) Implement a custom sorting with regex parsing of the string client side http://datatables.net/forums/comments.php?DiscussionID=1952&page=1
However, I found both of these undesirable.
A better way would be having the sort value as an attribute on the td node. The innerHTML (or text child-node) of the td node will have the friendly formatted value, while my new atttribute will have the YYYY-MM-DD value. This is valid syntax in HTML5 with Custom Data Attributes. You just say that an element should have an attribute starting with "data-". A small but very useful feature in HTML5.
Here's my code.
PHP
[code]
echo "
$formattedDate
regular text to be sorted alpha here
numbers to be sorted numerical here
";
[/code]
JavaScript
[code]
/* Extension method for sorting a table column on a node's attribute */
$.fn.dataTableExt.afnSortData["Iso8601Date"] = function ( oSettings, iColumn )
{
var aData = [];
$( "td:eq("+iColumn+")", oSettings.oApi._fnGetTrNodes(oSettings) ).each(
function() {
var attributes = this.attributes;
var dataAttr = attributes["data-iso8601date"];
aData.push( dataAttr.value );
} );
return aData;
}
The function is customized to my Iso8601Date attribute now, but it should be simple to abstract it to any "data-" attribute.
I haven't searched the site and forums extensively so it might be that someone has done this before but I haven't found it. This could also possibly narrow the number of custom functions that need to be implemented? E.g. the
My code is based on the these examples:
http://www.datatables.net/plug-ins/sorting
http://www.datatables.net/examples/plug-ins/dom_sort.html
Live: http://www.drmowinckel.com/sanger.php?sang=22 (in Norwegian, the table is on the left side below album covers).
Thanks a lot, Allan, for this great & powerful script!
I'm using it for filtering of apartments in rent: http://www.arenda-lvov.com.ua/apartments/filtering.html. This site is in Russian, but you can use filtering at the last column with prices to see the correct work of the script. If you click on the table row, not on the link, you'll see the short info about object at the right side pane.
Also on this page I'm using the Google Maps API & jquery scroll plugin.
I am developing a plugin for DataTables in web2py web framework, this plugins puts together the features of web2py DAL to fetch database rows with dataTables JS Library.
Replies
The process of getting to where I am now has been interesting, and Allan's help has been invaluable! The FixedHeader plugin came in very handy, which Allan wrote partly due to my nagging. :)
I wrote a plugin to let you drag columns around [1], and it was good to see how easy the framework was to extend.
Many thanks to Allan for his great work and continued improvements and support.
J.
[1] http://datatables.net/forums/comments.php?DiscussionID=764
Thanks a lot for this peace of great software, a donation will be coming your way.
-gaute
I often have a column for `edit` and `delete` of a record.
http://dev.parameterz.com/avr
http://dev.parameterz.com/mvr
//edit
* just noticed that I posted this on *Valentine's Day*
;-)
So far it looks great, and in fact I will probably use it in a number of other places that I see a need for already.
I am looking forward to become a expert soon =]
-Peter
http://img263.imageshack.us/img263/7160/treedata.jpg
After almost going with a tablesorter/tablesote-pagination/quicksearch combination, I found datatables a couple days ago. I plugged it into a couple tables and so far, it's great! Nice to have everything in one package.
I think I might have some suggestions/requests that I'll get around to posting soon
-jannon
I like the way you have the tree folders on the left and files on the right, been trying to come up with something like that. What did you use for getting the tree structure and linking it up with the right hand side? Is it all data table stuff?
Cheers
Euan
Just a quick answer from me on this, since this isn't really the place to have a discussion about it (perhaps you could open a new thread if you want to consider it further - but it is a good question!) I would imagine josk is using a tree view plug-in for jQuery (or some other JS library) which, when clicked will populate a DataTable. DataTables only does table display, not tree view stuff etc - that would need a tree view library :-)
Allan
It integrates really well and makes the application look very professional, Many thanks Allan
There is a link to one of the pages http://www.walkinggroup.org/H2030PlannerPage.PNG
MBT M.Walk Shoes & MBT Shoes
MBT Athlete Shoes & MBT Footwear
MBT Chapa Shoes & MBT Shoes
MBT Lami Shoes & MBT Shoes
MBT Sport Shoes & MBT footwear
Women's MBT Tataga & on sale MBT shoes
MBT Shoes & MBT Footwear
MBT Footwear & MBT Walking
http://mbtshoeswalking.com MBT Shoes & MBT Footwear & MBT Walking
http://mbtshoeswalking.com/index.php?main_page=index&cPath=81
http://mbtshoeswalking.com/index.php?main_page=index&cPath=78
http://mbtshoeswalking.com/index.php?main_page=index&cPath=79
http://mbtshoeswalking.com/index.php?main_page=index&cPath=80
http://mbtshoeswalking.com/index.php?main_page=index&cPath=82
http://mbtshoeswalking.com/index.php?main_page=index&cPath=83
http://mbtshoeswalking.com/index.php?main_page=products_new
http://mbtshoeswalking.com/index.php?main_page=products_all
links:http://mbtshoeswalking.com MBT Shoes & MBT Footwear & MBT Walking
links:http://mbtshoeswalking.com/index.php?main_page=index&cPath=81
links:http://mbtshoeswalking.com/index.php?main_page=index&cPath=78
links:http://mbtshoeswalking.com/index.php?main_page=index&cPath=79
links:http://mbtshoeswalking.com/index.php?main_page=index&cPath=80
links:http://mbtshoeswalking.com/index.php?main_page=index&cPath=82
links:http://mbtshoeswalking.com/index.php?main_page=index&cPath=83
links:http://mbtshoeswalking.com/index.php?main_page=products_new
links:http://mbtshoeswalking.com/index.php?main_page=products_all
I use DataTables 1.6.2 and it's really awesome. I tried the add-on TableTools, but the toolbar didn't show up.
Could you help me to see what's going on?
Here is the code:
$(document).ready(function() {
oTable = $('#example').dataTable({
\"bJQueryUI\": true,
\"sPaginationType\": \"full_numbers\"
\"sSortColumn\": \"6\"
\"sDom\": 'T<\"clear\">lfrtip'
});
} );
Thanks Allan,
Tjie Siong
http://www.rantdriven.com/post/Using-Datatablesnet-JQuery-Plug-in-with-WCF-Services.aspx
I want to say thank you very much for all of your hard work!
-Jeff
I selected DataTables from quite some options in this post:
http://roberto.open-lab.com/2010/01/18/javascript-grid-editor-i-want-to-be-excel/
where to me, and for my requirements, DataTables stood out from the crowd.
Before starting to ask questions I will first dive into this forum, documentation and JS and jQuery in general. I want to learn more on how to generate tables from server side and do some customisation on presentation.
Allan, thanks a lot so far for this impressive one man show.
Timmo
we're using DataTables for http://www.topicmapsforge.org to represent a lot of statistics and data. At the moment we have approximately 6000 automatically generated tables, and the number keeps growing :)
With kind regards,
squig
We are using DataTables for our time tracking software LogMyTime Zeiterfassung - http://www.logmytime.de (currently only available in German).
We use it in the adminstration area to list all users, projects and clients of an account.
I really enjoyed using DataTables, my part was to style them with CSS and that was very easy thanks to the great instructions on the DataTables website.
Best regards,
Sandra
I am happy to announce that the next site built with datatables just took off.
You can check the results at http://alert-grid.com
Idea of this website is to provide instant notifications for custom events in IT infrastructure and applications. To give some example:
You have some scheduled tasks (probably trigerred by cron) which does important stuff in your business (like sending invoices in application supporting invoicing). If this fails for some reasons - your company could have a headache with answering calls from angry clients, and maybe even worse things can happen.
You can secure yourself easily by integrating your scheduled task with AlertGrid. This will allow you to set up rules like "IF my_task haven't responded for X minutes, then send SMS/make phone call to responsible person". You can also send some parameter like NUMBER_OF_INVOICES and build rule around that, eg. "IF NUMBER_OF_INVOICES > threshold send information with suggestion to upgrade infrastructure".
Hope you'll like it:)
We use datatables with django - we send some time ago script how to integrate django with datatables to Allan and you can already find it on this site.
Here are some pages of AlertGrid:
http://alert-grid.com
http://twitter.com/alertgrid
http://www.facebook.com/pages/AlertGrid/112051298840278
Best Regards,
Lukasz Dziedzia
http://www.wwinfo.com/images/admindesktop-datepicker.png
The page uses
1) jquery UI layout (http://layout.jquery-dev.net/documentation.cfm)
2) jquery datatables
3) jquery.ui dialog, tabs and the datepicker on top of the dialog [this is a big deal because the datepicker has z-index problems when used in a dialog]
The client loves the system and the functionality. To quote him, "It's intuitive."
[and Allan, good to see you participating in the discussions in the jquery.ui @ pbworks. I really do hope that you can push some form of datatables as the table widget.]
One note: I had to move from async to sync calls in a for loop that I have that updates the second table when a change is made on the first. For example, when you delete a diagnostic it unlinks the 1-n questions that are associated to it. On the diagnostics table I delete the row, and a part of the ajax return from that call is a list of question id's that have been unlinked and have to be updated in the second table. I then call another ajax routine that visually unlinks the ids by getting the TR pointer to that id in the table (jquery selection of the row by id in a TD field), then calling the ajax routine that gets the new TR for that question to update the question table item. This second ajax call has to be made as a sync verse an async call since the pointer to the table row is reused in the loop.
I travel a lot and I want to adapt datatables-keytables to edit my travelling data, in a fast-web-spreadsheet way to store them in a remote server.
By now I am done with part of it, but not the "fast" (keytables gets mad when you keep pressed arrow keys to move inside an edit table).
I am also finding pretty odd behaviour by now ... my code only works well in Internet Explorer 8-(
(it's the kind of comment I wouldn't ever expect to post anywhere; I hope I can edit this to delete it soon!)
If someone else is interested in fast-editing-spreadsheet usage, please enter and comment in this thread:
http://datatables.net/forums/comments.php?DiscussionID=1906
(link to my testing code there)
I've implemented my application into SharePoint using a C# data class deployed to the web server GAC, SQL 2008, and generic handlers to handle requests from DataTables. Along with jQueryUI for some of the UI tools and row editing it's awesome. I was using Far Point Spread before this and it turned out to be a performance nightmare. We didn't need the full Excel functionality so after trying jqGrid, Ingrid and DataTables, I chose the obvious.
Thank you Allan for making this wonderfull tool. You' ve made my job easier. Expect a donation from me once I've finished the rest of this project. I'll share my code once I've polished everything. I hope it will help someone else.
jB
We also use it for our segmentation interface to preview the result (using server side processing) of the segmentation rules on a maillist. You can se a short example of this interface in this video at 2:37.
https://www.ubivox.com/dk/showvideo.php?iframe=true&width=750&height=490
At this point we all really like datatables and the way it integrates, allthough it took os a couple of experiments to get an implementation going which was easy to reuse in the way we structure our scripts, both for server side processing and with DOM data.
I'll make sure a donation is heading your way as soon as the budget allows it, you deserve it.
Keep up the good work.
this is a great plugin for jquery, i am enjoying using it.
What am i using it for?
i am using it to present and manipulate data from a My Sql database, in use it in conjunction with ajax, jquery, tinyMCE, PHP, and Codeigniter Framework to present and edit data. have to say, great work on a excellent grid framework.
cheers and keep it up guys, like what your doing.
See the results here:
http://fantasysportstools.net/drafttool
it is amazing! I have some questions about possible performance optimization, it runs smoothly on chrome, a little slower on firefox, and pretty much unusable for IE. However, i'll create a new post about it.
Just want to say, this is awesome
I just started using DataTables a couple of days ago. I have a table of concerts that have columns for date and venue. The date is formatted in Norwegian friendly format (e.g. 5. november 2010). JavaScript Date() of course doesn't understand this format, so I have to find a different way.
I have searched for some usages that might be used.
1) Use a hidden column with the date in Iso 8601 format (YYYY-MM-DD) http://datatables.net/forums/comments.php?DiscussionID=2467
2) Implement a custom sorting with regex parsing of the string client side http://datatables.net/forums/comments.php?DiscussionID=1952&page=1
However, I found both of these undesirable.
A better way would be having the sort value as an attribute on the td node. The innerHTML (or text child-node) of the td node will have the friendly formatted value, while my new atttribute will have the YYYY-MM-DD value. This is valid syntax in HTML5 with Custom Data Attributes. You just say that an element should have an attribute starting with "data-". A small but very useful feature in HTML5.
Here's my code.
PHP
[code]
echo "
$formattedDate
regular text to be sorted alpha here
numbers to be sorted numerical here
";
[/code]
JavaScript
[code]
/* Extension method for sorting a table column on a node's attribute */
$.fn.dataTableExt.afnSortData["Iso8601Date"] = function ( oSettings, iColumn )
{
var aData = [];
$( "td:eq("+iColumn+")", oSettings.oApi._fnGetTrNodes(oSettings) ).each(
function() {
var attributes = this.attributes;
var dataAttr = attributes["data-iso8601date"];
aData.push( dataAttr.value );
} );
return aData;
}
$(function()
{
$('#concertTable').dataTable(
{
"aoColumns" :
[
{ "sSortDataType": "Iso8601Date" },
null,
null
]
});
});
[/code]
The function is customized to my Iso8601Date attribute now, but it should be simple to abstract it to any "data-" attribute.
I haven't searched the site and forums extensively so it might be that someone has done this before but I haven't found it. This could also possibly narrow the number of custom functions that need to be implemented? E.g. the
My code is based on the these examples:
http://www.datatables.net/plug-ins/sorting
http://www.datatables.net/examples/plug-ins/dom_sort.html
Live: http://www.drmowinckel.com/sanger.php?sang=22 (in Norwegian, the table is on the left side below album covers).
I'm using it for filtering of apartments in rent: http://www.arenda-lvov.com.ua/apartments/filtering.html. This site is in Russian, but you can use filtering at the last column with prices to see the correct work of the script. If you click on the table row, not on the link, you'll see the short info about object at the right side pane.
Also on this page I'm using the Google Maps API & jquery scroll plugin.
http://powertable.blouweb.com
http://web2py.com
Thank you for this great library!