Home > Developer > Web Develop
In the project, a lot of times need paging control, pagination control itself is relatively simple to write, but to write a feature-rich paging control, it is troublesome, here is a good space, the number of pages too much, show the total number of pages, search for the specified page numbers.
GitHub Address: Https://github.com/superRaytin/paginationjs
Simple Demo Code:
<!DOCTYPE HTML><HTML><Head> <title>PAGINATIONJS Example</title> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"> <Linkhref=".. /dist/pagination.css "rel= "stylesheet"type= "Text/css"> <styletype= "Text/css">ul, Li{List-style:None; }#wrapper{width:900px;margin:20px Auto; }. Data-container{Margin-top:5px; }. Data-container ul{padding:0;margin:0; }. Data-container Li{Margin-bottom:5px;padding:5px 10px;background:#eee;Color:#666; } </style></Head><Body><DivID= "wrapper"></Div><Scriptsrc= "Http://code.jquery.com/jquery-1.8.2.min.js"></Script><Scriptsrc=".. /src/pagination.js "></Script><Script> vararr= []; for (varI=0; I< -; I++) {Arr.push (i)} console.log (arr);
arr.length for 100 explains the total number of paging needs is 100 this personal feeling is useless, it's better to give a specific value 100.
$('#wrapper'). Pagination ({Datasource:arr, callback:function(data, pagination) {/// callback function when we click on page execution Method Console.log (data,pagination)//pagination object has the currently selected number of pages we need 。
} })</Script></Body></HTML>
Look at the illustration:
The options in the pagination method only give a callback function, and the data source (that is, arr). We can pass on more parameters to define the paging device we need, as well as the API to control our paging control.
The API documentation can be viewed:
Https://github.com/superRaytin/paginationjs/blob/master/docs/cn.md
PAGINATIONJS a powerful paging control
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
