JQuery分页插件封装(源码来自百度,自己封装)

最近由于项目的需要,做了一个基于JQuery的表格分页插件封装,部分源码来源百度,经由自己封装完成。

下面是具体代码和说明,仅供参考。第一步可以先将我的HTML,CSS,JS这三部分的代码创建好后先运行看看,下图是文件目录展示。

html

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery表格分页</title>
<link rel="stylesheet" href="css/Pagebar_PC.css">
</head>
<body>
    <input type=‘hidden‘ id=‘current‘ />
    <input type=‘hidden‘ id=‘show‘ />
    <table id="y1">
        <tr>
            <th>标题1</th>
            <th>标题2</th>
            <th>标题3</th>
            <th>标题4</th>
            <th>标题5</th>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>2</td>
            <td>2</td>
            <td>2</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>4</td>
            <td>4</td>
            <td>4</td>
            <td>4</td>
        </tr>
        <tr>
            <td>5</td>
            <td>5</td>
            <td>5</td>
            <td>5</td>
            <td>5</td>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
            <td>15</td>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
            <td>15</td>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
            <td>15</td>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
            <td>15</td>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
            <td>15</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
            <td>25</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
            <td>25</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
            <td>25</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
            <td>25</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
            <td>25</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
            <td>35</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
            <td>35</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
            <td>35</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
            <td>35</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
            <td>35</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
            <td>45</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
            <td>45</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
            <td>45</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
            <td>45</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
            <td>45</td>
        </tr>
        <tr>
            <td>51</td>
            <td>52</td>
            <td>53</td>
            <td>54</td>
            <td>55</td>
        </tr>
        <tr>
            <td>51</td>
            <td>52</td>
            <td>53</td>
            <td>54</td>
            <td>55</td>
        </tr>
        <tr>
            <td>51</td>
            <td>52</td>
            <td>53</td>
            <td>54</td>
            <td>55</td>
        </tr>
        <tr>
            <td>51</td>
            <td>52</td>
            <td>53</td>
            <td>54</td>
            <td>55</td>
        </tr>
        <tr>
            <td>51</td>
            <td>52</td>
            <td>53</td>
            <td>54</td>
            <td>55</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
    </table>
    <div id=‘page_nav_y1‘></div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/Pagebar_PC.js"></script>
    <script type="text/javascript">
    $(function(){
        //page(table的ID,隐藏域ID1(存储当前页的页数),隐藏域ID2(存储一页显示的数量),分页组件ID,A标签默认类(类名自定义),选择时的类(设置活动时的样式类),一页显示的个数,table的含有th的tr数量)
        page(‘#y1‘,‘#current‘,‘#show‘,‘#page_nav_y1‘,‘.y1_page‘,‘active_page‘,10,1);
    });
    </script>
</body>
</html>

CSS

body,table,tr,th,td,div{
    margin:0;
    padding:0;
}
table,tr,th,td{
    border-collapse: collapse;
}
body{
    padding:10px;
}
#y1 tr{display: none;}
th,td{
    width: 150px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border:1px solid blue;
}
th:nth-of-type(1){background-color: red;}
th:nth-of-type(2){background-color: green;}
th:nth-of-type(3){background-color: yellow;}
th:nth-of-type(4){background-color: pink;}
th:nth-of-type(5){background-color: yellowgreen;}
#page_nav_y1{
    display: inline-block;
    margin-top: 8px;
}
#page_nav_y1 a{
    float: left;
    width:45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    border:1px solid gray;
    margin:2px;
    color:black;
    text-decoration:none;
    border-radius: 3px;
}
#page_nav_y1 a.disable{
    color:red;
    border:1px solid red;
    cursor: not-allowed;
}
.active_page{
    background:darkblue;
    color:white !important;
}
#page_nav_y1 a.prev_link,
#page_nav_y1 a.next_link{
    width:70px;
}

 js

