ko table pagination

by gbos

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<link rel="stylesheet" href="http://tutorials.ajaxmasters.com/pagination-demo/pagination.css">
<script src="http://tutorials.ajaxmasters.com/pagination-demo/jquery.pagination.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/18b2f7763191113118b300d1e91b463612aede74/build/output/knockout.mapping-latest.js"></script>
<div data-bind="paginate: {total: total(), pageSize: 4, loadPage: loadPage}"></div>
<hr class="clear">

<table data-bind="selectableList: selectRow" border="1">
<thead><tr><th>i</th><th>Name</th><th>Adress</th><th></th></tr></thead>        
    <tbody data-bind="foreach: list">
       <tr><td data-bind="text:$index"></td>
           <td data-bind="text:name"></td>
           <td data-bind="text:address"></td>
           <td data-bind="click: function () { $parent.remove($index);  }">Delete</td>
        </tr>                                       
    </tbody>
</table>

<button data-bind="click: doIt">do it</button>


<div data-bind="with: selected, visible: selected() !== null" >
    <label>Name:</label><input data-bind="value: name"/><br>
    <label>Address:</label><input data-bind="value: address"/>    
</div>

CSS

body {
 font-family: Tahoma;
 margin: 15px;   
 font-size: 0.8em;
}

hr.clear {
   clear:both;
   visibility: hidden;    
}

table.selectableList td.selected {
    background: yellow;   
}

table.selectableList thead {
background: lightblue;
color: white;    
}

table.selectableList thead th {
   font-weight: bold;            
}

table.selectableList th,td {
   padding: 4px;            
}

JavaScript

var data = $.map([
    {name: "aaaa1", address: "truc"},  
    {name: "aaaa2", address: "truc"},  
    {name: "aaaa3", address: "truc"},  
    {name: "bbbbbbb", address: "truaaaac"},  
], function (a) { return ko.mapping.fromJS(a); });

var data2 = $.map([
    {name: "aaaa1", address: "truc"},  
    {name: "aaaa2", address: "truc"},  
    {name: "aaaa3", address: "truc"},  
], function (a) { return ko.mapping.fromJS(a); });


var Model = function () {
   var self = this;
   self.total = ko.observable(7);
   self.list = ko.observableArray([]); 
   self.selected = ko.observable(null);

   self.remove = function (i) {
      console.log(i());
       self.list.splice(i(),1);
   };
   self.loadPage = function (i) {
       console.log("loadList", arguments);
       self.selected(null);
       if (i === 0) 
           self.list(data);
       else
           self.list(data2);
   };
    self.doIt = function (i) {
        //self.total(20);
        console.log(self.list()[0]);
        
    };
    self.selectRow = function (i) {
       console.log("row selected", i);
        console.log(self.list());
       self.selected(self.list()[i]);        
    }
};

ko.bindingHandlers.paginate = {
    init: function (element, valueAccessor) {
       $(element).addClass('pagination');
    },
    update: function (element, valueAccessor) {
       var options = valueAccessor();
        console.log(options);
        console.log(options.total);
        $(element).pagination(options.total, {
            items_per_page:options.pageSize,
            callback:options.loadPage
        });       
    }
};
        
ko.bindingHandlers.selectableList = {
    init: function (element, valueAccessor) {
        var handler = valueAccessor();
        var $table = $(element);
        $table.addClass('selectableList').find('tbody tr').css({cursor: 'pointer'}).live('click', function () {
            $table.find('.selected').removeClass('selected');
           $(this).find('td').addClass('selected');
        ...