Knockoutjs.com - Paged grid

http://knockoutjs.com/examples/grid.html

by ernestohs

HTML

<script src="http://knockoutjs.com/js/jquery.tmpl.js"></script>
<script src="http://knockoutjs.com/js/knockout-1.2.1.js"></script>
<script src="http://knockoutjs.com/examples/resources/knockout.simpleGrid.js"></script>
<div class='liveExample'> 
    
    <div data-bind='simpleGrid: gridViewModel'> </div> 
    
    <button data-bind='click: function() { items.push({ name: "New item", sales: 0, price: 100 }) }'> 
        Add item    
    </button> 
    
    <button data-bind='click: sortByName'> 
        Sort by name
    </button> 
    
    <button data-bind='click: function() { gridViewModel.currentPageIndex(0) }'> 
        Jump to first page    
    </button> 
    
    
    
</div>

CSS

body { font-family: arial; font-size: 14px; }
.liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.liveExample input { font-family: Arial; }
.liveExample b { font-weight: bold; }
.liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
.liveExample select[multiple] { width: 100%; height: 8em; }
.liveExample h2 { margin-top: 0.4em; }

.ko-grid { margin-bottom: 1em; width: 25em; border: 1px solid silver; background-color:White; }
.ko-grid th { text-align:left; background-color: Black; color:White; }
.ko-grid td, th { padding: 0.4em; }
.ko-grid tr.odd { background-color: #DDD; }
.ko-grid-pageLinks { margin-bottom: 1em; }
.ko-grid-pageLinks a { padding: 0.5em; }
.ko-grid-pageLinks a.selected { background-color: Black; color: White; }
.liveExample { height:20em; overflow:auto } /* Mobile Safari reflows pages slowly, so fix the height to avoid the need for reflows */

li { list-style-type: disc; margin-left: 20px; }

JavaScript

var myModel = {
    items: ko.observableArray([
        {
        name: "Well-Travelled Kitten",
        sales: 352,
        price: 75.95},
    {
        name: "Speedy Coyote",
        sales: 89,
        price: 190.00},
    {
        name: "Furious Lizard",
        sales: 152,
        price: 25.00},
    {
        name: "Indifferent Monkey",
        sales: 1,
        price: 99.95},
    {
        name: "Brooding Dragon",
        sales: 0,
        price: 6350},
    {
        name: "Ingenious Tadpole",
        sales: 39450,
        price: 0.35},
    {
        name: "Optimistic Snail",
        sales: 420,
        price: 1.50}
    ]),
    sortByName: function() {
        this.items.sort(function(a, b) {
            return a.name < b.name ? -1 : 1;
        });
    }
};
myModel.gridViewModel = new ko.simpleGrid.viewModel({
    data: myModel.items,
    columns: [
        {
        headerText: "Item Name",
        rowText: "name"},
    {
        headerText: "Sales Count",
        rowText: "sales"},
    {
        headerText: "Price",
        rowText: function(item) {
            return "$" + item.price.toFixed(2)
        }}
    ],
    pageSize: 4
});

ko.applyBindings(myModel);