//上一页
function prev(obj1,obj2,obj3,obj5,obj6,pageNum,tabNum){
    new_page = parseInt($(obj2).val()) - 1;
    if($(‘.‘+obj6).prev(obj5).length==true){//判断是否存在前一个兄弟元素
        goto_page(obj1,obj2,obj3,obj5,obj6,new_page,tabNum);
        if(pageNum == 2){//当页码只有两页时
            op1(‘.next_link‘);//下一页恢复
            op2(‘.prev_link‘);//上一页禁用
        }else{
            if(new_page > 0){
                op1(‘.next_link‘);//下一页恢复
            }else{
                op2(‘.prev_link‘);//上一页禁用
            }
        }
    }
}
//下一页
function next(obj1,obj2,obj3,obj5,obj6,pageNum,tabNum){
    new_page = parseInt($(obj2).val()) + 1;
    if($(‘.‘+obj6).next(obj5).length==true){//判断是否存在后一个兄弟元素
        goto_page(obj1,obj2,obj3,obj5,obj6,new_page,tabNum);
        if(pageNum == 2){//当页码只有两页时
            op1(‘.prev_link‘);//上一页恢复
            op2(‘.next_link‘);//下一页禁用
        }else{
            if(new_page < pageNum - 1){
                op1(‘.prev_link‘);//上一页恢复
            }else{
                op2(‘.next_link‘);//下一页禁用
            }
        }
    }
}
//跳转某一页
function goto_page(obj1,obj2,obj3,obj5,obj6,page_num,tabNum){
    var showNum = parseInt($(obj3).val());//获取一页显示tr数量
    start_from = page_num * showNum + tabNum;//计算开始位置
    end_on = start_from + showNum;//计算结束位置
    $(obj1).children().children().hide().slice(start_from, end_on).show();
    //表头(标题)默认显示
    for(var i=0;i<tabNum;i++){
        $(obj1).children().children().eq(i).show();
    }
    //切换活动页码
    $(obj5 + ‘[cur_pageNum=‘ + page_num +‘]‘).addClass(obj6).siblings(‘.‘+obj6).removeClass(obj6);
    //存储当前页码
    $(obj2).val(page_num);
}
//分页页面的实现
function page(obj1,obj2,obj3,obj4,obj5,obj6,showNum,tabNum){
    //获取table表格中tr
    var tr = $(obj1).children().children();
    //获取除了表头(标题)以外tr的总数量
    var allNum = tr.size()- tabNum;
    //计算页码数
    var pageNum = Math.ceil(allNum/showNum);
    //隐藏域默认值
    $(obj2).val(0);//初始化为0
    $(obj3).val(showNum);//存储一页中显示tr的数量
    //上一页
    var pageNav = ‘<a class="prev_link disable" disabled="true" datahref="javascript:prev('‘+ obj1 +‘','‘+ obj2 +‘','‘+ obj3 +‘','‘+ obj5 +‘','‘+ obj6 +‘',‘+ pageNum + ‘,‘+ tabNum +‘);">上一页</a>‘;
    var curPage = 0;
    //提取显示页A标签定义的类名--除去输入时.
    var page_link = obj5.split(‘.‘)[1];
    //循环页码
    while(pageNum > curPage){
        pageNav += ‘<a class="‘+ page_link +‘" href="javascript:goto_page('‘+ obj1 +‘','‘+ obj2 +‘','‘+ obj3 +‘','‘+ obj5 +‘','‘+ obj6 +‘',‘ + curPage + ‘,‘ + tabNum +‘)" cur_pageNum="‘ + curPage +‘">‘+ (curPage + 1) +‘</a>‘;
        curPage++;
    }
    //判断页码是否不为一页,如果不为一页那么下一页的按钮为可用,否则下一页按钮为不可用。
    if(pageNum > 1){
        pageNav += ‘<a class="next_link" href="javascript:next('‘+ obj1 +‘','‘+ obj2 +‘','‘+ obj3 +‘','‘+ obj5 +‘','‘+ obj6 +‘',‘+ pageNum + ‘,‘ + tabNum +‘);">下一页</a>‘;
    }else{
        pageNav += ‘<a class="next_link disable" disabled="true" datahref="javascript:next('‘+ obj1 +‘','‘+ obj2 +‘','‘+ obj3 +‘','‘+ obj5 +‘','‘+ obj6 +‘',‘+ pageNum + ‘,‘ + tabNum +‘);">下一页</a>‘;
    }
    $(obj4).html(pageNav);
    //为第一页添加活动类
    $(obj5+‘:first‘).addClass(obj6);
    //隐藏该对象下面的所有子元素并让表头显示
    tr.slice(0, showNum + tabNum).show();
}
/*恢复可点击*/
function op1(obj){
    $(obj).removeClass(‘disable‘);//除去不可用类
    $(obj).removeAttr(‘disabled‘);//除去不可用属性
    $(obj).attr(‘href‘,$(obj).attr("datahref"));//将页码链接恢复
    $(obj).removeAttr(‘datahref‘);//除去备份链接
}
/*使点击效果失效*/
function op2(obj){
    $(obj).addClass(‘disable‘);//添加不可用类
    $(obj).attr(‘disabled‘, ‘true‘);//添加不可用属性
    $(obj).attr(‘datahref‘,$(obj).attr("href"));//将页码链接备份到备份链接
     $(obj).removeAttr(‘href‘);//除去页码链接
}

好了,到了这里如果你完成了创建并且运行可以看到效果如下图所示(如果你想自己研究源码,那么下面就可以先不看了--代码逻辑分析)。

下面开始解释代码的运行逻辑。

先看到HTML中下面代码(利用隐藏域存储值)

<input type=‘hidden‘ id=‘current‘ />        /*存储当前页码的值*/

<input type=‘hidden‘ id=‘show‘ />          /*存储页面显示的行数*/

接下来可以看到

<script type="text/javascript">
$(function(){
  //page(table的ID,隐藏域ID1(存储当前页的页数),隐藏域ID2(存储一页显示的数量),分页组件ID,A标签默认类(类名自定义),选择时的类(设置活动时的样式类),一页显示的  个数,table的含有th的tr数量)
  page(‘#y1‘,‘#current‘,‘#show‘,‘#page_nav_y1‘,‘.y1_page‘,‘active_page‘,10,1);
});
</script>

上面参数我都做了相关的注释,如果没能看懂,欢迎提问。

如需转载,请表明来源http://www.cnblogs.com/webBlog-gqs/p/6715109.html --博客园小铁达子,谢谢合作!

时间: 2024-10-12 22:35:25

JQuery分页插件封装(源码来自百度,自己封装)的相关文章

10个web炫酷的jQuery动画插件及源码

1.基于jquery漂亮的按钮 今天给大家分享一款基于jquery漂亮的按钮.这款按钮背景下用了一张图片.当鼠标经过的时候背景用半透明div遮住. 在线演示 源码下载 2.jquery自适应动态内容翻转特效 jquery自适应动态内容翻转特效 在线演示 源码下载 3.多功能网页幻灯片jQuery Cycle 多功能网页幻灯片jQuery Cycle 在线演示 源码下载 4.jQuery书本翻页3D动画特效 记得以前我们有介绍过不少书本翻页的动画,比如这款CSS3书本翻页动画,制作就非常逼真.今天

10个web前端基于jQuery动画插件及源码

1.超赞的页面加载进度自动指示和 Ajax 导航效果 在页面中引入 Pace.js 和您所选择主题的 CSS 文件,就可以让你的页面拥有漂亮的加载进度和 Ajax 导航效果.不需要挂接到任何代码,自动检测进展.您可以选择颜色和多种效果,有简约,闪光灯,MAC OSX,左侧填充,顶部填充,计数器和弹跳等等. 在线演示 源码下载 2.ProgressBar.js – 漂亮的响应式 SVG 进度条 ProgressBar.js 是一个借助动态 SVG 路径的漂亮的,响应式的进度条效果.使用 Progr

10款经典创意jQuery应用插件及源码

1.jQuery带缩略图的宽屏焦点图插件 今天我们要来分享一款很不错的jQuery宽屏焦点图插件,这款焦点图插件相当大气,并且在图片上方列出了所有的缩略图,点击缩略图即可切换相应的图片.另外,我们也可以点击左右切换按钮来切换上一张和下一张图片. 在线演示 源码下载 2.HTML5 Canvas折线图表和柱形图表 之前我们已经分享过很多HTML5图表应用了,包括折线图.柱形图.饼图等,使用起来用户体验都很不错.今天要分享的一款HTML5 Canvas图表应用提供了折线图和柱形图两种,这款HTML5

5个时尚实用的jquery/css3插件及源码

%E6%8A%80%E6%9C%AF%E8%A1%8C%E4%B8%9A%E5%8D%81%E5%A4%A7%E8%BF%87%E6%97%B6%E6%8A%80%E8%83%BD%E5%88%AB%E6%8C%87%E6%9C%9B%E9%9D%A0%E5%AE%83%E4%BB%AC%E6%9D%A5%E6%89%BE%E5%B7%A5%E4%BD%9C http://www.zcool.com.cn/collection/ZMTY5MDcyMTY/ http://www.zcool.com

转:精美jQuery插件及源码 前端开发福利

原文来自于:http://www.html5tricks.com/pretty-jquery-plugin.html jQuery是一个非常不错的javascript框架,很多前端开发者喜欢的原因不仅是因为jQuery使用起来方便,更重要的是因为它的插件很多,我们可以将这些插件应用到自己的项目中去.下面这些精美的jQuery插件提供源代码下载,希望对你有所帮助. 1.jQuery自定义下拉框选择列表 5款炫酷样式 这是一款基于jQuery的自定义下拉框选择列表插件,利用这款jQuery插件我们可

精美jQuery插件及源码 前端开发福利

jQuery是一个非常不错的javascript框架,很多前端开发者喜欢的原因不仅是因为jQuery使用起来方便,更重要的是因为它的插件很多,我们可以将这些插件应用到自己的项目中去.下面这些精美的jQuery插件提供源代码下载,希望对你有所帮助. 1.jQuery自定义下拉框选择列表 5款炫酷样式 这是一款基于jQuery的自定义下拉框选择列表插件,利用这款jQuery插件我们可以非常方便的让浏览器默认的select下拉框变的非常华丽,并且同时拥有select下拉框原有的功能.这款jQuery下

YII框架源码分析(百度PHP大牛创作-原版-无广告无水印)

                        YII 框架源码分析             百度联盟事业部--黄银锋   目 录 1. 引言 3 1.1.Yii 简介 3 1.2.本文内容与结构 3 2.组件化与模块化 4 2.1.框架加载和运行流程 4 2.2.YiiBase 静态类 5 2.3.组件 6 2.4.模块 9 2.5 .App 应用   10 2.6 .WebApp 应用   11 3.系统组件 13 3.1.日志路由组件  13 3.2.Url 管理组件  15 3.3.异常

在网站开中很有用的8个 jQuery 效果【附源码】

jQuery 作为最优秀 JavaScript 库之一,改变了很多人编写 JavaScript 的方式.它简化了 HTML 文档遍历,事件处理,动画和 Ajax 交互,而且有成千上万的成熟 jQuery 插件可供使用.看看下面这些惊人的功能和效果,我相信你会发现一些很有用的东西. 基于 jQuery 实现的 Ajax 异步分页 jPages 是一款非常不错的客户端分页插件,有很多特色,例如自动播放.按键翻页.延迟加载等等 源码下载      在线演示 老牌的响应式 jQuery 幻灯片效果 Sl

转载Aaron博客 ---- jQuery 2.0.3 源码分析core - 整体架构

jQuery 2.0.3 源码分析core - 整体架构 整体架构 拜读一个开源框架,最想学到的就是设计的思想和实现的技巧. 废话不多说,jquery这么多年了分析都写烂了,老早以前就拜读过, 不过这几年都是做移动端,一直御用zepto, 最近抽出点时间把jquery又给扫一遍 我也不会照本宣科的翻译源码,结合自己的实际经验一起拜读吧! github上最新是jquery-master,加入了AMD规范了,我就以官方最新2.0.3为准 整体架构 jQuery框架的核心就是从HTML文档中匹配元素并