Recently, do a the PC demand, there is a little point in this requirement, there is a list of the bottom of the page area, the list the amount of data is large, the paging control is required, switch the page number, send an ajax request, in the case of no refresh the page and list data refresh, so goes to the front page, I looked around on the web and found that open source plugins had dependencies, were too complex to use, or were a little hard to get started, so I figured it wouldn’t be too hard to write my own.

About the paging, at ordinary times is very common, but rarely need to diy demand, so it stays in the know should be so, but actually never how to explore the level, know should involve some logic, not should have no difficulty to implement, however, really when you set out to achieve, I know what it means to be beautiful.

A simple introduction

First, the effect picture:

Similar to the bottom page of Github’s search results page, some of the logic may be a little different, but the overall picture should be similar

Code using ES6 syntax, this plug-in is actually a class, Babel packaged compatible with IE9, native JS without any dependencies.

SimplePagination adds up to about 200 lines of code, but some of it is auxiliary, such as initializers, selectors, methods to add and remove classes, etc. After stripping out the blank lines, the core code is less than 100 lines.

The main judgment logic is in the gotoPage method, because it needs to take into account various situations, so there is a lot of if.. else… Judgment. Before I wrote this code, I thought it would be a few judgments at best, but I didn’t expect it to be so many. Every page switch corresponds to a different branch of judgment, which is quite tedious.

Brief analysis of core code

The core method is gotoPage, which, at first glance, is full of if… else.. No matter how the page number is changed, or how the page number is switched to, it is important to remember that when you switch to a page number, the status of the entire page component is determined. Once you grasp this point, the sequence of if… else… The meaning of the judgment is actually clear.

The outermost if… else… If the total number of pages is less than the number of pages that also exist on the page, then ellipsis is not needed. It is a relatively simple pagination, such as the following:

In this case, simply change the active page number when switching page numbers.

The other case, which requires ellipsis space, is where it gets complicated, and in this branch, there are three judgments in the outermost layer, and these three judgments cover all page switches.

The first judgment is for cases where the ellipsis placeholder on the left side of the paging component is not required, such as the following:

The second judgment is for cases where the ellipsis placeholder is not required to the right of the paging component, such as the following:

The third judgment is for cases where ellipsis placeholders are required on both sides of the paging component, such as the following:

All of the states of the entire paging component must be included in these three states, so the next logical decision needs to be made on these three states only.

usage

New the class, then call init and pass in the appropriate argument, for example:

const slp = new SimplePagination(12)
slp.init({
  container: '.box'.maxShowBtnCount: 3.onPageChange: state= > {console.log('pagination change:', state.pageNumber)}
})
Copy the code

When new instantiates SimplePagination, a parameter (totalPageCount) is passed in. The paging plug-in draws page elements according to this parameter.

When the init method is called, it receives an object with the following properties to facilitate parameter passing:

Parameter names type default instructions If required
container string body aDOMElement selector,idorclassEither, representing a container for paging no
maxShowBtnCount number 5 Excluding the two fixed buttons at the beginning and end, a maximum of several digital page number buttons can be displayed in the middle no
pCName string page-li Uniform class name for all paging page number elements, including previous and next pages no
activeCName string page-active The class name added when the page number is selectedclass no
dataNumberAttr string An attribute on a page number element whose value is the page number represented by the page number element data-number no
prevCName string page-prev Class name of the button on the previous pageclass no
nextCName string page-next Next page button class nameclass no
disbalePrevCName string no-prev The class name added to the button when disabling the availability of the button on the previous pageclass no
disbaleNextCName string no-next The class name to add to the button when disabling the availability of the next page buttonclass no
pageNumberCName string page-number Does not include uniform class names for all page number elements other than previous page, ellipsis placeholder buttons no
swEvent string click Trigger the event to switch pages no
onPageChange string – A callback function for page number switching no

In addition to switching pages based on the page number and the previous and next buttons, the plugin also has a gotoPage method that takes a parameter of type number and calls it to jump to the page number specified by this parameter, for example, to page 9:

slp.gotoPage(9)
Copy the code

If the argument passed is not a valid page number, nothing is done.

The working sample code for this article is available on Github for those interested

SimplePagination is a logical pagination class with a simple DOM structure. I created a style in the sample code that you can rewrite yourself if you don’t like it.