Share a simple javascript paging component written by yourself
This article mainly shares a simple javascript paging component written by myself. The results are very good and the code is very detailed. We recommend it to our friends here.
A simple paging component written by myself. The main functions and implementations are all in JS. Only one DIV for generating pagination is added to the html page and the container id is given.
The html structure is as follows:
The Code is as follows:
<Ul class = "pagination" id = "pageDIV">
</Ul>
Class = "pagination" specifies the paging style,
Id = "pageDIV" is used to place the pages generated by JS.
The CSS structure is as follows:
The Code is as follows:
. Pagination {
Margin-top: 10px;
Margin-bottom: 10px;
Display: inline-block;
Padding-left: 0;
Margin: 20px 0;
Border-radius: 4px;
}
. Pagination> li {
Display: inline;
}
. Pagination> li: first-child> {
Margin-left: 0;
Border-top-left-radius: 4px;
Border-bottom-left-radius: 4px;
}
. Pagination> li> {
Position: relative;
Float: left;
Padding: 6px 12px;
Margin-left:-1px;
Line-height: 1.42857143;
Color: #337ab7;
Text-decoration: none;
Background-color: # fff;
Border: 1px solid # ddd;
Cursor: pointer;
}
. Pagination> li> a. navcur {
Background: # cccccc;
Color: # ffffff;
}
The following is the JS structure. Be sure to reference JQuery
The Code is as follows:
/**
* @ PageContentID: The DIV element of the pagination.
* @ CurPage current start page
* @ TotalCount total count
* @ PageRows: number of entries displayed per page
* @ Callback: callback function for displaying data
*/
Function PageList (pageContentID, option ){
This. pageContentID = document. getElementById (pageContentID );
This. curPage = option. curPage;
This. totalCount = option. totalCount;
This. pageRows = option. pageRows;
This. callback = option. callback;
This. pageSize = Math. ceil (this. totalCount/this. pageRows );
}
PageList. prototype = {
Init: function (){
This. renderbtn ();
},
Firstpage: function (){
Var _ self = this;
_ Self. _ firstpage = document. createElement ("li ");
_ Self. _ firstpageA = document. createElement ("");
_ Self. _ firstpageA. innerHTML = "Homepage ";
_ Self. _ firstpage. appendChild (_ self. _ firstpageA );
This. pageContentID. appendChild (_ self. _ firstpage );
_ Self. _ firstpage. onclick = function (){
_ Self. gotopage (1 );
}
},
Lastpage: function (){
Var _ self = this;
_ Self. _ lastpage = document. createElement ("li ");
_ Self. _ lastpageA = document. createElement ("");
_ Self. _ lastpageA. innerHTML = "last page ";
_ Self. _ lastpage. appendChild (_ self. _ lastpageA );
This. pageContentID. appendChild (_ self. _ lastpage );
_ Self. _ lastpage. onclick = function (){
_ Self. gotopage (_ self. pageSize );
}
},
Prewpage: function (){
Var _ self = this;
_ Self. _ prew = document. createElement ("li ");
_ Self. _ prewA = document. createElement ("");
_ Self. _ prewA. innerHTML = "<";
_ Self. _ prew. appendChild (_ self. _ prewA );
This. pageContentID. appendChild (_ self. _ prew );
_ Self. _ prew. onclick = function (){
If (_ self. curPage> 1 ){
_ Self. curPage --;
}
_ Self. callback. call (this, this. curPage );
_ Self. init ();
Console. log (_ self. curPage );
}
},
Nextpage: function (){
Var _ self = this;
_ Self. _ next = document. createElement ("li ");
_ Self. _ nextA = document. createElement ("");
_ Self. _ nextA. innerHTML = "> ";
_ Self. _ next. appendChild (_ self. _ nextA );
This. pageContentID. appendChild (_ self. _ next );
_ Self. _ next. onclick = function (){
If (_ self. curPage <_ self. pageSize ){
_ Self. curPage ++;
}
_ Self. callback. call (this, this. curPage );
_ Self. init ();
Console. log (_ self. curPage );
}
},
Pagenum: function (){
Var _ self = this;
If (this. pageSize <= 10 ){
For (var I = 1, len = this. pageSize; I <= len; I ++ ){
_ Self. _ num = document. createElement ("li ");
_ Self. _ numA = document. createElement ("");
_ Self. _ numA. innerHTML = I;
_ Self. _ num. appendChild (_ self. _ numA );
This. pageContentID. appendChild (_ self. _ num );
_ Self. _ num. onclick = function (){
Var curpage = $ (this). text ();
_ Self. gotopage (curpage );
}
}
}
Else {
If (_ self. curPage <= 10 ){
For (var I = 1; I <= 10; I ++ ){
_ Self. _ num = document. createElement ("li ");
_ Self. _ numA = document. createElement ("");
_ Self. _ numA. innerHTML = I;
_ Self. _ num. appendChild (_ self. _ numA );
This. pageContentID. appendChild (_ self. _ num );
_ Self. _ num. onclick = function (){
Var curpage = $ (this). text ();
_ Self. gotopage (curpage );
}
}
}
Else if (_ self. curPage> 10 & _ self. curPage <= this. pageSize ){
If (this. pageSize <Math. ceil (_ self. curPage/10) * 10 ){
For (var I = Math. floor (_ self. curPage/10) * 10 + 1; I <= this. pageSize; I ++ ){
If (_ self. curPage> this. pageSize)
Return;
_ Self. _ num = document. createElement ("li ");
_ Self. _ numA = document. createElement ("");
_ Self. _ numA. innerHTML = I;
_ Self. _ num. appendChild (_ self. _ numA );
This. pageContentID. appendChild (_ self. _ num );
_ Self. _ num. onclick = function (){
Var curpage = $ (this). text ();
_ Self. gotopage (curpage );
}
}
} Else {
If (Math. ceil (_ self. curPage/10) * 10 = _ self. curPage ){
For (var I = _ self. curPage-9; I <= _ self. curPage; I ++ ){
_ Self. _ num = document. createElement ("li ");
_ Self. _ numA = document. createElement ("");
_ Self. _ numA. innerHTML = I;
_ Self. _ num. appendChild (_ self. _ numA );
This. pageContentID. appendChild (_ self. _ num );
_ Self. _ num. onclick = function (){
Var curpage = $ (this). text ();
_ Self. gotopage (curpage );
}
}
} Else {
For (var I = Math. floor (_ self. curPage/10) * 10 + 1; I <= Math. ceil (_ self. curPage/10) * 10; I ++ ){
_ Self. _ num = document. createElement ("li ");
_ Self. _ numA = document. createElement ("");
_ Self. _ numA. innerHTML = I;
_ Self. _ num. appendChild (_ self. _ numA );
This. pageContentID. appendChild (_ self. _ num );
_ Self. _ num. onclick = function (){
Var curpage = $ (this). text ();
_ Self. gotopage (curpage );
}
}
}
}
}
}
$ (". Pagination li"). each (function (){
If ($ (this) [0]. innerText = _ self. curPage ){
$ (". Pagination li"). children ("a"). removeClass ("navcur ");
$ (This). children ("a"). addClass ("navcur ");
}
});
},
Gotopage: function (curpage ){
This. curPage = curpage;
This. callback. call (this, this. curPage );
This. init ();
Console. log (this. curPage );
},
Renderbtn: function (){
$ (". Pagination" pai.html ("");
This. firstpage ();
This. prewpage ();
This. pagenum ();
This. nextpage ();
This. lastpage ();
}
};
$ (Function (){
Var pager = new PageList ("pageDIV ",{
CurPage: 1,
TotalCount: 26,
PageRows: 1,
Callback: callbackFuc
});
Pager. init ();
});
Function callbackFuc (curpage ){
}
Note:
This page is based on 10 pages. All pages are displayed when there are less than 10 pages, and the remaining pages are displayed when there are more than 10 pages.
Call method:
The Code is as follows:
$ (Function (){
Var pager = new PageList ("pageDIV ",{
CurPage: 1,
TotalCount: 26,
PageRows: 1,
Callback: callbackFuc
});
Pager. init ();
});
The above is the core code of this paging component. I hope my friends will like it.
