基于jquery编写分页插件_jquery

扩展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分页插件
jquery分页插件、jquery ajax分页插件、jquery分页插件怎么用、jquery表格分页插件、jquery table分页插件,以便于您获取更多的相关知识。

时间: 2024-09-23 17:47:48

基于jquery编写分页插件_jquery的相关文章

基于bootstrap3和jquery的分页插件_jquery

自己写的一款基于bootstrap3和jquery的分页插件,初学jquery插件写法,写的很一般.拿出来献丑了. /** * 基于bootstrap3的jquery分页插件 * 调用方式分两种 * 1.直接调用法 * 普通大小 * $.mypage(id,now,max,fn); * 大尺寸 * $.mypagelg(id,now,max,fn); * 小尺寸 * $.mypagesm(id,now,max,fn); * * 参数说明:id为放置分页容器的ID,now为当前页,max为最大页,

jqPlot 基于jquery的画图插件_jquery

前边也讲过一个基于java的图形报表,功能及外观也不错,但存在通用性的问题.所以我们来学一个具有易用性+兼容性+可扩展性的js图表插件. jqPlot是一款基于jquery类库的图标绘制插件.通过jqPlot可以再网页中绘制线状.柱状.饼状等多种样式图表.而且,jqPlot具有插件可扩展性(Pluggability),你可以编写自己的图表样式. 官方地址:http://www.jqplot.com/ 功能概述: 有多种图表样式可供选择 可以自定义日期轴线 可设置旋转轴文字 自动计算趋势线 工具条

jQuery实现图片轮播效果代码(基于jquery.pack.js插件)_jquery

本文实例讲述了jQuery实现图片轮播效果代码.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

jMessageBox 基于jQuery的窗口插件_jquery

如下图:   但是这些弹出来的窗口的样式非常的单调无法设置,并且窗口标题还根据不同的浏览器显示不同的标题内容,非常的丑陋!对于高审美观的现代人来说,就大打折扣了! jQuery现在这么流行.这么火,但网上却好像还是没有提供类似于MessageBox的插件(或者只是我没有找到而已),类似的模式窗口插件倒是有一大堆,但这都不是我想要的.没现成的,就只好花点时间将我以前写的基于我的个人JS框架的MessageBox移值过来,也就是本文的JMessageBox. 它的使用非常的简单 CSS + JS搭配

JQUBar 基于JQUERY的柱状图插件_jquery

一.JQUBAR(V1.0)JQUERY插件简介 1.支持.net.java.php等平台. 2.用户可以通过鼠标拖拽柱状图从而改变每根柱子的高度,最终达到通过鼠标拖拽图形界面来修改服务器数据的目的. 3.支持柱状图缩放. 4.目前支持浏览器:IE7. IE8. Firefox.Chrome. 二.HTML 复制代码 代码如下: <div id="con"><%--JQUBAR容器--%> </div> <input type="ch

基于JQuery的cookie插件_jquery

简单使用方法: 复制代码 代码如下: <html> <head> <title>JQuery-Cookie插件</title> <script type="text/javascript" src="jquery-1.4.js"></script> <script type="text/javascript" src="jquery.cookie.js&quo

分享一款基于jQuery的视频播放插件_jquery

最近写了一个在线视频播放的功能,感觉这个插件还可以,和大家分享一下! 复制代码 代码如下: <div class="report" id="play-product" style="cursor: pointer"  data-flv="视频路径地址"></div> <script type="text/javascript"> //播放视频 $('#play-produ

jquery ajax分页插件的简单实现_jquery

说到基于jQuery的ajax分页插件,那我们就先看看主要的代码结构: 1.首先定义一个pager对象: var sjPager = window.sjPager = { opts: { //默认属性 pageSize: 10, preText: "pre", nextText: "next", firstText: "First", lastText: "Last", shiftingLeft: 3, shiftingRig

基于jQuery.Hz2Py.js插件实现的汉字转拼音特效_jquery

可以实现基于jQuery实现汉字转换成拼音代码.这是一款基于jQuery.Hz2Py.js插件实现的汉字转拼音特效.插件自行下载.使用方法如下(注意修改jq的引入路径). <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>基于jQuery实现汉字转换成拼音代码</title> <