Knockoutjs.com - Paged grid

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

by Nathan Fisher

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.3.0.js"></script>
<script src="http://knockoutjs.com/examples/resources/knockout.simpleGrid.1.3.js"></script>
<div>
    <button data-bind='click: update'>Get Data</button>
</div>
<div id="divLanguage" style="overflow: hidden;">
    <table style="width: 760px;">
        <tr>
            <td style="padding: 0px;width: 100px;font-weight: bold">name</td>
            <td style="padding: 0px;width: 70px;font-weight: bold">select</td>
        </tr>
    </table>
    <div id="language" style="overflow: auto;height: 540px;">
        <table id="Table1" class="gridHover" style="width: 760px;">
            <tbody data-bind="foreach: queryResult">
                <tr>
                    <td style="padding: 0px;text-align: left;width: 100px" data-bind="text: name"></td>
                    <td style="padding: 0px;text-align: left;width: 70px">
                        <input type="checkbox" data-bind="checked: selected" />
                    </td>
                </tr>
            </tbody>
        </table>
        <fieldset>
            <legend>Selected Items</legend>
            <ul data-bind="foreach: selectedItems">
                <li data-bind="text: name"></li>
            </ul>
        </fieldset>
    </div>
   
</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:nth-child(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 initialData = [{
    id: 1,
    name: "Well-Travelled Kitten",
    sales: 352,
    price: 75.95,
    whatever: 10
}, {
    id: 2,
    name: "Speedy Coyote",
    sales: 89,
    price: 190.00,
    whatever: 100
}];

var MyModel = function (data) {
    var self = this;
    self.id = ko.observable(data.id || '');
    self.name = ko.observable(data.name || '');
    self.price = ko.observable(data.price || 0.0);
    self.sales = ko.observable(data.sales || 0);
    self.whatever = ko.observable(data.whatever || '');
    self.selected = ko.observable(false);
    return self;
};

    function viewModel() {
        var self = this;
        self.queryResult = ko.observableArray();
        self.update = function (data) {
            //this is an ajax call and return dateset back
            $.each(initialData, function (index, item) {
                self.queryResult.push(new MyModel(item));
            });
        };

        self.selectedItems = ko.computed({
            read: function () {
                return ko.utils.arrayFilter(self.queryResult(), function (item) {
                    return item.selected() === true;
                });
            },
            deferEvaluation: false
        });
    }


ko.applyBindings(new viewModel());