Using the pagination plug-in implemented by JQuery _ jquery

This article summarizes several paging plug-ins implemented using jQuery. The results are very good. For more information, see. A simple jQuery paging plug-in that is compatible with AMD specifications and requireJS.

/*** JQuery paging plug-in **/; (function (factory) {if (typeof define = "function" & define. amd) {// AMD mode define (["jquery"], factory);} else {// global mode factory (jQuery) ;}( function ($) {// define the constructor MyPagePlugin = function (ele, option) {// this. viewHtml ="
 
  
 

   
  
«
   
  
Bytes ‹
   
  
Page, total page
   
  
›
   
  
»
  
 
 "; This. viewHtml ="
» Refer page, total page ›»
"This. $ element = ele;/** parameter: page: Current page, pageCount: total page number. The onPaged callback function will input the page number */this. defaults = {page: 1, pageCount: 1, onPaged: function (pageNo) {}}; this. options = $. extend ({}, this. defaults, option);} // defines the MyPagePlugin method. prototype = {initPlugin: function () {this. $ element. empty (); this. $ element. append (this. viewHtml); this. options. onPaged (this. options. page); // initialize this. $ element. find (". curPageNoSpan "). text (this. options. page); this. $ element. find (". curPageNoSpan "). data ("options", this. options); this. $ element. find (". allPageCountSpan "). text (this. options. pageCount); this. $ element. find (". firstPageli "). on ("click", function (e) {var curNo = $ (e. currentTarget ). parent ("p. pageplugin "). find (". curPageNoSpan "). text (); curNo = parseInt (curNo); if (curNo = 1) {return false;} else {$ (e. currentTarget ). parent ("p. pageplugin "). find (". curPageNoSpan "). data ("options "). onPaged (1); $ (e. currentTarget ). parent ("p. pageplugin "). find (". curPageNoSpan "). text (1) ;}return false ;}); this. $ element. find (". prevPageli "). on ("click", function (e) {var curNo = $ (e. currentTarget ). parent ("p. pageplugin "). find (". curPageNoSpan "). text (); curNo = parseInt (curNo); if (curNo = 1) {return false;} else {$ (e. currentTarget ). parent ("p. pageplugin "). find (". curPageNoSpan "). data ("options "). onPaged (curNo-1); $ (e. currentTarget ). parent ("p. pageplugin "). find (". curPageNoSpan "). text (curNo-1) ;}return false ;}); this. $ element. find (". nextPageli "). on ("click", function (e) {var curNo = $ (e. currentTarget ). parent ("p. pageplugin "). find (". curPageNoSpan "). text (); curNo = parseInt (curNo); var pageCount = $ (e. currentTarget ). parent ("p. pageplugin "). find (". allPageCountSpan "). text (); pageCount = parseInt (pageCount); if (curNo = pageCount) {return false;} else {$ (e. currentTarget ). parent ("p. pageplugin "). find (". curPageNoSpan "). data ("options "). onPaged (curNo + 1); $ (e. currentTarget ). parent ("p. pageplugin "). find (". curPageNoSpan "). text (curNo + 1) ;}return false ;}); this. $ element. find (". lastPageli "). on ("click", function (e) {var curNo = $ (e. currentTarget ). parent ("p. pageplugin "). find (". curPageNoSpan "). text (); curNo = parseInt (curNo); var pageCount = $ (e. currentTarget ). parent ("p. pageplugin "). find (". allPageCountSpan "). text (); pageCount = parseInt (pageCount); if (curNo = pageCount) {return false;} else {$ (e. currentTarget ). parent ("p. pageplugin "). find (". curPageNoSpan "). data ("options "). onPaged (pageCount); $ (e. currentTarget ). parent ("p. pageplugin "). find (". curPageNoSpan "). text (pageCount) ;}return false ;}}}$. fn. pagePlugin = function (option) {var pagePlugin = new MyPagePlugin (this, option); pagePlugin. initPlugin ();};}));

CSS

.pageplugin { display: inline-block; border: 1px solid #CDCDCD; border-radius: 3px; } .pageplugin a { cursor: pointer; display: block; float: left; width: 20px; height: 20px; outline: none; border-right: 1px solid #CDCDCD; border-left: 1px solid #CDCDCD; color: #767676; vertical-align: middle; text-align: center; text-decoration: none; font-weight: bold; font-size: 16px; font-family: Times, 'Times New Roman', Georgia, Palatino;  background-color: #f7f7f7; /* ATTN: need a better font stack  background-color: #f7f7f7; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f3f3f3), color-stop(100%, lightgrey)); background-image: -webkit-linear-gradient(#f3f3f3, lightgrey); background-image: linear-gradient(#f3f3f3, lightgrey); */} .pageplugin a:hover, .pageplugin a:focus, .pageplugin a:active {  color:#0099CC;  background-color: #cecece;  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e4e4e4), color-stop(100%, #cecece));  background-image: -webkit-linear-gradient(#e4e4e4, #cecece);  background-image: linear-gradient(#e4e4e4, #cecece); } .pageplugin a.disabled, .pageplugin a.disabled:hover, .pageplugin a.disabled:focus, .pageplugin a.disabled:active {  background-color: #f3f3f3;  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f3f3f3), color-stop(100%, lightgrey));  background-image: -webkit-linear-gradient(#f3f3f3, lightgrey);  background-image: linear-gradient(#f3f3f3, lightgrey);  color: #A8A8A8;  cursor: default; } .pageplugin a:first-child { border: none; border-radius: 2px 0 0 2px; } .pageplugin a:last-child { border: none; border-radius: 0 2px 2px 0; }  .pageplugin .present { float: left; margin: 0; padding: 0; width: 120px; height: 20px; outline: none; border: none; vertical-align: middle; text-align: center; }

Jquery paging plug-in cypager

Cypager is a work shared by netizens on the JquerySchool website. It is very practical. After tests, the plug-in is compatible with IE8 +, Chrome, Firefox, and the core file is only 5KB...

Call Method

Because it is a jquery plug-in, before introducing cypager. min. js, we need to introduce jquery. min. js. I use version 1.7.2, but I have never tried any lower version.
Introduce css:
Compelling js:

$ (Function () {$ ("# pagerArea "). cypager ({pg_size: 10, pg_nav_count: 8, pg_total_count: 194, pg_call_fun: function (count) {alert ("Jump to the page: "+ count + "");}});});

Parameter description
PgerId // default plug-in ID: cy_pager
Pg_size // The number of records displayed per page. Default Value: 10
Pg_cur_count // current page number (set if the specified page is displayed by default)
Pg_total_count // total number of records
Pg_nav_count // display the number of navigation items. Default Value: 7
Pg_prev_name // name of the button on the previous page (default: PREV)
Pg_next_name // name of the NEXT page button (default: NEXT)
Pg_call_fun (page_count) // callback function, click the button to execute

Efficient JQUERY paging plug-in source code JQUERY. PAGER. JS

This article will share with you a very good paging plug-in, jQuery. pager. js. The advantage of this plug-in is that it can index content, use jQuery, and call jquery at the same time. pager. js files and pages are based on Ajax. Of course, if you do not want to use Ajax to implement pages, you 'd better not use this plug-in. If you want to use it, it will be very troublesome. it is prepared for websites that use Ajax technology to interact, and can be easily embedded into the website system to implement the Ajax paging function. If you think this effect is not very good, you can rewrite the page by yourself. button Style

HTML code is simple. You only need to prepare a DIV for paging code.

You can use jQuery to call it.

$(".tcdPageCode").createPage({ pageCount:6, current:1, backFn:function(p){ console.log(p); }});