使用JQuery實現(xiàn)的分頁插件分享

更新時間：2015年11月05日 11:36:01 投稿：hebedich

本文給大家總結了幾種使用jQuery實現(xiàn)的分頁插件，效果非常不錯，有需要的小伙伴可以參考下。

一個簡單的jQuery分頁插件，兼容AMD規(guī)范和requireJS.

/**
 * jQuery分頁插件
 * */
;(function (factory) {
  if (typeof define === "function" && define.amd) {
    // AMD模式
    define([ "jquery" ], factory);
  } else {
    // 全局模式
    factory(jQuery);
  }
}(function ($) {
   
   //定義MyPagePlugin的構造函數(shù)
  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>第<span id='curPageNoSpan'></span>頁,共<span id='allPageCountSpan'></span>頁</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'>第<span class='curPageNoSpan'></span>頁,共<span class='allPageCountSpan'></span>頁</a><a class='next nextPageli'>&rsaquo;</a><a class='last lastPageli'>&raquo;</a></div>"
 
    this.$element = ele;
    /**參數(shù)：page:當前頁,pageCount:總共頁數(shù),onPaged回調函數(shù),回調函數(shù)會傳入頁數(shù)*/
    this.defaults = {
      page:1,
      pageCount:1,
      onPaged:function(pageNo){}
    };
    this.options = $.extend({}, this.defaults, option);
 
  }
  //定義MyPagePlugin的方法
  MyPagePlugin.prototype = {
    initPlugin:function(){
      this.$element.empty();
       this.$element.append(this.viewHtml);
       this.options.onPaged(this.options.page);//初始化
       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分頁插件cypager

cypager是網(wǎng)友分享到JquerySchool網(wǎng)站上的一款作品，非常實用，經(jīng)過測試，插件兼容 IE8+,Chrome,Firefox 瀏覽器,核心文件僅 5KB。。。

調用方式

由于是 jquery插件，所以在引人 cypager.min.js 之前，要引人 jquery.min.js 本人使用的是 1.7.2 版本的，低版本的沒試過。
引入css : <link rel="stylesheet" href="css/cypager.min.css" />
引人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("跳轉至頁面:"+count+"");
  }});
});

參數(shù)說明
pgerId //插件的ID 默認 : cy_pager
pg_size //每頁顯示記錄數(shù) 默認：10條
pg_cur_count //當前頁數(shù)（如果需要默認顯示指定頁面，則設置）
pg_total_count //總記錄數(shù)
pg_nav_count     //顯示多少個導航數(shù) 默認：7個
pg_prev_name     //上一頁按鈕名稱（默認：PREV）
pg_next_name     //下一頁按鈕名稱 (默認：NEXT)
pg_call_fun(page_count)      //回調函數(shù)，點擊按鈕執(zhí)行

高效JQUERY分頁插件源代碼JQUERY.PAGER.JS

本文將給大家分享一個非常不錯的分頁插件、jQuery.pager.js、該插件的優(yōu)點是可以內容索引、使用了jQuery、也同時調用了jquery.pager.js文件、分頁都是基于Ajax的、當然、如果你不打算使用Ajax來實現(xiàn)分頁的話、那么你最好不要使用本插件、若使用的話反而很麻煩、本插件主要是為使用Ajax技術交互的網(wǎng)站所準備、可以很方便的嵌入到網(wǎng)站系統(tǒng)中、實現(xiàn)Ajax分頁功能、如果大家覺得這個效果不是很好看的話、可以自己重寫分頁按鈕的樣式哈

HTML代碼很簡單、只要準備一個用于分頁代碼的DIV就可以了

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

通過jQuery的方式調用即可

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

您可能感興趣的文章:

servlet+jquery實現(xiàn)文件上傳進度條示例代碼
現(xiàn)在文件的上傳，特別是大文件上傳，都需要進度條。這篇文章主要介紹了servlet+jquery實現(xiàn)文件上傳進度條示例代碼，有興趣的可以了解一下。
2017-01-01
jQuery 點擊圖片跳轉上一張或下一張功能的實現(xiàn)代碼
jQuery獲取當前鼠標相對位置坐標和點擊圖片跳轉上一張或下一張功能
2010-03-03
jquery的checkbox,radio,select等方法小結
jquery的checkbox，radio，和select是jquery操作的一個難點和重點，很多前端新手對其了解不是很透徹。時間久了不用，我在寫的時候有時也難免對某些操作支支吾吾，記不清楚，現(xiàn)在，對其做一些簡單的總結
2016-08-08
jQuery實現(xiàn)的簡單無刷新評論功能示例
這篇文章主要介紹了jQuery實現(xiàn)的簡單無刷新評論功能,涉及jQuery事件響應及頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,代碼中備有較為詳盡的注釋便于理解,需要的朋友可以參考下
2017-11-11
jquery分隔Url的param方法(推薦)
下面小編就為大家?guī)硪黄猨query分隔Url的param方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-05-05
EasyUi datagrid 實現(xiàn)表格分頁
這篇文章主要介紹了EasyUi datagrid 實現(xiàn)表格分頁的方法和示例分享,需要的朋友可以參考下
2015-02-02
jQuery中getJSON跨域原理的深入講解
這篇文章主要給大家介紹了關于jQuery中getJSON跨域原理的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-09-09
jQuery中:checkbox選擇器用法實例
這篇文章主要介紹了jQuery中:checkbox選擇器用法,實例分析了:checkbox選擇器的功能、定義及匹配復選框的使用技巧,需要的朋友可以參考下
2015-01-01
JSON JQUERY模板實現(xiàn)說明
用JSON從服務器端返回數(shù)據(jù)已是大家公認的標準,因為它短小精悍,使用方便.
2010-07-07
基于jquery的修改當前TAB顯示標題的代碼
在當前tab選項卡中單擊鏈接后，新內容在當前選項卡中顯示，但標題內容還是上一頁標題要改為新的標題。
2010-12-12