How are you using DataTables?

How are you using DataTables?

allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin
edited May 2009 in Free community support
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
«13456713

Replies

  • johnmcjohnmc Posts: 6Questions: 0Answers: 0
    Heck, I am a newbie I'll go first.

    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.
  • SellesSelles Posts: 32Questions: 0Answers: 0
    Hi Allan,

    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
  • LeCitadinLeCitadin Posts: 1Questions: 0Answers: 0
    Hi Allan,

    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
  • brilangbrilang Posts: 22Questions: 2Answers: 1
    I'm using DataTables on a custom-built CRM for various purposes. Basically everywhere I'm presenting a table to users, I'm starting to retro-fit a basic DataTables implementation.
  • verlagerverlager Posts: 18Questions: 3Answers: 0
    I am using DataTables in a chess website at http://communitychessclub.com/games-II.shtml
  • chrisesimpsonchrisesimpson Posts: 7Questions: 0Answers: 0
    edited May 2009
    I'm using asp.net (.net 3.5) to deliver json to an aspx page. This is the used as an ajax source. The data effectively collates news alerts and shows the last 100.

    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)
  • daamsiedaamsie Posts: 4Questions: 0Answers: 0
    edited May 2009
    We just started using Datatables in our wiki travel guide on Travellerspoint. It is used to display accommodation listings inside the articles. Without some sort of pagination, they would take over many of the articles, because there are so many. For an example, check out our London Travel Guide (http://www.travellerspoint.com/guide/London/).

    Thanks for a great plugin - it really does do exactly what I was looking for! :)
  • SellesSelles Posts: 32Questions: 0Answers: 0
    Hi Daamsie,

    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
  • daamsiedaamsie Posts: 4Questions: 0Answers: 0
    Hey Selles, thanks for the feedback. I've turned off the processing indicator. It's not really necessary for our relatively small tables.

    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.
  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin
    Hi All,

    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
  • bforchhammerbforchhammer Posts: 2Questions: 0Answers: 0
    edited May 2009
    We're using DataTables to display and filter product data: http://raychem.tycoelectronics.com/Product_Selector/

    (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 ;-)).
  • naspinskinaspinski Posts: 13Questions: 0Answers: 0
    I am using it at my new site http://whoowes.me and countless projects for the military over here in Iraq - has gotten awesome feedback by the way!
  • AsparagirlAsparagirl Posts: 4Questions: 0Answers: 0
    edited June 2009
    Hi Allan (and others),

    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. :-)
  • pradyumnapradyumna Posts: 5Questions: 0Answers: 0
    Hi Allan,

    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!!
  • jurgenfdjurgenfd Posts: 4Questions: 0Answers: 0
    We're using this as part of an NMR structure quality evaluation program CING (http://code.google.com/p/cing/) as in:

    http://nmr.cmbi.ru.nl/eNMRworkshop/data/R3/AR3436Piscataway/AR3436Piscataway.cing/AR3436Piscataway/HTML/Molecule/A/HISH21

    Thanks a bunch!
  • droartydroarty Posts: 6Questions: 0Answers: 0
    Allan,

    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.
  • ChristinaChristina Posts: 4Questions: 0Answers: 0
    Allan,

    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
  • Christian BonatoChristian Bonato Posts: 18Questions: 0Answers: 0
    edited August 2009
    Allan,


    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 !
  • benjashbenjash Posts: 13Questions: 0Answers: 0
    edited September 2009
    Hi, loving datatables.

    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
  • djohdjoh Posts: 23Questions: 0Answers: 0
    Hi,

    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 !
  • pmalvespmalves Posts: 18Questions: 0Answers: 0
    Using datatables (for a while now) as the rendering engine for the Community Dashboard Framework, a community project to build dashboards on Pentaho Business Intelligence Suite


    Screenshot here: http://www.webdetails.pt/images/samples/sample9.png
  • will.kleinwill.klein Posts: 1Questions: 0Answers: 0
    Hi Allan,
    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
  • korsakovkorsakov Posts: 15Questions: 0Answers: 0
    How can I disable the search box? Thanks!
  • raycistraycist Posts: 7Questions: 0Answers: 0
    Hi Allan,

    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
  • Ian_1Ian_1 Posts: 1Questions: 0Answers: 0
    Thank you very much for this really great piece of software!
    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)
  • rafis23rafis23 Posts: 6Questions: 0Answers: 0
    datatables is a godsend. i am using it in a hosted software product to display records of finance companies' assets, and to allow them to manipulate those records easily.

    -raf
  • Jens GutzeitJens Gutzeit Posts: 22Questions: 0Answers: 0
    We're currently developing a hosted application for visualisation and filtering of measured values captured from various industrial equipment on top of the grails framework with JQuery and JQuery-UI, powered by a MySQL Database. After loosing approximately 2 weeks with other table-solutions that wear not flexible enough to suite our customers needs (and my quality requirements in terms of clean and documented code, clean integratability of our own functions and last but not least performance) I finaly found datatables, merely by accident, though. After integrating it for doing some quick evaluation, I'd choosen to throw away the other table-engine and migrate to this one. 2 days passed, the table(s) works well, much faster than the old one and I finaly was able to integrate some of my wishes, the old system was not flexible enough, and too bloated, for.

    Putting this all together in a short sentence:
    DataTables is business ready (well, with a few small edges here and there)

    Thank you!
  • met00met00 Posts: 19Questions: 0Answers: 0
    Since you asked...

    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.
  • skhanzadaskhanzada Posts: 4Questions: 0Answers: 0
    Hi,

    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
  • toblakaitoblakai Posts: 5Questions: 0Answers: 0
    I have trouble getting jEditable and KeyTables to play well.

    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.
Sign In or Register to comment.