jsFiddle無法正常工作,因爲在插件之後加載了jQuery。該框架被設置爲加載jQuery v1.11.0,所以jQuery實際上被加載了兩次。第二個副本覆蓋第一個副本,而tablesorter與第一個副本相關聯。很多東西打破 - 這裏是demo updated刪除第二個副本 - 但它仍然不工作!
如果使用存儲庫中包含的parser-input-select.js
file,則它具有複選框解析器,可在更改後更新單元格,以便正確更新排序。無論如何,有四個版本的代碼,較舊的版本不使用提到的解析器。您可能會感興趣的演示是這一個:http://jsfiddle.net/abkNM/6163/你可能不需要尋呼機,所以纔不包括代碼:
$(function() {
var $table = $('table').tablesorter({
theme: 'blue',
widgets: ['zebra', 'filter'],
widgetOptions : {
group_checkbox: [ "checked", "unchecked" ]
},
headers: {
0: { sorter: 'checkbox' }
}
})
// HEADER CELL Checkbox - toggles state of visible checkboxes
// make sure to include the "parser-input-select.js" file
// it contains the most up-to-date checkbox parser
.on('change', 'thead input[type="checkbox"]', function(){
var checkboxColumn = 0,
onlyVisible = true,
$this = $(this),
isChecked = this.checked;
$table
.children('tbody')
.children('tr' + (onlyVisible ? ':visible' : ''))
.children(':nth-child(' + (checkboxColumn + 1) + ')')
.find('input')
.prop('checked', isChecked)
.trigger('update');
});
});
確保根據需要修改checkboxColumn
& onlyVisible
變量。
更新:有在剛固定分析器代碼中的錯誤,這是目前在主分支只(在我的答案鏈接)提供。否則,您只需輸入unchecked
或checked"
(用一個精確匹配的報價進行檢查)來過濾複選框。
這些過濾器名稱(複選框狀態)由group_checkbox
option設置,我剛添加到我的答案中。
非常感謝! parser-input-select.js是我所缺少的。我剛剛得到它的工作。更新的示例位於http://jsfiddle.net/RobRichens/5fLr7c4o/22/,對於那些在複選框行中出現問題的其他任何人都是如此。 –