How are you using DataTables?
How are you using DataTables?
allan
Posts: 63,676Questions: 1Answers: 10,497 Site admin
Hello all,
I thought it might be interesting for people to share how they are making use of DataTables (thanks for the idea Wim). Eventually I'll put together a gallery page on the site (sometime after 1.5's unit tests are complete) but for now, perhaps you would like to share links to examples of where you are using DataTables (or screenshots if you prefer). If you can't host the screenshots, drop me a message ( www.datatables.net/contact ) and I'll put them up here.
It would be great to see how DataTables is being used, and perhaps we can all share ideas for future deployments and the core development of DataTables going forwards.
Regards,
Allan
I thought it might be interesting for people to share how they are making use of DataTables (thanks for the idea Wim). Eventually I'll put together a gallery page on the site (sometime after 1.5's unit tests are complete) but for now, perhaps you would like to share links to examples of where you are using DataTables (or screenshots if you prefer). If you can't host the screenshots, drop me a message ( www.datatables.net/contact ) and I'll put them up here.
It would be great to see how DataTables is being used, and perhaps we can all share ideas for future deployments and the core development of DataTables going forwards.
Regards,
Allan
Replies
Catalogs/pricebook:
Sales staff in most cases do not need the fancy web-like catalogs the consumers need. All they want is description, SKU, unit qty and unit pricing. Its data that does not change that much.
So rather than have a multitude of hits from staff on the servers for pricing a page is formatted to the dataTable specification. Staff is provided that page template, the .js file, and a modified .css file as a zip. A JSON file is provided as needed for updates emailed to them. The user only has to copy the JSON file in the same directory they have the other files.
We have trialed it with 5 staff and they love not having to be tethered to the network to develop a preliminary estimate for customers.
Here are some screen shots of how I use dataTables.
I'm also a newbie to Javascript and JQUERY. I found this plug-in and used it in my on-line file-explorer. The explorer isn't finished yet, so don't look at the lay-out ;-)
http://www.familieselles.nl/usage_of_dataTables.gif
Usage:
When a user clicks on the plusimage or double clicks on the folder in the tree, the right part is being updated, see image. Then a processDIV is shown by using this code (tnx Allan):
[code]
$("#folder_file").dataTable({
"iDefaultSortIndex": 0,
"fnInitComplete": function() { $('#processing_right').hide();}
});
[/code]
and the processDIV is hidden when all is loaded.
I also use a processDIV when a user sorts a table, see image.
I use dataTables in combination with liveQuery to add the contextmenu to the rows, but I need to find out how to disable liveQuery and make the contextmenu work without it. That's very hard for a newbie ;-).
If people like to help, feel free, you can reach me at: wimDOTsellesATfouroaksDOTnl
At last I want to say that this is a great plug-in developed by a dedicated person called Allan. He always answers forum questions as fast as hell. So compliments to Allan !!!!!!!!!!
Greetings,
Wim
First, let me tell you that after looking at the code of your DataTables library, I have decided to pick this one over the others that I have reviewed in the past weeks. It is simple and most of all, it is documented which is pretty hard to find these days in the open source javascript community, for what I know anyway.
I intend to use DataTables for my .Net MVC project which will be a framework for transactional web sites. I might add some functionalities to the grid if needed and I'll make sure to keep you inform if I feel it could be useful for others.
Thanks again for your great work!
Pierre Boucher
The grid is only loaded when the tab it resides on is clicked on which saves effort. Navigating away and back to the tab reloads the data.
My js code is as so:
[code]
//keep a note of our datatable
var oTable;
$(document).ready(function() {
var table_initialised = false;
$("#tabs").tabs();
//bind the loading of the table to the tab select event so that we don't waste time and database effort
$('#tabs').bind('tabsselect', function(event, ui) {
if (ui.index == 1) {
if (table_initialised == false) {
//build the table from scratch
table_initialised = true;
oTable = $('#alerts').dataTable({
"aaSorting": [[0, 'desc']],
"bAutoWidth": false,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "alerts.json.aspx"
});
} else {
//redraw the table
oTable.fnDraw();
}
};
});
})
[/code]
What I need to do now is notify the user that something is happening when it loads and bind any error events to a function which can handle them gracefully.
Cheers for the great plug in
Chris
* Edited by Allan to add syntax highlighting (22-05-09)
Thanks for a great plugin - it really does do exactly what I was looking for! :)
Nice to see how you use it, but I think you have a little bug in your page with the dataTable. When I click on sort the 2nd column the processing div shows, but when it is ready, it doesn't go away.
Testen with IE7.
Greetings
Wim
Actually, I think there is an inaccuracy in the documentation (or a difference between versions). It says the default is for the processing indicator to be off. However, I hadn't turned it on and it was showing. Now I've manually set it to false to make it disappear. Initially it wasn't showing, but then we upgraded to the latest version of datatables to fix a nasty IE bug. Since then it started showing.
Thank you very much for your posts - it is really very interesting to see how DataTables is being used in action! Please keep them coming!
@daamsie and Wim: I've spun the conversation about bProcessing off into a separate thread so as to keep this thread on course. You can see the discussion here: http://datatables.net/forums/comments.php?DiscussionID=266
Regards,
Allan
(Still on DataTables version 1.4.2 though; it brakes with 1.4.3 and we haven't had the time to figure out why and make it all work ;-)).
I'm using DataTables on a genealogy website, to display information about certain old records and maps that are held in a library in Ukraine:
http://www.jewishgen.org/galicia/cadastral_maps_and_landowners_project/records.php
I'm going to be using DataTables a lot more in the coming months, to turn various .XLS/.CSV files into searchable database-like presentations for the web (without actually turning them into mySQL databases unless it's really needed). So, your plugin will be helping researchers and genealogists search through old vital record data from the former Austro-Hungarian Empire.
** Support question moved to http://datatables.net/forums/comments.php?DiscussionID=332 (by Allan)
Thanks. :-)
I am using Data tables for displaying aggregated information from different databases and I am rendering almost 10000 rows. The Django based application is not still complete. So, I can not post links/screen-shots.
One thing, I would like to mention specially - you have provided a clean documentation with examples, which, I feel is not common in open source! It has made the usage very easy. This is as good as Django framework!
Once again thumps up!!
http://nmr.cmbi.ru.nl/eNMRworkshop/data/R3/AR3436Piscataway/AR3436Piscataway.cing/AR3436Piscataway/HTML/Molecule/A/HISH21
Thanks a bunch!
I am writing a lot of data reporting/analysis/dashboard stuff. So I have wrapped your tool with a general browser side data management tool. The idea is that I send a JSON object full of data to the browser (two dimensional at this point). Then I create divs with configuration data of what I want to display. So far I can configure some very simple sql statements to filter and/or groupby the data into a new dataset; I can display the raw data or the filtered data as a table, configuring it per your parameter structure; I can make a chart using another jquery tool, Open Flash Chart, with a combination of your parameter structure and Open Flash Chart's; and lastly I can make a JMap with pins that vary in size, shape and color based on data in the dataset.
It has been loads of fun doing this and I have learned a lot looking through your code. I hope to have time this fall to straighten out my spaghetti, and move it to a public site. The pipe dream is that Version 2 will include a gui to configure the presentation in the browser and then save the whole thing back to the server as a report.
Thanks for this great tool and documentation.
I'm working on a web application for the treatment of children with mental health issues. Your table plugin was exactly what I needed to create an interactive "Table of Contents", where psychologists can quickly sort and filter various data to find the information they need.
Thank you!
Christina
I use dataTables for a simple messaging system, using PHP/MySQL.
I'm getting the the messages data upon page loading, I don't really need real-time updating. Maybe in the future I'll use AJAX. That said, because it's a dynamically created table, I use aaData, as in :
http://datatables.net/examples/example_dynamic_creation.html
I create dynamically all the tables (Inbox, Sent, Archived) and then place them in divs called by the tabs, which are built upon JQuery's UI scripts. The cookie will be perfect for preserving the state of each tab's (table's) content.
Here's a screenshot :
http://bonatoc.free.fr/jquery_dataTables_screenshot.png
Once again, Bravo Allan !
I have create a slider listing database using datatables, Jquery slider ui and the range finder plugin. WOrking alongside country and type filters
Plus with the scrolling pagination plugin!
http://www.wearehome.com/fractional-ownership-slider.php
edit - Linky change sorry
Also totally in love with Datatables, trying to pass the message to every develops website.
I'm using Datatables for my company's intranet. 50% of the pages are registers, with 500 to 5000 entries depending on the subject. I'm using mysql, the also-great TableTools plugin, jEditable to update fields.
When you have a lot of data to display, datatable is just perfect. Whatever the data is !
(remove the "x" at the end of the previous post's link to see benjash's example. Nice one !)
Thanks a lot !
Screenshot here: http://www.webdetails.pt/images/samples/sample9.png
Thanks for an excellent plug-in! You've provided excellent support in these forums, very comprehensive documentation, and some very robust features.
I'm using DataTables with a couple proprietary web apps. In both cases they provide summary/list views that the user clicks on to access the details. I am especially thankful for the filter feature... this is a valuable extra that my users love.
I've done a couple customizations of my own, I will try to find time to formalize them and send to you. One is a scrolling table, something discussed elsewhere on the forums. I accomplished this via a DataTables pagination plug-in... I wasn't sure of an easier way to hook into table updates, especially when filtering occurs. I've written a couple custom sorting functions with the help of your posted examples. May I add that "Numbers with HTML" may deserve to be part of DataTables' core. I might also have a couple examples to contribute for using advanced options in certain combinations.
Thanks!
Will
I'm a newbie in js and jquery and I was able to create a decent UI using your work.
I'm using DataTables for an internal webapp for a client. It has to be able to sort 2000+ rows quickly, works in IE 6/7, have an individual column search capability and an export to csv capability. Seems like your work is more than sufficient for doing all these requirement.
Thank you very much!
- Ray
My usage: in gameserver management web application, this specific example featuring: showing 5775 database records on one page, 9 Data Tables instances, ajax loading of data, onclick events for rows, custom date format sorting etc
http://www.hajtek-studio.com/dtex/
(click on red flags to see the actual data tables)
-raf
Putting this all together in a short sentence:
DataTables is business ready (well, with a few small edges here and there)
Thank you!
My initial use was for a client who needed a tool that would allow them to "market" to their customer base. This allows them to list all past and current customers, select who they want to to send an e-mail to from the list (sorted or reduced) and then use ckeditor to create the e-mail and send it to the selected list from the datatable.
Since I am a contributor to OSCommerce, I am also using the datatables in a series of upgrades and contributions that will be released on the open source osCMax [www.oscmax.com] product (some will be contributed to the standard osc site as well). These include a total rewrite of the admin categories.php portion (osCMax) to full jquery as well as porting a version of the contact management utility (osc and osCMax).
One key reason I selected datatables is that I use jquery.ui and the ability to cleanly integrate into themeroller was a key decision point.
I am using datatables from more then an year now. Its been a very good experience using this utility. I started with 1.4 to display the call detail records (CDRs) and other information in my Telecom application. But it takes significant amount of time when there are records in thousands so recently i am moving to 1.5 because of the server side pagination support.
Shoaib
On pushing enter, it allows you to edit, but the actual arrow keys still stay active, which then allows you to also enter another field.
My code:
[code]
var oTable;
$(document).ready( function () {
var oTable;
/* Init DataTables */
oTable = $('#example').dataTable();
/* TableToolsInit.sSwfPath = "dataTables-1.6/media/swf/ZeroClipboard.swf"; */
/* Apply the jEditable handlers to the table */
$('#example tbody td').editable( 'catch_data', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"submitdata": function ( value, settings ) {
return { "row_id": this.parentNode.getAttribute('id') };
},
"height": "14px"
} );
/* Map KeyTable reference */
var keys = new KeyTable( {
"table": document.getElementById('example')
} );
/* Apply a return key event to each cell in the table */
keys.event.action( null, null, function (nCell) {
/* Block KeyTable from performing any events while jEditable is in edit mode */
keys.block = true;
/* Initialise the Editable instance for this table */
$(nCell).editable( function (sVal) {
/* Submit function (local only) - unblock KeyTable */
keys.block = false;
return sVal;
}, {
"onblur": 'submit',
"onreset": function(){
/* Unblock KeyTable, but only after this 'esc' key event has finished. Otherwise
* it will 'esc' KeyTable as well
*/
setTimeout( function () {keys.block = false;}, 0);
}
} );
/* Dispatch click event to go into edit mode - Saf 4 needs a timeout... */
setTimeout( function () { $(nCell).click(); }, 0 );
} );
/* You might need to set the sSwfPath! Something like:
*/
} );
Name
Login name
Email
Created at
Moises
clare82
chauncey@hane.uk
2010-01-28 11:43:55 UTC
Emil
beau37
robyn.mante@dicki.ca
2010-01-28 11:43:55 UTC
Marco
malvina93
teagan@padberg.name
2010-01-28 11:43:56 UTC
etc[/code]
Any help appreciated.