Using Knockoutjs+bootstrap for paging

First, Introduction

As a result of the recent company's system needs revision, the revised new system I intend to use Knockoutjs to make the Web front end. In the process of doing, encountered a problem-how to use Knockoutjs to complete the paging function. In the previous article, there was no introduction to using Knockoutjs to implement paging, so in this article, we will supplement the knockoutjs+bootstrap to achieve the pagination of the data.

Second, the use of KNOCKOUTJS to achieve paging

Here are two ways to implement paging, the first is to load all the data, and then all the data is paginated, the second is to load only part of the data each time, each request reloads the subsequent data.

For both of these ways, the use of the Razor method of paging is generally implemented in the second way to achieve paging, but for a single-page program, the first implementation has its advantages, for not very large amounts of data can be fully implemented in the first implementation, because in this case, the subsequent loading of data, The user experience is very fluid. So here are two ways to do this.

2.1 Implementation of partial data per load

The backend code here uses the code from the previous article, just adding some sample data. The specific back-end implementation code is:

View Code

Implementation code for the Web front-end:

@{viewbag.title = "Index2"; Layout = "~/views/shared/_layout.cshtml";} <div id= "List2" > 
The corresponding JS implementation is:
The second way of implementing paging is var ListViewModel2 = function () {//viewmodel itself.    Used to prevent the direct use of this when the scope of the chaotic var = this;    Self.loadingstate = Ko.observable (true);    Self.pagesize = ko.observable (3);    Data This.pagedlist = Ko.observablearray ();    The page number to access This.pageindex = ko.observable (1);    Total pages This.pagecount = ko.observable (1);    Number of pages This.allpages = Ko.observablearray ();    Current page This.currengepage = ko.observable (1);    Self.totalcount = ko.observable (1);        This.refresh = function () {///limit the requested page number within the data page range if (Self.pageindex () < 1) self.pageindex (1);        if (Self.pageindex () > Self.pagecount ()) {Self.pageindex (Self.pagecount ()); //post asynchronously loads the data sendajaxrequest ("GET", function (data) {/////before loading new data, first remove the original data self.paged            List.removeall ();            Self.allPages.removeAll ();            Self.totalcount (Data.totalcount);            Self.pagecount (Data.pagecount); Self.loadingstate (False);             for (var i = 1; I <= data.pagecount; i++) {//Reload page number Self.allPages.push ({pagenumber:i});            The//for...in statement is used to loop through the properties of an array or an object.            The code for the for ... in loop executes once for each time, and the elements of the array or the properties of the object are manipulated once.            for (var i in data.pageddata) {//Reload Data Self.pagedList.push (Data.pageddata[i]);    }}, ' Getbypaged ', {' PageIndex ': Self.pageindex ()});        };        Request the first page of data This.first = function () {self.pageindex (1);    Self.refresh ();    };        Request the next page of data This.next = function () {Self.pageindex (This.pageindex () + 1);    Self.refresh ();        };        Request a previous page of data this.previous = function () {Self.pageindex (This.pageindex ()-1);    Self.refresh ();    };        Request last page Data This.last = function () {Self.pageindex (This.pagecount ()-1);    Self.refresh ();        };      Jump to a page this.gotopage = function (data, event) {self.pageindex (data);  Self.refresh (); };}; function Sendajaxrequest (HttpMethod, callback, URL, reqdata) {$.ajax ("/api/task" + (URL?) "/" + URL: ""), {type:httpmethod, Success:callback, Data:reqdata});}    $ (document). Ready (function () {var viewModel = new ListViewModel2 ();    Viewmodel.refresh (); if ($ (' #list2 '). Length) Ko.applybindings (ViewModel, $ (' #list2 '). Get (0));});
This article introduces the realization of the paging function using Knockoutjs:

 

  
 
   
After the page is loaded, an AJAX request is initiated to invoke the rest service asynchronously to request some data.
 
   
The requested data is then displayed through the Knockoutjs binding.
 
   
Bind the corresponding paging information to bootstrap page
 
   
When the user clicks the page, it initiates an AJAX request to invoke the rest service request data asynchronously and then displays the requested data.
 
  
 
This is the description of the code to call the logical relationship, you can refer to the corresponding JS code to understand the above description. This is the second way to achieve the implementation of the completion.
2.2 Load all data for the first time and then display all data paginated
　　The next introduction of the first implementation, so that the user will only be the first time to feel the data load, the page in the process of not feel the load, so for some of its own data is not too many cases, the user feel is more fluent.
The specific implementation of the idea, that is, the requested data is not all displayed on the page, because the data too much, suddenly displayed to the page, users may be dazzled. Paging the data will make the user view clearer.
The specific web front-end JS implementation code is:
var Listviewmodel = function () {var = this;    Window.viewmodel = self;    Self.list = Ko.observablearray ();     Self.pagesize = ko.observable (3); Self.pageindex = ko.observable (0); The page number to access Self.totalcount = ko.observable (1);        Total number of records self.loadingstate = Ko.observable (true);        Self.pagedlist = ko.dependentobservable (function () {var size = self.pagesize ();        var start = Self.pageindex () * size;    Return Self.list.slice (Start, start + size);        }); Self.maxpageindex = ko.dependentobservable (function () {return Math.ceil (Self.list (). Length/self.pagesize ())-1    ;    });        Self.previouspage = function () {if (Self.pageindex () > 0) {self.pageindex (Self.pageindex ()-1);    }    }; Self.nextpage = function () {if (Self.pageindex () < Self.maxpageindex ()) {Self.pageindex (self.pagei        Ndex () + 1);    }    }; Self.allpages = ko.dependentobservable (function () {var pages = [];        for (var i = 0; I <= self.maxpageindex (); i++) {Pages.push ({pagenumber: (i + 1)});    } return pages;    });    Self.movetopage = function (index) {self.pageindex (index); };}; var Listviewmodel = new Listviewmodel (), function Bindviewmodel () {sendajaxrequest ("GET", function (data) {List        Viewmodel.loadingstate (FALSE);        Listviewmodel.list (data);        Listviewmodel.totalcount (data.length);    if ($ (' #list '). Length) Ko.applybindings (Listviewmodel, $ (' #list '). Get (0)); }, NULL, NULL);}   $ (document). Ready (function () {Bindviewmodel (); });
The implementation of its front-end page is similar to the previous implementation. The specific page code is as follows:
View CodeThird, the Operation effect
Next, let's look at the paging effect implemented using Knockoutjs:
Iv. Summary
Here, the article to introduce the end, although the content of the implementation of this article is relatively simple, but for some people just contact Knockoutjs, I believe this article will be a lot of guidance to achieve. Next, I will share with you the next Angularjs content.
This article all source code realization: knockoutjspaged
Using Knockoutjs+bootstrap for paging