如何在淘汰赛中使用 Jquery Table Sorter [英] How to work with Jquery Table Sorter with knockout

问题描述

我有一张需要应用排序的表格.我正在使用淘汰赛和 jquery.tablesorter.js.我也尝试过自定义绑定，但没有帮助.没有淘汰赛我的代码工作正常.下面是我的桌子.

<头><tr class="标签关闭"><th>类型</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="隐藏"><a>测试工具提示</a>
</tr></tbody>

解决方案

这里是一个例子:http://jsfiddle.net/jearles/RGsEH/

注意:JS 和 CSS 文件依赖项被引入到托管资源下.

HTML

<头><tr><th>类型</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>

JS

function Course(type, title) {this.type = 类型；this.title = 标题；}var ViewModel = function() {this.course = ko.observableArray([新课程(类型"，课程1")，新课程(another_type"，course2")，新课程(second_type"，course5")，新课程(third_type"，course4")，新课程(fourth_type"，course3")]);}ko.bindingHandlers.sortTable = {初始化:函数(元素，valueAccessor){设置超时(函数(){$(element).addClass('tablesorter');$(element).tablesorter({widgets: ['zebra']});}, 0);}};ko.applyBindings(new ViewModel());

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>

解决方案

Here is an example: http://jsfiddle.net/jearles/RGsEH/

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屋！