All About Tables – jQuery Plugin

21. Jun, 2009 25 Comments

jQuery Table plugins

Yes HTML table tag is not recommended in designing your websites anymore but it is still very useful especially in displaying a tabular data. In this article I will be featuring a list of jQuery plugins that are utilizing the html table tag.

1. uiTableEdit

A jQuery plugin for making tables editable by users. A user clicks on a cell, edits the value, then presses enter or clicks on any cell to save the new value.

Sample Code

 var t = $('table')
 $.uiTableEdit( t ) // returns t

2. Flexigrid

Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content.

Similar in concept with the Ext Grid only its pure jQuery love, which makes it light weight and follows the jQuery mantra of running with the least amount of configuration.

Features:

  • Resizable columns
  • Resizable height and width
  • Sortable column headers
  • Cool theme
  • Can convert an ordinary table
  • Ability to connect to an ajax data source (XML and JSON)
  • Paging
  • Show/hide columns
  • Toolbar
  • Search
  • Accessible API

Sample Code

$("#flex1").flexigrid
			(
			{
			url: 'post2.php',
			dataType: 'json',
			colModel : [
				{display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},
				{display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
				{display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},
				{display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true},
				{display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}
				],
			buttons : [
				{name: 'Add', bclass: 'add', onpress : test},
				{name: 'Delete', bclass: 'delete', onpress : test},
				{separator: true}
				],
			searchitems : [
				{display: 'ISO', name : 'iso'},
				{display: 'Name', name : 'name', isdefault: true}
				],
			sortname: "iso",
			sortorder: "asc",
			usepager: true,
			title: 'Countries',
			useRp: true,
			rp: 15,
			showTableToggleBtn: true,
			width: 700,
			height: 200
			}
			);

3. Table Drag and Drop JQuery plugin

Drag and drop table rows to reorganise data. onDragStart and onDrop config options allow you to integrate this with Ajax calls to update the server.

Sample Code

<table id="table-1" cellspacing="0" cellpadding="2">
    <tr id="1"><td>1</td><td>One</td><td>some text</td></tr>
    <tr id="2"><td>2</td><td>Two</td><td>some text</td></tr>

    <tr id="3"><td>3</td><td>Three</td><td>some text</td></tr>
    <tr id="4"><td>4</td><td>Four</td><td>some text</td></tr>

    <tr id="5"><td>5</td><td>Five</td><td>some text</td></tr>
    <tr id="6"><td>6</td><td>Six</td><td>some text</td></tr>

</table>

$(document).ready(function() {
    // Initialise the table
    $("#table-1").tableDnD();
});

4. Tablesorter

tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell. It has many useful features including:

  • Multi-column sorting
  • Parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time. Add your own easily
    • Support for ROWSPAN and COLSPAN on TH elements
  • Support secondary “hidden” sorting (e.g., maintain alphabetical sort when sorting on other criteria)
  • Extensibility via widget system
  • Cross-browser: IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+
  • Small code size
$(document).ready(function()
    {
        $("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} );
    }
);

5. jQuery table2CSV

This plugin provides conversion from a html table to a csv string.

There are two parameter only: callback and delimiter.

Delimiter parameter provides which column delimiter should be used in the csv string – default is “,”.
The callback parameter(a callback function) contains one argument which is the csv string so you can doa nything you want with the generated string.

Options defaults values:

delimiter: ","
callback: function (csv) { //mandatory
    return csv;
}

Getting csv string and sends it with ajax:

jQuery(function() {
    jQuery("#my-table").table2csv({
        callback: function (csv) {
            jQuery.post(
                url, encodeURIComponent(csv),
                 function (data) {
                     //do something here
                 }
            );
    });

6. jQuery table search

This plugins adds a search feature in a table element. The select box is filled with all column headers names(this way the user can select on which column the search is going to be executed).

The texts and messages of errors(data not found and empty field) can be customized.

All fields are inserted into a div above the table, using this id: “table-search-container”

If esc key is pressed when the input field is focused, all the rows will be displayed again.

The error messages are displayed bellow the fields, in a span tag with a class called “table-search-error-message”

The ignore array(option param) is used to ignore search in specified columns, just insert the text of the column header to ignore that column on the select box(not case sensitive)

Default option values:

ignore: [],
selector: true, //will be implemented in the next release, do not change
turbo: false, //will be implemented in the next release, do not change
field: {className: "table-search-field", name: "table-search-field", size: "20", required: "true"},
label: {selector: "Select a column: ", field: "Insert a text to search: "},
button: {className: "table-search-button", name: "table-search-button", value: "Search"},
empty: "Please fill the search field.",
notFound: "Data not found.",
container: "table-search-container"

Usage

Simple usage with defaults parameters:

$("#my-table").tableSearch();

Setting error messages:

$("#my-table").tableSearch({
    empty: "empty field message",
    notFound: "not found message"
});

Setting the fields label:

$("#my-table").tableSearch({
    label: {
        selector: "Select a option",
        field: "Type something here"
    }
});

Ignores column called “Name”:

$("#my-table").tableSearch({
    ignore: "name"
});

The table structre should contain thead(with th) and tbody sections as bellow:

<table>
<thead>
<tr>
<th>Name1</th>
<th>Name2</th>
<th>Name3</th>
<th>Name4</th>
<th>Name5</th>
</tr>
</thead>
<tbody>
<tr>
<td>c1r1</td>
<td>c2r1</td>
<td>c3r1</td>
<td>c4r1</td>
<td>c5r1</td>
</tr>
<tr>
<td>c1r2</td>
<td>c2r2</td>
<td>c3r2</td>
<td>c4r2</td>
<td>c5r2</td>
</tr>
<tr>
<td>c1r3</td>
<td>c2r3</td>
<td>c3r3</td>
<td>c4r3</td>
<td>c5r3</td>
</tr>
</tbody>
</table>

7. csv2table

This plugin loads a CVS file (e.g. created using Excel) and creates a table with the contents in that CVS file.

<div id="view1"></div>
<script type="text/javascript">
$(function(){
    $('#view1').csv2table('./data/Book12.csv');
});
</script>

8. Detailsrow

Dynamically add more info to your table
Jquery.detailsrow adds a subrow to each row dynamically which can be toggled on or off. Data is loaded using ajax based on the arguments passed in the post parameters. The post parameters vary from row to row based on defined attributes in the html like ID or URL.

	<tr class="even" id="1">
		<td>Bruce</td>
		<td>Almighty</td>
		<td>45</td>

		<td>$153.19</td>
		<td>44.7%</td>
		<td>+77</td>
		<td>Jan 18, 2001 9:12 AM</td>

	</tr>
	<tr class="odd" id="2">
		<td>Bruce</td>
		<td>Evans</td>
		<td>22</td>

		<td>$13.19</td>
		<td>11%</td>
		<td>-100.9</td>
		<td>Jan 18, 2007 9:12 AM</td>

	</tr>

	$(document).ready(function() {
		$('#table1').detailsRow('process.php',{data:{"id":"id"}});
	});

9. Ingrid

Datagrids don’t have to be difficult to use anymore – say hi to Ingrid. Ingrid is an unobtrusive jQuery component that adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your tables.

<script type="text/javascript">
$(document).ready(
	function() {
		$("#table1").ingrid({
			url: 'remote.html',
			height: 350
		});
	}
);
</script>

More information and plugin demo here

10. jqGrid – jQuery Grid Plugin

jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web. Since the grid is a client-side solution loading data dynamically through Ajax callbacks, it can be integrated with any server-side technology, including PHP, ASP, Java Servlets, JSP, ColdFusion, and Perl.

Sample Code:

jQuery("#list1").jqGrid({
   	url:'server.php?q=1',
	datatype: "xml",
   	colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
   	colModel:[
   		{name:'id',index:'id', width:55},
   		{name:'invdate',index:'invdate', width:90},
   		{name:'name',index:'name', width:100},
   		{name:'amount',index:'amount', width:80, align:"right"},
   		{name:'tax',index:'tax', width:80, align:"right"},
   		{name:'total',index:'total', width:80,align:"right"},
   		{name:'note',index:'note', width:150, sortable:false}
   	],
   	rowNum:10,
   	rowList:[10,20,30],
   	imgpath: gridimgpath,
   	pager: jQuery('#pager1'),
   	sortname: 'id',
    viewrecords: true,
    sortorder: "desc",
    caption:"XML Example",
    editurl:"someurl.php"
}).navGrid('#pager1',{edit:false,add:false,del:false});

More information and example can be found here.

11. DataTables

Im sorry to all DataTables fan for not including this awesome plugin. Thank you for letting me know this tool. I have take some time looking at this plugin and I found it awesome. So for those who dont know it yet you better try it.

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML tables.

Some Features

  • Variable length pagination
  • On-the-fly filtering
  • Multi-column sorting with data type detection
  • Smart handling of column widths
  • Fully internationalisable
  • It’s free!
  • State saving
  • Hidden columns
  • Dynamic creation of tables
  • Ajax auto loading of data
  • Custom DOM positioning
  • Single column filtering
  • Alternative pagination types
  • Non-destructive DOM interaction
  • Sorting column(s) highlighting
  • Extensive plug-in support Sorting, type detection, API functions and pagination
  • Fully themeable by CSS
  • Solid documentation
/*
 * DataTables example
 */
$(document).ready( function() {
	$('#example').dataTable();
}

That’s all I found promising. If you want to recommend another plugin related to above list, drop me a comment.

PG

Author: insic

Subscribe in my RSS Feed for more updates on Web Design and Development related articles. Follow me on twitter or drop a message to my inbox.

Related Post

Delicious
General, Tools
, , , , ,

25 Responses to “All About Tables – jQuery Plugin”

  1. arnold Reply 21. Jun, 2009 at 9:32 am

    thanks! this might be helpful someday…

  2. Katty Reply 22. Jun, 2009 at 12:21 am

    FlexiGrid is seems powerful :) Nice article

  3. Kawsar Ali Reply 22. Jun, 2009 at 1:41 am

    Some useful stuff here. Not all tables are evil ! Good post

  4. saurabh shah Reply 22. Jun, 2009 at 12:18 pm

    So finally new post on Insic blog .. cool ! :) …
    really like the post insic … nice post …

  5. Scrunch Reply 29. Jun, 2009 at 1:52 am

    How about datatables?

    http://www.datatables.net

    IMHO it’s the best :)

  6. awake Reply 03. Jul, 2009 at 5:20 pm

    leigeber’s table sorter is pretty sick also… (it’s not jquery based but it’s extremely light)

    http://www.leigeber.com/2009/03/table-sorter/

  7. Jaspal Singh Reply 16. Jul, 2009 at 1:58 am

    I love jquery, wonderful jquery stuff, thanks for sharing.

  8. Dimas Reply 28. Jul, 2009 at 12:50 am

    Flexigrid is awesome, very nice demo. What’s your favorite insic?

  9. Djoh Reply 28. Jul, 2009 at 1:50 am

    And once again datatable is missing !

    http://www.datatables.net is simply the greatest (jQuery) plugin for tables. So many features are there !

    Anyway, I’m just advertising for a tool that I’m using. Every day. :)

  10. insic2.0 Reply 28. Jul, 2009 at 2:19 am

    To all dataTables fan I have updated my post added datatables in the list. Thanks for letting me know this awesome plugin

  11. David Levin Reply 22. Aug, 2009 at 3:20 pm

    JQuery is awesome. Thanks for the recommendation of “Data Tables”. I do wish there was a plugin that would allow drag and drop sorting just like Netflix uses on their queue page.

  12. denbagus Reply 25. Nov, 2009 at 6:22 am

    nice information …thank you

  13. wwebz Reply 01. Mar, 2010 at 2:08 am

    Hey Thanks for sharing..last night i had fire around 200 google query for data grid with jquery…and today i got your post somebody posted in twitter….Thanks

  14. SM Reply 15. Mar, 2010 at 2:53 am

    Helpful post. Thanks

  15. Atul Kash Reply 16. Mar, 2010 at 9:00 pm

    Nice alternative! Will give it a shot very soon. Thanks for sharing!

  16. shawn Reply 19. Apr, 2010 at 8:22 am

    Nice Post..This is really helpful for me.Great one man.Thanks for good post.

  17. James Reply 01. Sep, 2010 at 1:35 am

    Brilliant! Took me 3 days to find this jQuery plugin. Any thoughts about the loading time of the page?

  18. Gray Reply 20. Sep, 2010 at 6:24 am

    This is an awesome plugin

  19. uciama Reply 27. Oct, 2010 at 4:50 pm

    the plugin made my wp blog so sleek

Leave a Reply