Write your own jquery paging control (very simple and practical) _jquery

Recently received a project, which has the need to use the jquery paging control, the Internet also found the need for pagination control, various ways of writing various usages, are very complex, and finally decided to write a jquery paging control, all when practicing practicing. Write a bad, also please forgive me, this page control in the Chrome test, other compatibility do not know how to have time to test it. The use of small partners with the same needs is welcome, and there are problems in using the process that are welcome to make critical suggestions.

Css:

@charset "utf-";
* {
margin:px;
padding:px;
font-family: "Microsoft Ya hei";
Font-size:px
}
. _ul {
float:left;
height:px;
Display:block
}
. _ul li {
list-style-type:none;
height:px;
width:px;
BORDER:PX solid #eee;
Cursor:pointer;
Text-align:center;
line-height:px;
Color:blue;
Float:left;
Margin:px
}
. _ul Li:hover,._before:hover,._after:hover {
border:px solid #f;
Background: #ffff;

Li-hover {
border:px solid #f;
Background: #ffff;

_before {
width:px;
height:px;
BORDER:PX solid #eee;
Float:left;
Cursor:pointer;
Text-align:center;
line-height:px;
Color:blue;
Margin:px
}
. _after {
width:px;
height:px;
BORDER:PX solid #eee;
Float:left;
Cursor:pointer;
Text-align:center;
line-height:px;
Color:blue;
Margin:px
}

. Hidden {
Display:none
}
. _select {
border:px solid #fff!important;
Color:black!important
}
. _left {
float:left;
Margin-left:px
}
. _right {
float:right;
margin-right:px;
}

Js:

;
(Function ($, window, document, undefined) {var isshow = function (ele,options) {this. $element = ele, This.defaults = { Maxpage:, Count:, Total:, float: ' Right ', margin: ' px ', getdata:null}, This.options = $.extend ({}, This.defaults, Optio NS)} isshow.prototype={showdiv:function () {this.bindevent ();}, Showhtml:function () {var _this = this, strhtml = "", Coun
T=math.ceil (_this.options.total/_this.options.count); strHTML + = "<div class= '" + (_this.options.float== ' right '? ')
_right ': ' _left ') + "' ><div class= ' _before Hidden ' >< prev </div><ul ' class= ' >"; for (var i =; I <= count; i++) {strhtml = "<li data-index= '" + (i==?) Frist ': I==count? ' Last ': ' Middle ') + "' class= '" + (i==?) _select ': ') + "" + (I>_this.options.maxpage?)
Hidden ': ') + "' >" +i+ "</li>";
} strhtml + = "</ul><div class= ' _after ' > Next ></div></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/;
var Curr = _this. $element. Find ("Li"); if (count <= _index) {$ (Curr). Show ();} else {var ftemp =, ltemp=; if (Index < middle) ftemp = (middle-index);
F (Middle > Count-index) ltemp= (middle-(Count-index)); $ (Curr). each (function () {var currindex = parseint ($ (this). text ()); if (Currindex > Index-middle-ltemp && cu
Rrindex <= parseint (index) + parseint (middle) +ftemp) {$ (a). 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 ' Middle ': _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);

The above is a small compilation of your own hands-on jquery paging control (very simple and practical), I hope to help you.