nalberg

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<!-- simple table with knockout foreach -->
<table id="dataGrid" border="1">
  <thead>
    <tr>
        <th><b>Sortable Header (sort click me)</b></th>
    </tr>
  </thead>
  <tbody data-bind="foreach:people">
    <tr >
      <td data-bind="text:$data"></td>
    </tr>
  </tbody>
</table>
<button data-bind="click:$root.toggleData">Changes Data (try before sorting.. and after)</button>
<button id="swap">Move first row to end of table</button>

JavaScript

function viewModel() {
    var self = this;
    this.people1 = [ "Mark","Sean","Peter","Nate"];
    this.people2 = [ "Luke","John","Simon","Marry"];
    
    // default people to data 1
    this.people = ko.observableArray(self.people1);
    
    // toggles data
    this.toggleData = function(data){
        self.people.removeAll();
      if(self.people() == self.people1){
        self.people(self.people2);
      } else {
        self.people(self.people1);
      }
      // call update after data changes makes it worse
      $("#dataGrid").trigger("update");
    }
}
var vm = new viewModel();
ko.applyBindings(vm);
  
$(function(){
    // initalize sorting on my table
    $("#dataGrid").tablesorter();
    
    $('#swap').click(function () {
        $('tbody tr:first').appendTo('tbody');
    });
});