TableEditor

Flexible in place editing of TableSorter

NEW ROW EXAMPLE

« Back to main page

This example demonstrates how trivial it is to add a new row to the table. You can pass in options designating a class for the new row, the key, cell values, whether it should inherit these values, and the table the row should be added to.

Using a unique KEY for the new row (0 by default) will allow your data source updater to ADD vs. UPDATE the row. The datasource updater is likely an ajax submit defined in your FUNC_UPDATE.

	Email	First Name	Last Name	Age	Chicago
1	hates.spam@iceburg.net	Brice	Burgess	26	Bears
2	hurricane@ditka	Mike	Ditka	62	Francheesi
3	berghoff@gone.com		Berghoff	99	Free Bacon
4	jazz@mpark.com	Mill	Green	67	Organ
5	marina	towers	is	bueno	River
2020		Iam	FormMan	31721335588119

SOURCE

<script type="text/javascript">
$().ready(function() {	
	$("#editableTable").tableSorter({ 
		sortClassAsc: 'ASC', 		// class name for ascending sorting action to header
		sortClassDesc: 'DESC',	// class name for descending sorting action to header
		headerClass: 'header', 				// class name for headers (th's)
		disableHeader: 0 
	}).tableEditor({
		SAVE_HTML: '',
		EDIT_HTML: '',
		EVENT_LINK_SELECTOR: 'button.edit',
		COL_APPLYCLASS: true,
		ROW_KEY_SELECTOR: 'p.key',
		FUNC_POST_EDIT: 'postEdit'
	});
	
	$('#addNew').click(function() {
		var options = {
			CLASS: 'newRow', 
			VALUES: {
				email: 'auto@populated.com',
				chicago: 'bearsch'
			}
		};
		jQuery.tableEditor.lib.appendRow(options);
	});
	
	$('#addCopy').click(function() {
		var options = {
			KEY: -1,
			COPY: true
		};
		jQuery.tableEditor.lib.appendRow(options);
	});
});

// inject validation
function postEdit(o) {
	var inputSelector = 'input.pvV';
	var submitSelector = '../td button.edit'
	
	PommoValidate.reset();
	PommoValidate.init(inputSelector, submitSelector, true, o.row);
}
</script>