Skip to content
Datasource Components for KnockoutJs for paging, sorting and filtering remote sources.
Find file
Latest commit 8730584 Jul 25, 2013 @CraigCav Merge pull request #3 from agrath/patch-1
Add additional properties to Pager
Failed to load latest commit information.


Datasource Components for KnockoutJs for paging, sorting and filtering remote sources.

Getting started

  1. Include knockout and ko.datasource on your page.

    <script src=""></script>
    <script src=""></script>
  2. Specify your markup as if you were binding to a standard observable or observableArray.

        <tbody data-bind="foreach: items">
                <td data-bind="text: id"></td>
                <td data-bind="text: name"></td>
                <td data-bind="text: sales"></td>
                <td data-bind="text: price"></td>

    2b. Optionally specify a pager if desired.

    <span id="pager">
        <button data-bind="click: items.pager.first">First</button>
        <button data-bind="click: items.pager.previous">Prev</button>
        <span class="summary">Page 
            <span data-bind="text:"></span> of 
            <span data-bind="text: items.pager.totalPages"></span></span>
        <button data-bind="click:">Next</button>
        <button data-bind="click: items.pager.last">Last</button>
  3. Extend an observable or observableArray with the datasource. The single parameter is a function that provides your data. Optionally include the pager extender to add paging support.

    var viewModel = {
        items: ko.observableArray([]).extend({
            datasource: getAnimals, //getAnimals is a data service to populate the viewmodel
            pager: {
                limit: 3
  4. Apply Bindings

  5. Enjoy!

Live Sample

Sample usage:

More Info:


None of this would've been possible without the inspiring work Ryan Niemeyer put into documenting KnockoutJS. In particular without the following two posts, this plugin wouldn't exist.


MIT license -

Something went wrong with that request. Please try again.