ko.datasource

Datasource Components for KnockoutJs for paging, sorting and filtering remote sources. Included enable/disable of pager buttons based on page index and total count

by jwstott

HTML

<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/knockout-latest.debug.js"></script>
<script src="https://raw.github.com/CraigCav/ko.datasource/master/ko.datasource.js"></script>
<table>
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Sales</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: items">
        <tr>
            <td data-bind="text: id"></td>
            <td data-bind="text: name"></td>
            <td data-bind="text: sales"></td>
            <td data-bind="text: price"></td>
        </tr>
    </tbody>            
</table>

<span id="pager">
    <button data-bind="enable: items.pager.page() > 1, click: items.pager.first">First</button>
    <button data-bind="enable: items.pager.page() > 1,click: items.pager.previous">Prev</button>
    <span class="summary">Page 
        <span data-bind="text: items.pager.page"></span> of 
        <span data-bind="text: items.pager.totalPages"></span></span>
    <button data-bind="enable: items.pager.page() < items.pager.totalPages(), click: items.pager.next">Next</button>
    <button data-bind="enable: items.pager.page() < items.pager.totalPages(), click: items.pager.last">Last</button>
</span>

CSS

th, td { padding: 0.5em; }
.summary { margin: 0px 10px;}

JavaScript

var initialData = [
    {
    id: 1,
    name: "Well-Travelled Kitten",
    sales: 352,
    price: 75.95},
{
    id: 2,
    name: "Speedy Coyote",
    sales: 89,
    price: 190.00},
{
    id: 3,
    name: "Furious Lizard",
    sales: 152,
    price: 25.00},
{
    id: 4,
    name: "Indifferent Monkey",
    sales: 1,
    price: 99.95},
{
    id: 5,
    name: "Brooding Dragon",
    sales: 0,
    price: 6350},
{
    id: 6,
    name: "Ingenious Tadpole",
    sales: 39450,
    price: 0.35},
{
    id: 7,
    name: "Optimistic Snail",
    sales: 420,
    price: 1.50}
];

function getAnimals() {
    var params = {
        limit: this.pager.limit(),
        startIndex: this.pager.limit() * (this.pager.page() - 1)
    };

    $.ajax({
        type: 'POST',
        url: '/echo/json/',
        data: {
            json: ko.toJSON(initialData.slice(params.startIndex, params.startIndex + params.limit))
        },
        context: this,
        success: function(data) {
            this(data);
            this.pager.totalCount(7);
        },
        dataType: 'json'
    });
};

var viewModel = {
    items: ko.observableArray([]).extend({
        datasource: getAnimals,
        pager: {
            limit: 3
        }
    })
};

ko.applyBindings(viewModel);