Knockoutjs.com - Paged grid

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

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" />
                    </td>
                    
                </tr>
            </tbody>
        </table>
    </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
}, ];

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

    };

}


ko.applyBindings(new viewModel());