Product | Date | Price |
---|---|---|
Netbook | 12 Sep 2010 | $199 |
Phone | 11 Sep 2010 | $499 |
Book | 12 Sep 2010 | $199 |
Screen | 13 Sep 2010 | $399 |
Car | 12 Oct 2010 | $12677 |
Mouse | 8 Jan 2010 | $23 |
Keyboard | 12 Sep 2009 | $21 |
Router | 6 Aug 2008 | $89 |
Computer | 11/3/2009 | $499 |
Operating System | 11/7/2010 | $199 |
Driver | 6/11/2010 | $299 |
Hard Disk | 22 Dec 2010 | $699 |
Flash | 23 Dec 2010 | $5 |
Memory | 14 Jul 2010 | $60 |
Memory | 5 Feb 2010 | $25 |
tQuery Tables is an easy to implement, lightweight Jquery script that makes tables dynamic on the fly.
Product | Date | Price |
---|---|---|
Netbook | 12 Sep 2010 | $199 |
Phone | 11 Sep 2010 | $499 |
Book | 12 Sep 2010 | $199 |
Screen | 13 Sep 2010 | $399 |
Car | 12 Oct 2010 | $12677 |
Mouse | 8 Jan 2010 | $23 |
Keyboard | 12 Sep 2009 | $21 |
Router | 6 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
Product | Date | Price |
---|---|---|
Netbook | 12 Sep 2010 | $199 |
Phone | 11 Sep 2010 | $499 |
Book | 12 Sep 2010 | $199 |
Screen | 13 Sep 2010 | $399 |
Car | 12 Oct 2010 | $12677 |
Mouse | 8 Jan 2010 | $23 |
Keyboard | 12 Sep 2009 | $21 |
Router | 6 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.
Product | Date | Price |
---|---|---|
Netbook | 12 Sep 2010 | $199 |
Phone | 11 Sep 2010 | $499 |
Book | 12 Sep 2010 | $199 |
Screen | 13 Sep 2010 | $399 |
Car | 12 Oct 2010 | $12677 |
Mouse | 8 Jan 2010 | $23 |
Keyboard | 12 Sep 2009 | $21 |
Router | 6 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.
Product | Date | Price |
---|---|---|
Netbook | 12 Sep 2010 | $199 |
Phone | 11 Sep 2010 | $499 |
Book | 12 Sep 2010 | $199 |
Screen | 13 Sep 2010 | $399 |
Car | 12 Oct 2010 | $12677 |
Mouse | 8 Jan 2010 | $23 |
Keyboard | 12 Sep 2009 | $21 |
Router | 6 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.
Product | Date | Price |
---|---|---|
Netbook | 12 Sep 2010 | $199 |
Phone | 11 Sep 2010 | $499 |
Book | 12 Sep 2010 | $199 |
Screen | 13 Sep 2010 | $399 |
Car | 12 Oct 2010 | $12677 |
Mouse | 8 Jan 2010 | $23 |
Keyboard | 12 Sep 2009 | $21 |
Router | 6 Aug 2008 | $89 |
Computer | 11/3/2009 | $499 |
Operating System | 11/7/2010 | $199 |
Driver | 6/11/2010 | $299 |
Hard Disk | 22 Dec 2010 | $699 |
Flash | 23 Dec 2010 | $5 |
Memory | 14 Jul 2010 | $60 |
Memory | 5 Feb 2010 | $25 |
The filter function links tQuery table to an input box. Once the user types in the input, the table automatically filter the results.
First you create an input box and assign it a unique ID.
<input id="searchinput" />
You can put the input box wherever you want in the page. Next, add the following lines of code.
mytable5.filter.enabled = true;
mytable5.search.inputID = 'searchinput';
mytable5.search.casesensitive = false;
Search is disabled by default, you can also specify if the case is sensitive or not.