How to work with Jquery Table Sorter with knockout

Question

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>

Macro

Answer 1

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());

Auburta

I'm glad to help. If you are happy with my answer you should mark it as Accepted. It will let the community know that the question has an Accepted Answer, plus you will get a reputation bonus! – Auburta

Very slick! Saved me the bother. Thanks for the excellent binding! – Shabbir

Answer 2

The above solution by @john Earles works on pre defined data tables but when we are adding dynamic data to tables, it kinda breaks.

please check this : http://jsfiddle.net/vkctata/vdcox07c/1/

function Course(type, title) {
      this.type = type;
      this.title = title;
    }
    var ViewModel = function() {
      this.addNewItem = function() {
        this.course.push(new Course("nth_type", "course33"));
        return false;
      }
      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());

we found a way to create nearly generic sorting, please follow this link knockout sort

Kazachok