45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 编程代码 > 阅读资讯:如何使用JQuery实现分页插件?

如何使用JQuery实现分页插件?

2016-03-06 14:40:54 来源:www.45fan.com 【

如何使用JQuery实现分页插件?

一个简单的jQuery分页插件,兼容AMD规范和requireJS.

/**
 * jQuery分页插件
 * */
;(function (factory) {
 if (typeof define === "function" && define.amd) {
  // AMD模式
  define([ "jquery" ], factory);
 } else {
  // 全局模式
  factory(jQuery);
 }
}(function ($) {
  
  //定义MyPagePlugin的构造函数
 MyPagePlugin = function(ele, option) {
   // this.viewHtml="<nav><ul class='pagination'><li><a id='firstPageli'>«</a></li><li><a id='prevPageli'>‹</a></li><li class='active'><a>第<span id='curPageNoSpan'></span>页,共<span id='allPageCountSpan'></span>页</a></li><li><a id='nextPageli'>›</a></li><li><a id='lastPageli'>»</a></li></ul></nav>";
 this.viewHtml= "<div class='pageplugin'><a class='first firstPageli'>«</a><a class='previous prevPageli'>‹</a><a class='present'>第<span class='curPageNoSpan'></span>页,共<span class='allPageCountSpan'></span>页</a><a class='next nextPageli'>›</a><a class='last lastPageli'>»</a></div>"
 
  this.$element = ele;
  /**参数:page:当前页,pageCount:总共页数,onPaged回调函数,回调函数会传入页数*/
  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是网友分享到JquerySchool网站上的一款作品,非常实用,经过测试,插件兼容 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+"");
 }});
});

参数说明
pgerId//插件的ID 默认 : cy_pager
pg_size //每页显示记录数 默认:10条
pg_cur_count //当前页数(如果需要默认显示指定页面,则设置)
pg_total_count //总记录数
pg_nav_count //显示多少个导航数 默认:7个
pg_prev_name //上一页按钮名称(默认:PREV)
pg_next_name //下一页按钮名称 (默认:NEXT)
pg_call_fun(page_count) //回调函数,点击按钮执行

高效JQUERY分页插件源代码JQUERY.PAGER.JS

本文将给大家分享一个非常不错的分页插件、jQuery.pager.js、该插件的优点是可以内容索引、使用了jQuery、也同时调用了jquery.pager.js文件、分页都是基于Ajax的、当然、如果你不打算使用Ajax来实现分页的话、那么你最好不要使用本插件、若使用的话反而很麻烦、本插件主要是为使用Ajax技术交互的网站所准备、可以很方便的嵌入到网站系统中、实现Ajax分页功能、如果大家觉得这个效果不是很好看的话、可以自己重写分页按钮的样式哈

HTML代码很简单、只要准备一个用于分页代码的DIV就可以了

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

通过jQuery的方式调用即可

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

本文地址:http://www.45fan.com/bcdm/41451.html
Tags: 实现 jquery 插件
编辑:路饭网
推广内容
推荐阅读
热门推荐
推荐文章
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部