Flexible in place editing of TableSorter


« Back to main page

A full featured real life example of how to use this plugin. It uses the PRE_EDIT function to change a field to a predefined selection. Client side validation is then injected on input during POST_EDIT -- watch that invalid email! Input is further sanitized (stripped of non alpha-numeric characters and trimmed to no more than 10 characters) during PRE_SAVE. Finally, the datasource is updated via an AJAX request in FUNC_UPDATE. If the AJAX request fails, the row is returned to its original values.

\n"; for ($col=0; $col < count($line); $col++) { echo "\t\t\t\n"; } echo "\t\t\n"; } fclose($handle); ?>
ID First Name Last Name Phone City Email
233 XXX
"; echo ($col == 0) ? ''.$line[$col].' ' : $line[$col]; echo "


<script type="text/javascript">
$().ready(function() {	
		sortColumn: 'First Name',			// Integer or String of the name of the column to sort by.  
		sortClassAsc: 'headerSortUp', 		// class name for ascending sorting action to header
		sortClassDesc: 'headerSortDown',	// class name for descending sorting action to header
		headerClass: 'header', 				// class name for headers (th's)
		disableHeader: 'ID' 	// DISABLE Sorting on ID
		EDIT_HTML: 'edit',
		SAVE_HTML: 'save',
		EVENT_LINK_SELECTOR: 'button.eventLink',
		FUNC_PRE_EDIT: 'preEdit',
		FUNC_POST_EDIT: 'postEdit',
		FUNC_PRE_SAVE: 'preSave',
		FUNC_UPDATE: 'updateTable'

// convert city to a predefined select box
function preEdit(o) { 
	// get the fourth column (city)
	var col = o.row[3];
	// get the existing value
	var val = o.row[3].innerHTML;
	var html = "";
	$(col).html(html).find('select option').each(function() {
		if ($(this).html() == val)
			$(this).attr("selected", true);

// inject client side validation
function postEdit(o) {
	// add validation & non empty validator to row cells
	o.row.find("select, input").addClass('validate pvEmpty').end();
	// add email validator to email cell
	// TODO -- better way to access 4th element?
	// initialize validation
	//var saveButton = $('../../td button.eventLink', o.row);
	PommoValidate.init('input.validate, select.validate','../td button.eventLink', true, o.row);

// remove alphanumeric characters, shorten all strings to < 10 chars
function preSave(o) {
	o.row.find("input, select").each(function() {
		var val = common.sanitize($(this).val());

function updateTable(o) {
	// make AJAX call to update the datasource.
	// NOT YET show for demonstration.
	return true;

(c) 2006 - Brice Burgess