html<table id="editableTable" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th name="ID">ID</th>
<th name="first">First Name</th>
<th name="last">Last Name</th>
<th>Phone</th>
<th name="city">City</th>
<th name="email">Email</th>
</tr>
<tr>
<td><key>233</key> <button class="eventLink">edit</button></td>
<td><input type="text" name="XXXX" val="YYYY"></input></td>
<td>XXX</td>
<td><input type="checkbox" checked name="zzTop"></input></td>
<td><input type="checkbox" name="yyy"></input></td>
<td><select name="yyy"><option>XXX</option><option SELECTED>YYY</option></select></td>
</tr>
</thead>
<tbody>
<tr>
<td><key>1</key> <button class="eventLink">edit</button></td>
<td>Brice</td>
<td>Burgess</td>
<td>(800)768-5283</td>
<td>Milwaukee</td>
<td>b@b.com</td>
</tr>
<tr>
<td><key>2</key> <button class="eventLink">edit</button></td>
<td>Christian</td>
<td>Bach</td>
<td>(800)768-6288</td>
<td>Chicago</td>
<td>c@c.com</td>
</tr>
<tr>
<td><key>3</key> <button class="eventLink">edit</button></td>
<td>Abe</td>
<td>Lincoln</td>
<td>(800)223-2331</td>
<td>Washington D.C.</td>
<td>l@l.com</td>
</tr>
<tr>
<td><key>8</key> <button class="eventLink">edit</button></td>
<td>Sam Lightning</td>
<td>Hopkings</td>
<td>(800)728-1221</td>
<td>Houston</td>
<td>s@s.com</td>
</tr>
<tr>
<td><key>15</key> <button class="eventLink">edit</button></td>
<td>Rudyard</td>
<td>Kipling</td>
<td>(512)121-1280</td>
<td>London</td>
<td>r@r.com</td>
</tr>
</tbody>
</table>
js<script type="text/javascript">
$().ready(function() {
$("#editableTable").tableSorter({
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
}).tableEditor({
EDIT_HTML: 'edit',
SAVE_HTML: 'save',
EVENT_LINK_SELECTOR: 'button.eventLink',
FUNC_UPDATE: 'updateTable'
});
document.counter = 0;
});
function updateTable(o) {
document.counter++;
if ((document.counter%2) == 0) {
// restore row
alert('Update failed. Row restore.');
$.tableEditor.lib.restoreRow(o.row,o.original);
}
else
alert('Update Success');
return true;
}
</script>