I'm just starting out in web development... I've been developing for a few years, mostly thick client / proprietary type stuff.
I've been getting into web development slowly and stumbled upon this component, since I figure a good data grid is 1 of the most crucial elements, I thought I'd try wrap my head around the dataTable.
I'm using PHP pages to return html tables which are appended for display.
This is an amazing datatable ready to use plugin. I am using the datatables for displaying data in a table format inside an in-house HR application. Initially I started out with creating tables using javascript, & I stumbled on this plugin. This has a variety of easily customizable options.
Hi. Datatables is a fantastic plugin. Thank you for your great contribution to the developer community. I use datatables to display and edit tabular data with ASP.NET MVC. I have also combined datatables with the responsive jQuery plugin Footable, to allow datatables to be used for development of web applications running on mobile platforms(phones/tablets). I've published some tutorials showing how i use datatables at the following urls :
jQuery DataTables with ASP.NET MVC (Server-Side Sorting, Filtering and Paging) :
http://techtoffee.blogspot.com/2013/04/jquery-datatables-with-aspnet-mvc.html
jQuery DataTables with ASP.NET MVC (Row Detail via AJAX) :
http://techtoffee.blogspot.com/2013/05/jquery-datatables-with-aspnet-mvc-row.html
Using FooTable to make Datatable Responsive :
http://techtoffee.blogspot.com/2013/05/using-footable-to-make-datatable.html
I'm using DataTables as part of my online radio station. Users can search the playlist, make requests, add songs to their favorites list, etc. I'm just a hobbiest and do not do web development professionally so I'm pretty much flying by the seat of my pants. I just signed up here because I have an unusual character encoding problem I'll ask about separately.
The site is http://armitunes.com - You can see DataTables in action in the "Request Song" page under the "Radio Controls" drop down menu, or in your Favorites list if you register for an account.
I use DataTables in every backend / dashboard project and love the quick javascript functionality for tables with a smaller number of rows, and the JSON/PHP integration for large tables.
My latest project is a full fletch multi-firm multi-currency accounting system.
Thanks for great piece of work, awesome documentation and brilliant support!
Martin
I'm using datatables quite a lot in my own webserver/webframework (wrote a complete webserver in Perl...). While the main use case is an in-house project, you can see a (small) bit of what i'm doing if you sign up to https://www.cavac.at
(The big project i'm working on has 50+ forms with DataTables).
I'm using DataTables with preloaded Data for most webforms, as well as loading data from Ajax for things like searching through "logfiles" (which are actually database tables).
We use datatables all over the place in our applications. It is by far the best javascript-based grid that I have ever found. It is a pleasure to use, it is super-fast, and light on the download to boot.
We use a lot of variations, from full-fledged sortable, filterable, pageable, grids, to simple grids to display small sets of data with no headers or footers, sorting, etc.
Excellent tool, and if they gave out Oscars for Best Supporting Tools, I'd vote for this one.
I've migrated to DataTools from TableSorter and found it to be a significant improvement!! It's a superb plugin that is incredibly well built, and has built in support for almost every imaginable need. Support has been excellent from Allan too.
My implementation is a public website providing access to thousands of Expired / Dropping & PreRelease auction domains - I tried to create a novel approach to managing large volumes of data, so please feel free to check it out and provide any feedback. As this is predominantly an academic / free time exercise the .js source code on the site is not obfuscated,
I'm working for a company and I am using it in a jQuery table plugin.
I did a comparison between many tables scripts before making the move.
While it's maybe not the easiest plugin to setup in my opinion, it gets everything I want done.
I have now a custom table plugin that is using datatables couting more than 2 000 lines.
What it does is optimizing setup (easier to configure, and really clean to write) for online/offline data modes, adding top menus and inline menus (with a link to selected rows), managing data within the row, assigning shortcuts to menus and actions (next/prev row...), auto next/prev page handling, selected rows handling, grouping callbacks unifying, and more.
It's great to work with datatables, it's harder to work with its plugins.
We are using DataTables to revamp our store search system. Previously we used a postback to the server to search the database, which then returned stores that were similar to what you searched (no wildcards, only searched name, was clunky).
With DataTables, we are able to render the data much quicker for the end user (thanks pagination!) and supply the user with more information, wildcards, and links to all relevant pages! Really, this plugin is amazing =)
Here is a link to what it looks like so far: http://imgur.com/HMWjuP2
We haven't deployed it yet, as we are doing some final touches!
I'm nearing the end of project using Datatables (and Editor) and I just wanted to say thanks to Allan and everybody else involved (especially in the forum) for providing a great tool.
It's not perfect and I've lost count of the number of times I found myself banging my head against the desk trying to solve various problems. But at the time I planned the project it was the best PHP CRUD I could find for the budget that could handle relational data.
I housed Datatables Editor with the Bonfire library for CodeIgntier. Bonfire gave the project a HMVC structure and a bunch of goodies including a barebones CMS with a login system. Editor gave the project a CRUD that was much better than, say, GroceryCRUD.
Fitting Editor with CodeIgniter didn't go as neatly as I wanted, so I ended up making the AjaxURL connect to the MySQL independently of CodeIgniter. Not neat I realise but while I could find a way of integrating Datatables I couldn't find a way of integrating Editor quickly. Looking back now a few ideas are springing to mind about how to do it.
The next big problem I found was with relational data. The Join function was a key reason I chose to use Editor/Datables. However, its limitation was that I was forced to use link tables whenever I wanted the CRUD talking to multiple related tables. So the more complicated joins were left to MySQL views and queries run by CodeIgniter. This also created 'fun' when trying to show data from Views with Datatables and Editor.
If I were to give one piece of advice to anybody wanting to use Datatables beyond the basics it would be learn Javascript better.
I found many interesting usage of DataTables, make me use and explore it more..
But due my poor current knowledge of javascript and jquery, I still develop my current admin site to jquery, to convert it to jquery and DataTables. (It still use a standard php and html now)
I found some solution here in this forum, and still have some problem understanding how to use and setting DataTables for advance use (in my case).
This is just my first post and I will post some questions here..
Hello Allan and all,
http://abctrips.com/ uses datatables to display search results - enter any town into the transport search interface, such as Hamburg to Berlin and submit the form - the page then loads search results via ajax and as soon as search completed with all engines connected the page then displays the results in datatables. For sorting and filtering the setup makes use of a lot of adapted examples (and a bit of workarounds as filtering wasn't readily available on all form element types); plus there are some stunts such as populating the list of checkboxes while search results are loaded. See the non-compressed js at: http://abctrips.com/assets/datatables_setup.js
Thanks for datatables, Allan!
Best,
r.
I'm working on web portal for data for the Genotype Tissue Expression (GTEx) project. This is a project funded by the National Institute of Health and National Human Genome Research Institute. The GTEx project aims to create a comprehensive public atlas of gene expression and regulation across multiple human tissues.
The portal uses datatables to present tabular search results of varying data types (expression quantitative trait loci, genes, biological samples, etc.) to the users.
To see it in action, go to http://www.broadinstitute.org/gtex/
The select Search -> Search eQTLs. Select a tissue in "Browse Significant eQTLs" and hit the "Significant eQTLs" button.
Note that the "P-value" column properly sorts scientific notation.
I'm currently working on that particular result table to allow it to expand and collapse rows to show and hide details. Hopefully I'll get that into production soon.
I just love data tables! I made a website for employers to post job ads. You can see an example at www.esl-teaching-jobs.com/jobs/china
And the cool thing that I did, was I use DOM and AJAX together! So you can shift through and sort the tables on client side, and when you click the green button on the left, my AJAX code gets called. I remember reading that there was no way to do this out of the box, so I implemented my own code, works great!
I am currently working on getting DataTables to work on yootheme's UIKit. All the styles are from uikit, datatables should not overwrite any styles.
The sort icons in the tags are uikit icons, the page navigators Next and Previous (two_buttons) are uikit icons.
Setting the sDOM option took most of the time. I now have this for default options:
[code]
var options = {
"bAutoWidth" : false,
"bFilter" : true,
"bInfo" : true,
"bJQueryUI" : false,
"bStateSave" : false,
This places a toolbar above the table with the sSearch left, sInfo in the middle, and the oPaginate at the right.
I had to add this before initializing DataTables:
[code]
// pre-init: add sort icons to columns that have sorting (DataTable for UiKit)
jQuery( '' ).appendTo( id + ' > thead > tr > th[data-sortable!="0"]' );
{/code]
And this after initializing DataTables:
[code]
// post init: apply uikit class to search field
jQuery( '.uk-search > input' ).addClass( 'uk-search-field' ).attr( 'placeholder', '...' );
// post init: search reset should activate input field to clear filter
jQuery( '.uk-search' ).on( 'click', '.uk-search-close', function() { jQuery( id ).dataTable().fnFilter( '' ); } );
[/code]
The problem I am working on now is to get sInfo show up centered in the middle grid section. Right now it's left aligned in the middle grid section.
I haven't got the full_numbers pagination working yet. I used two icons for Previous as for the FirstPage button, and DataTables adds the page numbers between those two icons. There probably is a way to get around this (maybe there is a placeholder like _PAGE_NUMBERS_ for the full_numbers pagination?) but I haven't looked into that yet.
While doing this, I created a function to read the options from HTML attributes. See this forum post for examples on that:
datatables.net/forums/discussion/17320/setting-options-in-html-attributes-possible
I am using datatables in my site framework (PremaFramework), which is the base for many sites including ilikeyourbutt.com, premiervalidate.com, letsjustplaymusic.com, and in development premabooks.com.
The user admin is the primary use, but also for image management in ilyb and throughout premabooks. All of these sites are implemented with Bootstrap 3 as well.
This is probably the 1st time ever I sign up to a forum for a very specific piece of software like this one. This is arguably the #1 javascript-based table plugin on the net, and if it's not, it probably will be soon. That, and this offers both server AND non-server side processing, can't go wrong!
Anyway, I actually do a lot of heavy-duty lifting with this little plugin, and it surprisingly enough, it complains less than most other interpreted languages. I typically send at least tens of thousands of entries in a JSON to datatables, and it picks that up and has no problems. Granted, I modified its original search filter and column toggling (ColVis). No changes to the actual plugins though, just wrote my own plugin on top of it.
It's nice to see so many options/callbacks on your site, and they're all very well documented. All that and very little bugs compared to the metric ton of functionality. SpryPanel might be your pet project but this is probably one of your best works. :)
P.S. Tried the jEditable plugin, but it failed me (was a little slow, and callbacks wouldn't work properly), so bound my own custom events to make/remove input boxes and post back to db. But that only took 10-20 lines total, so that's probably for the best.
I am using this in a small government application. The application was written in 2004, and has seen more than its fair share of developers, and is basically a mess. Myself and my colleague started supporting this web app in late March of this year, and we have been working to clean it up and bring it up to speed with current technologies.
The old tables in the app were just basic styled and that was it. The problem here was that sometimes there would be several thousand rows of data, and they would have to scroll through the whole page to find what they needed. Additionally, they could no longer see the column headers when they did this.
DataTables is amazing and has added LOADS of user-friendly functionality. I use the column filters, search, and pagination features and our users are ecstatic. Additionally, on pages where I need multiple tables, I put them into a jquery accordion and it really tidies everything up nicely.
This is a great piece of code. I have encorporated DataTables into two documents that allow users to search and display a great deal of information, one on winetastings, another a worker directory of specialists. Here are the links:
http://letastevin.org/winetasting/winetable1.html
and
http://insects.ummz.lsa.umich.edu/~ethanbr/chiro/Directory/dir_table1.html
I'm trying to integrate datatables with joomla (CMS) to show CSV files loaded into a DB where the info is filtered by the user loged into joomla.... not fully working, but I'm still on it.
regards and thanks to allan for this amasing contribution!
Replies
I'm just starting out in web development... I've been developing for a few years, mostly thick client / proprietary type stuff.
I've been getting into web development slowly and stumbled upon this component, since I figure a good data grid is 1 of the most crucial elements, I thought I'd try wrap my head around the dataTable.
I'm using PHP pages to return html tables which are appended for display.
Thanks for a great component.
Ed
jQuery DataTables with ASP.NET MVC (Server-Side Sorting, Filtering and Paging) :
http://techtoffee.blogspot.com/2013/04/jquery-datatables-with-aspnet-mvc.html
jQuery DataTables with ASP.NET MVC (Row Detail via AJAX) :
http://techtoffee.blogspot.com/2013/05/jquery-datatables-with-aspnet-mvc-row.html
Using FooTable to make Datatable Responsive :
http://techtoffee.blogspot.com/2013/05/using-footable-to-make-datatable.html
The site is http://armitunes.com - You can see DataTables in action in the "Request Song" page under the "Radio Controls" drop down menu, or in your Favorites list if you register for an account.
Thanks for a great tool and great documentation!
I use DataTables in every backend / dashboard project and love the quick javascript functionality for tables with a smaller number of rows, and the JSON/PHP integration for large tables.
My latest project is a full fletch multi-firm multi-currency accounting system.
Thanks for great piece of work, awesome documentation and brilliant support!
Martin
http://www.ellejet.com/featured-empty-legs.php
Quiet a cool service - empty legs on charter jets.
(The big project i'm working on has 50+ forms with DataTables).
I'm using DataTables with preloaded Data for most webforms, as well as loading data from Ajax for things like searching through "logfiles" (which are actually database tables).
We use a lot of variations, from full-fledged sortable, filterable, pageable, grids, to simple grids to display small sets of data with no headers or footers, sorting, etc.
Excellent tool, and if they gave out Oscars for Best Supporting Tools, I'd vote for this one.
My implementation is a public website providing access to thousands of Expired / Dropping & PreRelease auction domains - I tried to create a novel approach to managing large volumes of data, so please feel free to check it out and provide any feedback. As this is predominantly an academic / free time exercise the .js source code on the site is not obfuscated,
Check it out - http://www.expired-domains.co
I'm working for a company and I am using it in a jQuery table plugin.
I did a comparison between many tables scripts before making the move.
While it's maybe not the easiest plugin to setup in my opinion, it gets everything I want done.
I have now a custom table plugin that is using datatables couting more than 2 000 lines.
What it does is optimizing setup (easier to configure, and really clean to write) for online/offline data modes, adding top menus and inline menus (with a link to selected rows), managing data within the row, assigning shortcuts to menus and actions (next/prev row...), auto next/prev page handling, selected rows handling, grouping callbacks unifying, and more.
It's great to work with datatables, it's harder to work with its plugins.
A big thank you for your work.
I am using dataTables in an CMS/CRM intranet system running on "ruby on rails" with a "bootstrap" interface framework.
Larry
With DataTables, we are able to render the data much quicker for the end user (thanks pagination!) and supply the user with more information, wildcards, and links to all relevant pages! Really, this plugin is amazing =)
Here is a link to what it looks like so far: http://imgur.com/HMWjuP2
We haven't deployed it yet, as we are doing some final touches!
It's not perfect and I've lost count of the number of times I found myself banging my head against the desk trying to solve various problems. But at the time I planned the project it was the best PHP CRUD I could find for the budget that could handle relational data.
I housed Datatables Editor with the Bonfire library for CodeIgntier. Bonfire gave the project a HMVC structure and a bunch of goodies including a barebones CMS with a login system. Editor gave the project a CRUD that was much better than, say, GroceryCRUD.
Fitting Editor with CodeIgniter didn't go as neatly as I wanted, so I ended up making the AjaxURL connect to the MySQL independently of CodeIgniter. Not neat I realise but while I could find a way of integrating Datatables I couldn't find a way of integrating Editor quickly. Looking back now a few ideas are springing to mind about how to do it.
The next big problem I found was with relational data. The Join function was a key reason I chose to use Editor/Datables. However, its limitation was that I was forced to use link tables whenever I wanted the CRUD talking to multiple related tables. So the more complicated joins were left to MySQL views and queries run by CodeIgniter. This also created 'fun' when trying to show data from Views with Datatables and Editor.
If I were to give one piece of advice to anybody wanting to use Datatables beyond the basics it would be learn Javascript better.
I found many interesting usage of DataTables, make me use and explore it more..
But due my poor current knowledge of javascript and jquery, I still develop my current admin site to jquery, to convert it to jquery and DataTables. (It still use a standard php and html now)
I found some solution here in this forum, and still have some problem understanding how to use and setting DataTables for advance use (in my case).
This is just my first post and I will post some questions here..
Thanks a lot.. :)
http://abctrips.com/ uses datatables to display search results - enter any town into the transport search interface, such as Hamburg to Berlin and submit the form - the page then loads search results via ajax and as soon as search completed with all engines connected the page then displays the results in datatables. For sorting and filtering the setup makes use of a lot of adapted examples (and a bit of workarounds as filtering wasn't readily available on all form element types); plus there are some stunts such as populating the list of checkboxes while search results are loaded. See the non-compressed js at: http://abctrips.com/assets/datatables_setup.js
Thanks for datatables, Allan!
Best,
r.
The portal uses datatables to present tabular search results of varying data types (expression quantitative trait loci, genes, biological samples, etc.) to the users.
To see it in action, go to http://www.broadinstitute.org/gtex/
The select Search -> Search eQTLs. Select a tissue in "Browse Significant eQTLs" and hit the "Significant eQTLs" button.
Note that the "P-value" column properly sorts scientific notation.
I'm currently working on that particular result table to allow it to expand and collapse rows to show and hide details. Hopefully I'll get that into production soon.
I just love data tables! I made a website for employers to post job ads. You can see an example at www.esl-teaching-jobs.com/jobs/china
And the cool thing that I did, was I use DOM and AJAX together! So you can shift through and sort the tables on client side, and when you click the green button on the left, my AJAX code gets called. I remember reading that there was no way to do this out of the box, so I implemented my own code, works great!
What do you guys think? Have a great day!!!
Greg
http://plomino.readthedocs.org/en/latest/fields/#datagrid-field
They're also used for views and search forms.
Thank you for the software and nice documentation...
The sort icons in the tags are uikit icons, the page navigators Next and Previous (two_buttons) are uikit icons.
Setting the sDOM option took most of the time. I now have this for default options:
[code]
var options = {
"bAutoWidth" : false,
"bFilter" : true,
"bInfo" : true,
"bJQueryUI" : false,
"bStateSave" : false,
"sDom" : '<"uk-panel uk-panel-box uk-margin-remove"<"uk-grid"<"uk-width-1-3 uk-margin-remove"f><"uk-width-1-3 uk-align-center uk-margin-remove"i><"uk-width-1-3 uk-margin-remove"p>>>t',
"bPaginate" : false,
//"sPaginationType" : "two_button",
"bLengthChange" : false,
"iDisplayLength" : 10,
"bSort" : true,
"oLanguage": {
"sInfo": ' _START_ - _END_ / _TOTAL_',
"sInfoFiltered": ' _TOTAL_ / _MAX_',
"sSearch": '_INPUT_',
"oPaginate": {
"sFirst": "",
"sPrevious": "",
"sNext": "",
"sLast": ""
}
}
};
[/code]
This places a toolbar above the table with the sSearch left, sInfo in the middle, and the oPaginate at the right.
I had to add this before initializing DataTables:
[code]
// pre-init: add sort icons to columns that have sorting (DataTable for UiKit)
jQuery( '' ).appendTo( id + ' > thead > tr > th[data-sortable!="0"]' );
{/code]
And this after initializing DataTables:
[code]
// post init: apply uikit class to search field
jQuery( '.uk-search > input' ).addClass( 'uk-search-field' ).attr( 'placeholder', '...' );
// post init: search reset should activate input field to clear filter
jQuery( '.uk-search' ).on( 'click', '.uk-search-close', function() { jQuery( id ).dataTable().fnFilter( '' ); } );
[/code]
The problem I am working on now is to get sInfo show up centered in the middle grid section. Right now it's left aligned in the middle grid section.
I haven't got the full_numbers pagination working yet. I used two icons for Previous as for the FirstPage button, and DataTables adds the page numbers between those two icons. There probably is a way to get around this (maybe there is a placeholder like _PAGE_NUMBERS_ for the full_numbers pagination?) but I haven't looked into that yet.
While doing this, I created a function to read the options from HTML attributes. See this forum post for examples on that:
datatables.net/forums/discussion/17320/setting-options-in-html-attributes-possible
Jerry
The user admin is the primary use, but also for image management in ilyb and throughout premabooks. All of these sites are implemented with Bootstrap 3 as well.
http://www.ilikeyourbutt.com/images/ilikeyourbutt_com_admin.png
Thanks for a fantastic product!
Thanks to everyone for your posts - its very interesting to see how DataTables is being used!
Anyway, I actually do a lot of heavy-duty lifting with this little plugin, and it surprisingly enough, it complains less than most other interpreted languages. I typically send at least tens of thousands of entries in a JSON to datatables, and it picks that up and has no problems. Granted, I modified its original search filter and column toggling (ColVis). No changes to the actual plugins though, just wrote my own plugin on top of it.
It's nice to see so many options/callbacks on your site, and they're all very well documented. All that and very little bugs compared to the metric ton of functionality. SpryPanel might be your pet project but this is probably one of your best works. :)
P.S. Tried the jEditable plugin, but it failed me (was a little slow, and callbacks wouldn't work properly), so bound my own custom events to make/remove input boxes and post back to db. But that only took 10-20 lines total, so that's probably for the best.
The old tables in the app were just basic styled and that was it. The problem here was that sometimes there would be several thousand rows of data, and they would have to scroll through the whole page to find what they needed. Additionally, they could no longer see the column headers when they did this.
DataTables is amazing and has added LOADS of user-friendly functionality. I use the column filters, search, and pagination features and our users are ecstatic. Additionally, on pages where I need multiple tables, I put them into a jquery accordion and it really tidies everything up nicely.
http://letastevin.org/winetasting/winetable1.html
and
http://insects.ummz.lsa.umich.edu/~ethanbr/chiro/Directory/dir_table1.html
https://github.com/FerencKun/angular-datatable
Thanks Allan! :)
regards and thanks to allan for this amasing contribution!
There's a module that allows you to use DataTables on any table on a Drupal site: http://drupal.org/project/table_trash