ProductDatePrice
Netbook12 Sep 2010$199
Phone11 Sep 2010$499
Book12 Sep 2010$199
Screen13 Sep 2010$399
Car12 Oct 2010$12677
Mouse8 Jan 2010$23
Keyboard12 Sep 2009$21
Router6 Aug 2008$89
Computer11/3/2009$499
Operating System11/7/2010$199
Driver6/11/2010$299
Hard Disk22 Dec 2010$699
Flash23 Dec 2010$5
Memory14 Jul 2010$60
Memory5 Feb 2010$25

tQuery Tables is an easy to implement, lightweight Jquery script that makes tables dynamic on the fly.

  • Full Customizable styling
  • Row Highlighting, Alternate colors
  • Rows numeration and pagination
  • Editable Cells
  • Column sorting
  • Import and Export to CSV
  • Very easy to implement
  • Extensive doc. and tutorials
Interested? Show me more samples!

Default Table

tr
ProductDatePrice
Netbook12 Sep 2010$199
Phone11 Sep 2010$499
Book12 Sep 2010$199
Screen13 Sep 2010$399
Car12 Oct 2010$12677
Mouse8 Jan 2010$23
Keyboard12 Sep 2009$21
Router6 Aug 2008$89

This is a simple table with default configuration. The code used for this table is

$(document).ready(function() {
var mytable1 = new ttable('ttable1');
mytable1.rendertable();
});

Note: ttable1 is the Table id

Disabling/Enabling Functions

tr
ProductDatePrice
Netbook12 Sep 2010$199
Phone11 Sep 2010$499
Book12 Sep 2010$199
Screen13 Sep 2010$399
Car12 Oct 2010$12677
Mouse8 Jan 2010$23
Keyboard12 Sep 2009$21
Router6 Aug 2008$89

You can disable/enable functionalities on your table if you want to. Use the variable you created to access functionalities. For example here, I disabled table sorting and enabled pagination.

$(document).ready(function() {
var mytable2 = new ttable('ttable2');
mytable.sorting.enabled = true;
mytable.pagination.enabled = true;
mytable.pagination.rowperpage=5;
mytable2.rendertable();
});

Check the documentation to know available functions and how to use them.

Sorting columns

tr
ProductDatePrice
Netbook12 Sep 2010$199
Phone11 Sep 2010$499
Book12 Sep 2010$199
Screen13 Sep 2010$399
Car12 Oct 2010$12677
Mouse8 Jan 2010$23
Keyboard12 Sep 2009$21
Router6 Aug 2008$89

Enable sorting on all your columns with one line. You can also specify the type (date, digit, alphanumeric) or limit sorting to specific columns. You can also customize the style of the sorted column.

$(document).ready(function() {
var mytable3 = new ttable('ttable3');
mytable3.sorting.enabled = true;
mytable.sorting.sortall = true;
mytable3.rendertable();
});

You can also specify if to reset the numeration when sorting.

Export/Import tables

tr
ProductDatePrice
Netbook12 Sep 2010$199
Phone11 Sep 2010$499
Book12 Sep 2010$199
Screen13 Sep 2010$399
Car12 Oct 2010$12677
Mouse8 Jan 2010$23
Keyboard12 Sep 2009$21
Router6 Aug 2008$89

Import and Export your table to CSV format. You can also allow your users to edit table cells. Just double click a cell to edit it.

$(document).ready(function() {

// Render the table
var mytable4 = new ttable('ttable4');
mytable4.editing.enabled = true;
mytable4.rendertable();

// Export the table
$('#exporttable').click(function() {
alert($('#ttable4').tocsv(','));
});
});

Now click this link, you should see your table converted to CSV.