Sharing of paging plug ins implemented using JQuery

A simple jQuery paging plug-in, compatible with the AMD specification and requireJS.

/**
 * jQuery Paging plug-in 
 * */
;(function (factory) {
  if (typeof define === "function" && define.amd) {
    // AMD model 
    define([ "jquery" ], factory);
  } else {
    //  The global model 
    factory(jQuery);
  }
}(function ($) {
   
   // define MyPagePlugin Constructor of 
  MyPagePlugin = function(ele, option) {
     //  this.viewHtml="<nav><ul class='pagination'><li><a id='firstPageli'>&laquo;</a></li><li><a id='prevPageli'>&lsaquo;</a></li><li class='active'><a> The first <span id='curPageNoSpan'></span> page , A total of <span id='allPageCountSpan'></span> page </a></li><li><a id='nextPageli'>&rsaquo;</a></li><li><a id='lastPageli'>&raquo;</a></li></ul></nav>";
  this.viewHtml= "<div class='pageplugin'><a class='first firstPageli'>&laquo;</a><a class='previous prevPageli'>&lsaquo;</a><a class='present'> The first <span class='curPageNoSpan'></span> page , A total of <span class='allPageCountSpan'></span> page </a><a class='next nextPageli'>&rsaquo;</a><a class='last lastPageli'>&raquo;</a></div>"
 
    this.$element = ele;
    /** Parameters: page: The current page ,pageCount: A total number of pages ,onPaged The callback function , The callback function passes in pages */
    this.defaults = {
      page:1,
      pageCount:1,
      onPaged:function(pageNo){}
    };
    this.options = $.extend({}, this.defaults, option);
 
  }
  // define MyPagePlugin The method of 
  MyPagePlugin.prototype = {
    initPlugin:function(){
      this.$element.empty();
       this.$element.append(this.viewHtml);
       this.options.onPaged(this.options.page);// Initialize the 
       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("div.pageplugin").find(".curPageNoSpan").text();
        curNo=parseInt(curNo);
        if(curNo==1){
           return false;
        }else{
           
          $(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").data("options").onPaged(1);
          $(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(1);
        }
        return false;
       });
       this.$element.find(".prevPageli").on("click",function(e){
        var curNo=$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text();
        curNo=parseInt(curNo);
        if(curNo==1){
          return false;
        }else{
          $(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").data("options").onPaged(curNo-1);
          $(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(curNo-1);
        }
        return false;
       });
       this.$element.find(".nextPageli").on("click",function(e){
        var curNo=$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text();
        curNo=parseInt(curNo);
        var pageCount=$(e.currentTarget).parent("div.pageplugin").find(".allPageCountSpan").text();
        pageCount=parseInt(pageCount);
        if(curNo==pageCount){
          return false;
        }else{
          $(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").data("options").onPaged(curNo+1);
          $(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(curNo+1);
        }
        return false;
       });
       this.$element.find(".lastPageli").on("click",function(e){
        var curNo=$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text();
        curNo=parseInt(curNo);
        var pageCount=$(e.currentTarget).parent("div.pageplugin").find(".allPageCountSpan").text();
        pageCount=parseInt(pageCount);
        if(curNo==pageCount){
           return false;
        }else{
          $(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").data("options").onPaged(pageCount);
          $(e.currentTarget).parent("div.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 netizen to share to JquerySchool website 1 work, very practical, after testing, plug-in compatibility IE8+,Chrome,Firefox browser, the core file only 5KB...

Call way

As it is an jquery plug-in, before introducing ES27en.min.js, it is necessary to introduce ES30en.min.js itself. I use version 1.7.2, and I haven't tried the lower version.
The introduction of css: < link rel="stylesheet" href="css/cypager.min.css" / >
Fetching js: < script type="text/javascript" src="js/cypager.min.js"/ >

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

Parameters that
pgerId // Default for ID plug-ins: cy_pager
pg_size // The default number of records displayed per page: 10
pg_cur_count // Current number of pages (set if the specified page needs to be displayed by default)
pg_total_count // Total number of records
pg_nav_count // How many navigation Numbers to display Default: 7
pg_prev_name // Button name on page 1 (default: PREV)
pg_next_name // Button name for next page (default: NEXT)
pg_call_fun(page_count) // Callback function, click the button to execute

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

Share this article will give you a very good page plug-in, jQuery pager. js, the plug-in can be content index, the advantages of using the jQuery, also calls the jquery. pager. js, paging file are based on Ajax, of course, if you don't plan to use Ajax to implement paging, then you had better not use this plug-in, if use it very troublesome, this plugin is primarily for use Ajax technology, interactive website, can easily embedded in a web site, implementation of the system Ajax pagination, if you don't think it looks good, you can rewrite the style of the pagination button

The HTML code is as simple as having 1 DIV ready for paging code

<div class="tcdPageCode"></div>

Call it jQuery

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