Dynamic data tables for web applications.

Tables is a jQuery plugin for dynamic HTML data tables on the client side.

The tables plugin is:

• Optimised for fast redrawing
• Thin client, small footprint
• Designed for large data sets: (configure, paginate and filter server-side)
• Highly configurable (every column, row, and cell is configurable)

Features

• Pagination
• Forward / back buttons
• Search filter
• Row count
• AJAX data loading in JSON format
• Every cell is configurable

Reference demo

Tables requires a server backend for data access (in JSON format). The static example below shows a reference (example.json) which is included for learning.

Getting started

On the server side, use the reference demo (example.json and example.php) to understand the required data format. On the client side, set up as below:

HTML

Create a blank HTML page, attach tables.css and tables.js, and create a container div:

<div id="table"></div>

JavaScript

Create a config object, instantiate the table on the container div, and call the 'draw' method:

$(document).ready(function() {

	var options = {
		'url' : 'data.json', //url to fetch row JSON
		'queryCount' : 8, //how many rows to show per page
		'enabled' : true, //only operates when enabled is true
		'showIndex' : false //display an optional column showing the row index
	}
	
	$('#table').table(options);
	$('#table').table('draw');
});