jQuery.easytable

A jQuery plugin for tables

View project onGitHub

jquery.easyTable examples page

This page show how to use the plugin, demostrate some methods and events that can be used to help working with tables.

The Table...

Those examples shows a simple table with LOREM IPSUM text, just to exemplify how to use easyTable.

First Column Second Column Third Column Forth Column Fith Column %
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet consectetur, adipisci velit laudem facete nam ex 50%
Eam ei zril maiorum salutandi viris admodum at sit Cibo natum inciderint duo in ei cum quod nisl liber, eos in vitae libris Regione minimum phaedrum 12%
Vix no prompta dolores nobis probatus eu per usu nostro voluptatibus in ut est commodo gloriatur expetendis cum inermis accusam id 23%
Eam etiam principes sadipscing an vis ea inimicus philosophia Scribentur reprehendunt qui at sed te quod eros patrioque nostro sanctus necessitatibus 57%
sed te quod eros patrioque nostro sanctus necessitatibus Cu mei agam instructior Scribentur reprehendunt qui at Sit cu diam sanctus vituperatoribus 91%
vis ea inimicus philosophia Cu mei agam instructior eruditi accumsan omnesque no sed Eam etiam principes sadipscing an Scribentur reprehendunt qui at 85%
sed te quod eros patrioque nostro sanctus necessitatibus Eam etiam principes sadipscing an Cu mei agam instructior sed te quod eros patrioque 0%
Scribentur reprehendunt qui at cu natum dicta imperdiet sit nostro sanctus necessitatibus Sit cu diam sanctus vituperatoribus eruditi accumsan omnesque no sed 18%
Sit cu diam sanctus vituperatoribus vis ea inimicus philosophia Cu mei agam instructior sed te quod eros patrioque nostro sanctus necessitatibus 6%
eruditi accumsan omnesque no sed Scribentur reprehendunt qui at sed te quod eros patrioque sed te quod eros patrioque cu natum dicta imperdiet sit 82%
nostro sanctus necessitatibus Cu mei agam instructior Scribentur reprehendunt qui at eruditi accumsan omnesque no sed sed te quod eros patrioque 100%
sed te quod eros patrioque Eam etiam principes sadipscing an vis ea inimicus philosophia nostro sanctus necessitatibus Scribentur reprehendunt qui at 34%
vis ea inimicus philosophia Cu mei agam instructior eruditi accumsan omnesque no sed Eam etiam principes sadipscing an Scribentur reprehendunt qui at 23%
eruditi accumsan omnesque no sed Scribentur reprehendunt qui at sed te quod eros patrioque sed te quod eros patrioque cu natum dicta imperdiet sit 75%
sed te quod eros patrioque nostro sanctus necessitatibus Cu mei agam instructior Scribentur reprehendunt qui at Sit cu diam sanctus vituperatoribus 66%
vis ea inimicus philosophia Cu mei agam instructior eruditi accumsan omnesque no sed Eam etiam principes sadipscing an Scribentur reprehendunt qui at 54%
sed te quod eros patrioque nostro sanctus necessitatibus Cu mei agam instructior Scribentur reprehendunt qui at Sit cu diam sanctus vituperatoribus 93%
vis ea inimicus philosophia Cu mei agam instructior eruditi accumsan omnesque no sed Eam etiam principes sadipscing an Scribentur reprehendunt qui at 48%

Methods

Fix Table Header

This method aim to fix table header while the body can be scrolled through table content.

Aditional Parameters
none

To execute jquery.easyTable function for fix <thead>, we need to run the following command.

$('#easyTable-example').easyTable('fixedHead');
$('#easyTable-example').easyTable('undoFixedHead');

Adding Rows

This method is to add a row easily, just call the method and than the values will be added to end of the table, after the last row.

Aditional Parameters
values
names
ids

To execute jquery.easyTable function for adding rows we need to run the following command:

$('#easyTable-example').easyTable( 'addRow' ,{ values: ['You can', 'put some', 'HTML', 'Tags', '<input type="checkbox">' ]} );

To add a new row, values is the only parameter that is mandatory for this method work properly, the others parameters, names and ids, are for name attribute and id respectively.

Edit Row Content

This method aim to allow edit the cell content, opening an input to type the new value.

Aditional Parameters
none

To execute jquery.easyTable function to toggle edit content, we need to run the following command.

$('#easyTable-example').easyTable('edit');

Double click on a cell will create an input to write the new content, after losting focus, the content will replace the original.

To toggle edit content, call the same method again.

Removing Rows

This method aim to to choose index and then remove the rows.

Aditional Parameters
indexes

To execute jquery.easyTable function for remove rows, we need to run the following command:

$('#easyTable-example').easyTable( 'removeRow' ,{ indexes: [ 0, 1, 2 ] } );

To remove rows, indexes is the only parameter that is needed for this method. The line index begins at 0 .. (last-tr).

Removing All Rows

The main porpouse of the method is to clean the table, removing all rows.

Aditional Parameters
none

To execute jquery.easyTable function for remove all rows, we need to run the following command:

$('#easyTable-example').easyTable( 'removeAllRows' );

Sorting Rows

The main porpouse of the method is to sort the rows by a column.

Aditional Parameters
column

To execute jquery.easyTable function for sort all rows by a column, we need to run the following command:

$('#easyTable-example').easyTable('sort', {column: 0});

An aditional paramenter is set to replace special characters that you don't want to be considered while is comparing. It's structure has 2 attributes from and to.

$('#easyTable-example').easyTable('sort', {column: 5, from: /%/g, to: '' });

The column count begins at 0 and the last is the quantity of columns - 1.

Events callbacks

jQuery.easyTable accept some callback functions for some methods. There are 3 moments that they will be executed: before starts the execution, in the middle of execution and after the method has completly executed.

The methods, 'addRow', 'removeRows' and 'removeAllRows' accept these callback functions.

Add Row Event

To 'addRow' method, we can pass call functions on this events.
Callbacks
beforeAdd(table, tr)
animateAdd(table, tr)
afterAdd(table, tr)

To execute jquery.easyTable function for adding rows with event call, we need to run the following command:

$('#easyTable-example').easyTable( 'addRow', { columnsValues: ['This row', 'will fade in', 'after', '5 seconds', 'with event call!', '100%'], animateAdd: function (table, tr) { tr.fadeIn(5000); } } );

Some of those functions has parameters. The first one is the table itself and the second one, is the row that will be added. 'BeforeAdd', the 'tr' parameter is always undefined, since the row don`t exist yet, just added to maintain consistency with the others functions.

Remove rows event

The 'removeRow' method, call this events. They are called before and after the execution of the method.

Callbacks
beforeRemove(table)
afterRemove(table)
$('#easyTable-example').easyTable( 'removeRow', { indexes: [ 0, 1 ], beforeRemove: function () { alert('before remove!') }, afterRemove: function() { alert('and after remove!') } } );

Those functions are called just once, even if the quantity of rows to be removed is more than one. They receive only the table as parameter.

Remove All rows event

The 'removeAllRows' method, call this events. They are called before and after the execution of the method.

Callbacks
beforeRemoveAll(table)
afterRemoveAll(table)
$('#easyTable-example').easyTable( 'removeAllRows', { afterRemoveAll: function(table) { alert('table has now: ' + table.find('tbody tr').length + ' rows') } } );

Those functions are called just once, even if the quantity of rows to be removed is more than one.

For every row that is removed from table, it will call beforeRemove(table) and afterRemove(table) if they were fulfield with a function.

This plugin is still under development, any help will be appreciated!