基于jquery编写分页插件


Posted in Javascript onMarch 07, 2016

扩展JQuery很容易,作为一个练习,编写一个简单的分页插件,代码量不大,直接看代码好了:

$.fn.mypagination = function(totalProperty,opts){ 
  opts = $.extend({ 
    perPage:10, 
  
    callback:function(){ 
    } 
  },opts||{}); 
     
  return this.each(function(){ 
    function numPages(){ 
      return Math.ceil(totalProperty/opts.perPage); 
    } 
  
     
    function selectPage(page){ 
      return function(){ 
        currPage = page; 
        if (page<0) currPage = 0; 
        if (page>=numPages()) currPage = numPages()-1; 
        render(); 
  
        $('img.page-wait',panel).attr('src','images/wait.gif'); 
        opts.callback(currPage+1); 
        $('img.page-wait',panel).attr('src','images/nowait.gif'); 
      } 
    } 
     
    function render(){ 
  
      var html = '<table><tbody><tr>'  
        +'<td><a href="#"><img class="page-first"></a></td>' 
        +'<td><a href="#"><img class="page-prev"></a></td>' 
        +'<td><span>第<input type="text" class="page-num">页/共'+numPages()+'页</span></td>' 
        +'<td><a href="#"><img class="page-next"></a></td>' 
        +'<td><a href="#"><img class="page-last"></a></td>' 
        +'<td><img src="images/nowait.gif" class="page-wait"></td>' 
        +'<td><span style="padding-left:50px;">检索到'+totalProperty+'记录</span></td>' 
        +'</tr></tbody></table>'; 
      var imgFirst = 'images/page-first-disabled.gif'; 
      var imgPrev = 'images/page-prev-disabled.gif'; 
      var imgNext = 'images/page-next-disabled.gif'; 
      var imgLast = 'images/page-last-disabled.gif'; 
      if (currPage > 0){ 
        imgFirst = 'images/page-first.gif'; 
        imgPrev = 'images/page-prev.gif'; 
      } 
      if (currPage < numPages()-1){ 
        imgNext = 'images/page-next.gif'; 
        imgLast = 'images/page-last.gif'; 
      } 
      panel.empty(); 
      panel.append(html); 
      $('img.page-first',panel) 
        .bind('click',selectPage(0)) 
        .attr('src',imgFirst);  
      $('img.page-prev',panel) 
        .bind('click',selectPage(currPage-1)) 
        .attr('src',imgPrev);   
      $('img.page-next',panel) 
        .bind('click',selectPage(currPage+1)) 
        .attr('src',imgNext);   
      $('img.page-last',panel) 
        .bind('click',selectPage(numPages()-1)) 
        .attr('src',imgLast); 
      $('input.page-num',panel) 
        .val(currPage+1) 
        .change(function(){ 
          selectPage($(this).val()-1)(); 
        }); 
    } 
     
    var currPage = 0; 
    var panel = $(this); 
    render(); 
  
  }); 
}

下面测试一下:

<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <link rel="stylesheet" href="mypagination.css"/> 
  <script type="text/javascript" src="jquery-1.2.6.js"></script> 
  <script type="text/javascript" src="jquery.mypagination.js"></script> 
  <script> 
    $(document).ready(function(){ 
      $('#mypage').mypagination(10112,{ 
        callback:function(page){ 
          alert(page); 
        } 
      }); 
    }); 
  </script> 
</head> 
<div id="mypage" class="mypagination"></div>

运行效果图如下:

基于jquery编写分页插件

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
js图片自动切换效果处理代码
May 07 Javascript
jquery分页插件jpaginate在IE中不兼容问题
Apr 22 Javascript
js+csss实现的一个带复选框的下拉框
Sep 29 Javascript
使用jquery制作弹出框效果
Apr 03 Javascript
jQuery中inArray方法注意事项分析
Jan 25 Javascript
JS简单测试循环运行时间的方法
Sep 04 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
Nov 08 Javascript
支持移动端原生js轮播图
Feb 16 Javascript
angular bootstrap timepicker TypeError提示怎么办
Jun 13 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
Jun 28 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
Sep 21 Javascript
原生js实现的金山打字小游戏(实例代码详解)
Mar 16 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
Mar 07 #Javascript
javascript特殊日历控件分享
Mar 07 #Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
Mar 07 #Javascript
论JavaScript模块化编程
Mar 07 #Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
Mar 07 #Javascript
不定义JQuery插件 不要说会JQuery
Mar 07 #Javascript
javascript数组去重小结
Mar 07 #Javascript
You might like
利用PHP生成静态HTML文档的原理
2012/10/29 PHP
php简单统计在线人数的方法
2016/05/10 PHP
extjs render 用法介绍
2013/09/11 Javascript
js获取内联样式的方法
2015/01/27 Javascript
轻松掌握JavaScript中的Math object数学对象
2016/05/26 Javascript
JS实现控制文本框的内容
2016/07/10 Javascript
javascript中sort排序实例详解
2016/07/24 Javascript
jquery插件锦集【推荐】
2016/12/16 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
2017/01/11 Javascript
微信小程序教程系列之新建页面(4)
2017/04/17 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
2017/04/24 jQuery
AngularJS路由Ui-router模块用法示例
2017/05/29 Javascript
基于JavaScript实现一个简单的Vue
2018/09/26 Javascript
vue动态删除从数据库倒入列表的某一条方法
2018/09/29 Javascript
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
js实现弹窗效果
2020/08/09 Javascript
PHP 502bad gateway原因及解决方案
2020/11/13 Javascript
Python运行的17个时新手常见错误小结
2012/08/07 Python
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
python写入已存在的excel数据实例
2018/05/03 Python
pandas 数据实现行间计算的方法
2018/06/08 Python
详解python校验SQL脚本命名规则
2019/03/22 Python
Python实现多线程/多进程的TCP服务器
2019/09/03 Python
OpenCV+Python--RGB转HSI的实现
2019/11/27 Python
Python pip install之SSL异常处理操作
2020/09/03 Python
咖啡为什么会有酸味?你喝到的咖啡為什麼是酸的?
2021/03/17 冲泡冲煮
使用纯 CSS 创作一个脉动 loader效果的源码
2018/09/28 HTML / CSS
英国领先的在线旅游和休闲零售商:lastminute.com
2019/01/23 全球购物
客服工作职责
2013/12/11 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
《圆明园的毁灭》教学反思
2016/02/16 职场文书
小学语文课《掌声》教学反思
2016/03/03 职场文书
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技
Python与C++中梯度方向直方图的实现
2022/03/17 Python
Java 数据结构七大排序使用分析
2022/04/02 Java/Android
微信小程序调用python模型
2022/04/21 Python