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


Posted in Javascript onNovember 05, 2015

一个简单的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);
 }
});
Javascript 相关文章推荐
javascript vvorld 在线加密破解方法
Nov 13 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
Dec 12 Javascript
extjs中form与grid交互数据(record)的方法
Aug 29 Javascript
第一章之初识Bootstrap
Apr 25 Javascript
JavaScript中的原型prototype完全解析
May 10 Javascript
jQuery实现简单的网页换肤效果示例
Sep 18 Javascript
通过命令行创建vue项目的方法
Jul 20 Javascript
详解如何使用koa实现socket.io官网的例子
Nov 04 Javascript
详解vue 图片上传功能
Apr 30 Javascript
Vue 实例事件简单示例
Sep 19 Javascript
微信小程序实现倒计时功能
Nov 19 Javascript
关于对TypeScript泛型参数的默认值理解
Jul 15 Javascript
javascript实现tab切换的四种方法
Nov 05 #Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
Nov 05 #Javascript
JS使用正则表达式除去字符串中重复字符的方法
Nov 05 #Javascript
JS使用cookie实现DIV提示框只显示一次的方法
Nov 05 #Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
Nov 05 #Javascript
JS实现自定义简单网页软键盘效果代码
Nov 05 #Javascript
JavaScript实现cookie的写入、读取、删除功能
Nov 05 #Javascript
You might like
PHP循环获取GET和POST值的代码
2008/04/09 PHP
PHP中time(),date(),mktime()区别介绍
2013/09/28 PHP
phpmyadmin打开很慢的解决方法
2014/04/21 PHP
jQuery 表单验证扩展代码(一)
2010/10/11 Javascript
toggle()隐藏问题的解决方法
2014/02/17 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2015/04/01 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
jQuery动态生成Bootstrap表格
2016/11/01 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
JavaScript易错知识点整理
2016/12/05 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
Node.js  事件循环详解及实例
2017/08/06 Javascript
Node.js引入UIBootstrap的方法示例
2018/05/11 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
微信小程序 WXML节点信息查询详解
2019/07/29 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
详解vue3中组件的非兼容变更
2021/03/03 Vue.js
跟老齐学Python之让人欢喜让人忧的迭代
2014/10/02 Python
Python元组操作实例分析【创建、赋值、更新、删除等】
2017/07/24 Python
python中WSGI是什么,Python应用WSGI详解
2017/11/24 Python
python 同时读取多个文件的例子
2019/07/16 Python
使用python制作游戏下载进度条的代码(程序说明见注释)
2019/10/24 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
python中的django是做什么的
2020/07/31 Python
万宝龙英国官网:Montblanc手表、书写工具、皮革和珠宝
2018/10/16 全球购物
平面设计专业大学生职业规划书
2014/03/12 职场文书
幼儿园教师的考核评语
2014/04/18 职场文书
服装仓管员岗位职责
2014/06/17 职场文书
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
教师个人查摆剖析材料
2014/10/14 职场文书
医院见习报告范文
2014/11/03 职场文书
小学工作总结2015
2015/05/04 职场文书
导游词之峨眉乐山/兵马俑/北京故宫御花园
2019/09/03 职场文书
python process模块的使用简介
2021/05/14 Python
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript