使用JQuery实现的分页插件分享

前端之家收集整理的这篇文章主要介绍了使用JQuery实现的分页插件分享前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

分页插件 * */ ;(function (factory) { if (typeof define === "function" && define.amd) { // AMD模式 define([ "jquery" ],factory); } else { // 全局模式 factory(jQuery); } }(function ($) {

//定义MyPagePlugin的构造函数
MyPagePlugin = function(ele,option) {
// this.viewHtml="

";
this.viewHtml= ""

this.$element = ele;
/**参数:page:当前页,pageCount:总共页数,onPaged回调<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>,回调<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>会传入页数*/
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 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,#e4e4e4),#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,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 : 引人js :

猜你在找的jQuery相关文章