Self-written jquery paging control (very simple and practical) _ jquery

Recently, I got a project, where jquery paging controls are needed, and paging controls are also found on the Internet. The usage of various methods is complicated, in the end, I decided to write a jquery paging control by myself. I was a trainer and recently got a project. I needed to use the jquery paging control and found the paging control for the Internet, the usage of various writing methods is complicated. In the end, I decided to write a jquery paging control by myself. It was all a trainer. Sorry, this paging control has been tested in chrome. I don't know how to test other compatibility. You are welcome to use the tool with the same requirements. If you find any problems during use, you are welcome to provide comments and suggestions.

Css:

@ Charset "utf-"; * {margin: px; padding: px; font-family: ""; 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 ;}. _ B Efore {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, options)} isShow. prototype = {showDiv: function () {this. bindEvent () ;}, showHtml: function () {var _ this = this, strHtml = "", count = Math. ceil (_ this. options. total/_ this. options. count); strHtml + ="

  <上一页< p>
 
 

  
  
"; For (var I =; I <= count; I ++) {strHtml + ="
  
  
_ This. options. maxpage? 'Dtid': '') +" '> "+ I +"
";} StrHtml + ="
 
 
Next page>
"; _ 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); 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 'La': _ this. $ element. find (". _ after "). hide (); _ this. $ element. find (". _ before "). show (); break; case 'middle': _ this. $ element. find ("p "). 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 content is a self-written jquery paging control (very simple and practical) shared by xiaobian. I hope it will help you.