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);
        ko.applyBindings(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   https://github.com/remcoros/ko.pager provide  the source And this link  http://remcoros.github.com/ko.pager/example.html 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 : https://github.com/addyosmani/backbone.paginator  

      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.