Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to achieve paging effect based on native JS". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to achieve paging effect based on native JS" can help you solve the problem.

The effect after realization

First of all, you need to initialize some basic properties of the object, display the total page number, the number of pages displayed in the middle, add a callback function, activate the callback function when the page changes and return the current page and some other parameters init initializes the object (all the parameters can be written alive, so I'm lazy here, so I'm dead). The z_page in this can then be the total number of pages returned by the API.

Function Page (obj) {this.obj = obj | | {page:1,page_count: 0}; this.z_page = 7; / / the total number of pages displayed this.show_page = this.z_page-2; / / the number of pages shown in the middle must be a good-looking base this.fn = this.obj.block; this.init ()}

In the initialization method of init, it is mainly to judge

1 whether the total number of pages is less than the display page (this is mainly to judge whether the ellipsis is displayed, it is troublesome to add the ellipsis, this is the total number of pages is less, do not need to add)

2 the current number of pages + the average displayed (show_page/2-1) + 1 compared with the total page, this main judgment ellipsis is preceded by an ellipsis in the previous question (near the last page)

The average (show_page/2-1) + 2 (first 1 and last book) displayed around 3 is greater than the current number of pages (near the home page)

The first picture (followed by an ellipsis)

4 the remaining state is the intermediate state (with ellipses on both sides)

In fact, this judgment is also to judge the boundary conditions of our paging. If this is thought out and implemented, it is equivalent to half of the initialization method is completed. Finally, we have to add click events to the previous page and the next page, and do the implementation of the corresponding logic processing code.

Page.prototype.create = function () {/ / page:1 page_count 17 / / ensure that the number of pages clicked is in the middle var ping = (this.show_page-1) / 2; / / the average displayed around is in the middle var num = this.obj.page-ping / / minimum page number var endnum = (this.obj.page+ping) > this.obj.page_count?this.obj.page_count: (this.obj.page+ping) / / maximum page number console.log (endnum); var pageID = document.getElementById ('pageID'); var self= this; pageID [XSS _ clean] ='' Num= num= (this.obj.page)) {/ / 3 is close to the home page pageID.appendChild (this.nearHome ()) console.log ('near home page')} else {console.log (num,endnum); pageID.appendChild (this.centerPage (num,endnum)) } _ document.onclick = function (event) {switch (event.target.className) {case 'previous': self._previous (); break; case' next': self._next (); break; default: self.clickLi (event.target) } self.fn (self.obj.page)}}

The rest is just logic and dom operation, because I use the native js, here is the document fragment, put all the dom I generated into the document fragment, and then return it one time to append directly to the body. This is my method code.

Page.prototype.nearBack = function () {var oFragmeng = document.createDocumentFragment (); / / create a document fragment var ul = document.createElement ('ul') var Div = oFragmeng.appendChild (ul); Div [XSS _ clean] =' 1mm; for (var m = (this.obj.page_count- this.show_page); m

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.