Encapsulated javascript front-end paging plug-in pagination_javascript skills

Summary:
Recently, front-end paging has been used in development projects. It has been done before. For the convenience of future use, it is packaged as a third-party plug-in and does not rely on any library. There are already many plug-ins on the Internet, so why should we reinvent the wheel ourselves?

Written by myself and highly scalable
Does not depend on any libraries
As a technical precipitation

Let’s take a look at the renderings first

Installation method

First load css and js into the page

Usage examples

pagination({
Cur: 1, // Current page number
Total: 6, // How many pages in total
Len: 5, // How many pages to display
targetId: 'pagination', // Pagination element binding
​ callback: function() { ​
                // callback function                                    }  
})

Parameter introduction

cur

The current page number, each call passes the current paging

total

The total number of pages can be obtained based on the total number and the number displayed on each page

len

Quantity displayed on pagination bar

targetId

Page element binding

callback

Function executed after page rendering is completed, such as event binding, etc.

tips

The demo uses static data. If you call the server-side data, you only need to change the for loop in the index.js file to an Ajax request.

Download

http://xiazai.jb51.net/201601/yuanma/pagination-master(jb51.net).zip

Demo

http://demo.jb51.net/js/2016/pagination-master/