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 (data.json) which is included for learning.

Getting started

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

HTML

Create a webknife template, attach table.css and table.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', //the url from which to fetch the table data (JSON format)
		'queryCount' : 8, //how many rows to show per page (should match the server-side settings)
		'enabled' : true, //table('draw') only operates when enabled is true
		'showIndex' : false //display an optional column showing the row index
	}
	
	$('#table').table(options);
	$('#table').table('draw');
});