Simple jQuery paging control and jquery paging Control

Simple jQuery paging control and jquery paging Control

Because it is an internal project and requires paging controls, I found a lot on the Internet and told the leaders that they couldn't do it. The reason is very simple and complicated. The leaders wanted a simple one, similar to Baidu's paging, but I have never written the Jquery control. I tried to find some information and wrote this paging control. Currently, I only tested it in chrome. I do not know the compatibility of other pages, at last, I will write plug-ins myself. Although it is very bad, it is also progress. The attachment, source code, and some people may have the same requirements to use. Thank you for your correction and criticism !!

 

Css:

@ Charset "UTF-8 ";
*{
Margin: 0px;
Padding: 0px;
Font-family: "";
Font-size: 14px;
}
. _ Ul {
Float: left;
Height: 38px;
Display: block;
}
. _ Ul li {
List-style-type: none;
Height: 36px;
Width: 36px;
Border: 1px solid # e1e2e3;
Cursor: pointer;
Text-align: center;
Line-height: 36px;
Color: blue;
Float: left;
Margin: 0 3px;
}
. _ Ul li: hover,. _ before: hover,. _ after: hover {
Border: 1px solid # 38f;
Background: # f2f8ff;
}

. Li-hover {
Border: 1px solid # 38f;
Background: # f2f8ff;
}

. _ Before {
Width: 86px;
Height: 36px;
Border: 1px solid # e1e2e3;
Float: left;
Cursor: pointer;
Text-align: center;
Line-height: 36px;
Color: blue;
Margin: 0 3px;
}
. _ After {
Width: 86px;
Height: 36px;
Border: 1px solid # e1e2e3;
Float: left;
Cursor: pointer;
Text-align: center;
Line-height: 36px;
Color: blue;
Margin: 0 3px;
}

. Hidden {
Display: none;
}
. _ Select {
Border: 1px solid # fff! Important;
Color: black! Important;
}
. _ Left {
Float: left;
Margin-left: 200px;
}
. _ Right {
Float: right;
Margin-right: 200px;
}

 

Js:

; (Function ($, window, document, undefined ){
Var isShow = function (ele, options ){
This. $ element = ele,
This. defaults = {
Maxpage: 10,
Count: 0,
Total: 0,
Float: 'right ',
Margin: '200px ',
GetData: null
},
This. options = $. extend ({}, this. defaults, options)
}
IsShow. prototype = {
ShowDiv: function (){
This. bindEvent ();
},
ShowHtml: function (){
Var _ this = this, strHtml = "", count = Math. ceil (_ this. options. total/_ this. options. count );
StrHtml + = "<div class = '" + (_ this. options. float = 'right '? '_ Right':' _ left ') + "'> <div class =' _ before Hidden '> <previous page </div> <ul class =' _ ul'> ";
For (var I = 1; I <= count; I ++ ){
StrHtml + = "<li data-index = '" + (I = 1? 'Frist': I = count? 'Last': 'ddle') + "'class = '" + (I = 1? '_ Select': '') +" "+ (I> _ this. options. maxpage? 'Dtid': '') +" '> "+ I +" </li> ";
}
StrHtml + = "</ul> <div class = '_ after'> next page> </div> ";
_ This. $ element. append (strHtml );
},
MoveIndex: function (index ){
Var _ this = this, _ index = this. options. maxpage, count = Math. ceil (_ this. options. total/_ this. options. count );
Var middle = _ index/2;
Var curr = _ this. $ element. find ("li ");
If (count <= _ index ){
$ (Curr). show ();
} Else {
Var ftemp = 0, ltemp = 0;
If (index <middle)
Ftemp = (middle-index );
If (middle> count-index)
Ltemp = (middle-(count-index ));
$ (Curr). each (function (){
Var currindex = parseInt ($ (this). text ());
If (currindex> index-middle-ltemp & currindex <= parseInt (index) + parseInt (middle) + ftemp ){
$ (This). show ();
} Else {
$ (This). hide ();
}
});
}
},
WhichFind: function (status, _ index ){
Var _ this = this;
Switch (status ){
Case 'frist ':
_ This. $ element. find (". _ before"). hide ();
_ This. $ element. find (". _ after"). show ();
Break;
Case 'last ':
_ This. $ element. find (". _ after"). hide ();
_ This. $ element. find (". _ before"). show ();
Break;
Case 'ddle ':
_ This. $ element. find ("div"). show ();
Break;
}
_ This. MoveIndex (_ index );
_ This. options. getData ({index: _ index });
},
BindEvent: function (){
Var _ this = this;
_ This. showHtml ();
_ This. $ element. find ("li"). click (function (){
Var status = $ (this). data ("index"), _ index = $ (this). text ();
$ (This). addClass ("_ select"). siblings (). removeClass ("_ select ");
_ This. WhichFind (status, _ index );
});

_ This. $ element. find (". _ before"). click (function (){
Var status = $ (". _ select "). prev (). data ("index"), _ index = $ (". _ select "). prev (). text ();
$ (". _ Select"). prev (). addClass ("_ select"). siblings (). removeClass ("_ select ");
_ This. WhichFind (status, _ index );
});

_ This. $ element. find (". _ after"). click (function (){
Var status = $ (". _ select "). next (). data ("index"), _ index = $ (". _ select "). next (). text ();
$ (". _ Select"). next (). addClass ("_ select"). siblings (). removeClass ("_ select ");
_ This. WhichFind (status, _ index );
});
}
}
$. Fn. FY = function (option ){
Var fs = new isShow (this, option );
Return fs. showDiv ();
}
}) (JQuery, window, document );