Flexible in place editing of TableSorter


« Back to main page

This example demonstrates the the APPLY CLASS toggle. It also demonstrates the noEdit selector. Apply Class applies all classes found in the table header of a column to a column row. For instance, if you have a class of "email" assigned to the second table header, the second cell of each row will inherit the "email" class when the row is made editable. This is useful during row processing in the user functions.

This example uses APPLY CLASS to know what type of data is expected for each cell(column) in an editable row. The table headers (<th>'s) are assigned a class designating the column type (email, number, not empty, etc.) so that a correct validation rule can be applied. NOTE: Phone must be a number(int) (class: pvNumber), Email an email (class: pvEmail), and Last name NOT EMPTY (class: pvEmpty). Validation uses my validation script -- see validate.js

FURTHER, giving a <th> the class noEdit will prevent its cells from becoming editable. Of course "no edit" selector can be overridden by providing COL_NOEDIT_SELECTOR: "selector" when calling tableEditor on a table. By default it is; COL_NOEDIT_SELECTOR: ".noEdit"

ID First Name Last Name Phone City Email
1 Brice Burgess (800)768-5283 Milwaukee
2 Christian Bach (800)768-6288 Chicago
3 Abe Lincoln (800)223-2331 Washington D.C.
8 Sam Lightning Hopkings (800)728-1221 Houston
15 Rudyard Kipling (512)121-1280 London


<script type="text/javascript">
$().ready(function() {	
		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_POST_EDIT: 'postEdit'
	document.counter = 1;

// inject validation
function postEdit(o) {
	// PARAMS -->
	//   add validation to input and select tags with class "validate"
	//   submit button is CSS selector; "../td button.edit"
	//   warn on errors (true)
	//   pass scope (o.row)
	PommoValidate.reset(); // TODO -- validate must be scoped to this ROW. Modify validate.js
	PommoValidate.init('input.validate, select.validate','../td button.eventLink', true, o.row);


(c) 2006 - Brice Burgess