如何使用带有剔除的Jquery Table Sorter [英] How to work with Jquery Table Sorter with knockout
本文介绍了如何使用带有剔除的Jquery Table Sorter的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一张需要对其进行排序的表格.我正在使用敲除和jquery.tablesorter.js.我也尝试过自定义绑定,但没有帮助.没有淘汰赛,我的代码可以正常工作.下面是我的桌子.
I have a table on which i need to apply sorting. I'm using knockout and jquery.tablesorter.js. I have tried custom binding also but is not helping. Without knockout my code works fine. Below is my table.
<table class="tbl" id="dash" data-bind="sortTable: true">
<thead>
<tr class="tag close">
<th>Type</th>
<th>Title</th>
</tr>
</thead>
<tbody class="scrollContent" data-bind="foreach: Course">
<tr>
<td><i class="icon"></i></td>
<td><a href="#" id="qtipselector_01" data-bind="text: Title"></a></td>
<div id="TooltipContent_01" class="hidden">
<a> Test Tool Tip</a>
</div>
</div>
</tr>
</tbody>
</table>
推荐答案
以下是示例: http://jsfiddle.net/jearles/RGsEH/
注意:JS和CSS文件的依赖项位于受管资源下.
NOTE: The JS and CSS file dependencies are brought in under Managed Resources.
HTML
<table data-bind="sortTable: true">
<thead>
<tr>
<th>Type</th>
<th>Title</th>
</tr>
</thead>
<tbody data-bind="foreach: course">
<tr>
<td data-bind="text: type"></td>
<td data-bind="text: title"></td>
</tr>
</tbody>
</table>
JS
function Course(type, title) {
this.type = type;
this.title = title;
}
var ViewModel = function() {
this.course = ko.observableArray([
new Course("type", "course1"),
new Course("another_type", "course2"),
new Course("second_type", "course5"),
new Course("third_type", "course4"),
new Course("fourth_type", "course3")
]);
}
ko.bindingHandlers.sortTable = {
init: function(element, valueAccessor) {
setTimeout( function() {
$(element).addClass('tablesorter');
$(element).tablesorter({widgets: ['zebra']});
}, 0);
}
};
ko.applyBindings(new ViewModel());
这篇关于如何使用带有剔除的Jquery Table Sorter的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文