使用updateCell
方法時,原始tablesorter插件存在問題,因此更新輸入值時此方法不起作用。但是你可以試試我的fork of tablesorter,它沒有這個問題。
Here is a demo以下所有代碼放在一起。的
基本上不使用textExtraction
適用於所有表格單元格,你只需要添加一個解析器:
$.tablesorter.addParser({
id: "inputs",
is: function() {
return false;
},
format: function (s, table, cell) {
return $(cell).find('input').val() || s;
},
type: "text"
});
然後告訴的tablesorter哪一列將它應用到(從零開始的索引):
$('table').tablesorter({
headers: {
0: { sorter: "inputs" } // zero-based index (first column = column 0)
}
});
然後請確保輸入的任何改變(除非你讓他們只讀)被公認的tablesorter併發送至您的服務器
var resort = true, // resort table after update
// update all input types within the tablesorter cache when the change event fires.
// This method only works with jQuery 1.7+
// you can change it to use delegate (v1.4.3+) or live (v1.3+) as desired
// if this code interferes somehow, target the specific table $('#mytable'),
// instead of $('table')
$(window).load(function() {
// this flag prevents the updateCell event from being spammed
// it happens when you modify input text and hit enter
var alreadyUpdating = false;
$('table').find('tbody').on('change', 'input', function (e) {
if (!alreadyUpdating) {
var $tar = $(e.target),
$table = $tar.closest('table');
alreadyUpdating = true;
$table.trigger('updateCell', [ $tar.closest('td'), resort ]);
// *** update your server here ***
setTimeout(function() {
alreadyUpdating = false;
}, 10);
}
});
});
這是一個不錯的選擇,但爲什麼會有免費的產品在那裏很好? – Mottie