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.
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:
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.
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:
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:
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:
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
.
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:
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) |
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) |
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.