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

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

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. 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. cou Nt); strHtml + = "<div class = '" + (_ this. options. float = 'right '? '_ Right':' _ left ') + "'> <div class =' _ before Hidden '> <previous page </div> <ul class =' _ ul'>"; for (var I =; I <= count; I ++) {strHtml + = "<li data-index = '" + (I =? 'Frist': I = count? 'Last': 'ddle') + "'class = '" + (I =? '_ Select': '') +" "+ (I> _ this. options. maxpage? 'Ddden ': '') +"'> "+ 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/; 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 ("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 content is a self-written jquery paging control (very simple and practical) shared by xiaobian. I hope it will help you.