Knockoutjs.com - Paged grid

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

HTML

<script src="http://knockoutjs.com/js/jquery.tmpl.js"></script>
<script src="http://knockoutjs.com/js/knockout-1.2.1.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: sortBySales'>
        Sort by Sales Count
    </button> 
    <button data-bind='click: sortByPrice'>
        Sort by Price
    </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: 20em; }
.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.3em; }
.ko-grid td{ background-color: White;}
.ko-grid tr{ background-color: #DDD; border: 5px solid silver;}

.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:30em; 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

(function () {
    // Private function
    function getColumnsForScaffolding(data) {
        if ((typeof data.length != 'number') || data.length == 0)
            return [];
        var columns = [];
        for (var propertyName in data[0])
            columns.push({ headerText: propertyName, rowText: propertyName });
        return columns;
    }

    ko.simpleGrid = {
        // Defines a view model class you can use to populate a grid
        viewModel: function (configuration) {
            this.data = configuration.data;
            this.currentPageIndex = ko.observable(0);
            this.pageSize = configuration.pageSize || 5;

            // If you don't specify columns configuration, we'll use scaffolding
            this.columns = configuration.columns || getColumnsForScaffolding(ko.utils.unwrapObservable(this.data)); 

            this.itemsOnCurrentPage = ko.dependentObservable(function () {
                var startIndex = this.pageSize * this.currentPageIndex();
                return this.data.slice(startIndex, startIndex + this.pageSize);
            }, this);

            this.maxPageIndex = ko.dependentObservable(function () {
                return Math.ceil(ko.utils.unwrapObservable(this.data).length / this.pageSize);
            }, this);
        }
    };

    // Templates used to render the grid
    var templateEngine = new ko.jqueryTmplTemplateEngine();
    templateEngine.addTemplate("ko_simpleGrid_grid", "\
                    <table class=\"ko-grid\" cellspacing=\"0\">\
                        <thead>\
                            <tr>\
                                {{each(i, columnDefinition) columns}}\
                               <th><a href=\"#\" data-bind=\"click: function() { columnDefinition.sortThis() }\" >${ columnDefinition.headerText }</a></th>\
                                {{/each}}\
                            </tr>\
                        </thead>\
                        <tbody>\
                           ...