How to use KnockoutJS for adding client side paging to table ?

How to use KnockoutJS for adding client side paging to table ?

Asked on December 24, 2018 in knockout js.
Add Comment

  • 3 Answer(s)

        Showing the rows in the present page and bind the table is done by  the  Computed Observables . The user will slice the whole  rows for the page .

        Then, User have pager buttons/links that manage  the page index . This also affect the dependentObservable to be re-evaluated resulting in the present rows .

      Do similar to this :

    var myns = {};
    myns.DisplayFields = function(jsondata) {
        var viewModel = {
            fields: ko.observableArray(jsondata),
            sortByName: function() { //plus any custom functions I would like to perform
                this.items.sort(function(a, b) {
                    return a.Name < b.Name ? -1 : 1;
            pageSize: ko.observable(10),
            pageIndex: ko.observable(0),
            previousPage: function() {
                this.pageIndex(this.pageIndex() - 1);
            nextPage: function() {
                this.pageIndex(this.pageIndex() + 1);
        viewModel.maxPageIndex = ko.dependentObservable(function() {
            return Math.ceil(this.fields().length / this.pageSize()) - 1;
        }, viewModel);
        viewModel.pagedRows = ko.dependentObservable(function() {
            var size = this.pageSize();
            var start = this.pageIndex() * size;
            return this.fields.slice(start, start + size);
        }, viewModel);

        So, Try to bind  the   table to pagedRows .

    Answered on December 24, 2018.
    Add Comment

        Try this method for adding the client side paging to the table :

        This link provide  the source And this link provide the  working example.

        The ‘Pager’ class provide the every computations and some convenient properties, which the user can make  and bind to  .

        An example working template is provided in the  source example.html for some doc and usage .

    Answered on December 24, 2018.
    Add Comment

        This method adding the client side paging into table :

        Look at this for getting the information regarding this :  

      Backbone.Paginator is a group of opinionated components for paginating collections of data using Backbone.js.

        It aims to give  both solutions for assisting with pagination of requests to a server  as well as pagination of single-loads of data , where the user want to  paginate a collection of N results into M pages inside a view .

    Answered on December 24, 2018.
    Add Comment

  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.