zoukankan      html  css  js  c++  java
  • 使用jQuery实现伪分页

    在之前的项目中遇到一个这样的问题,页面分为上下两部分(分别称为未选中设备信息部分和选中设备信息部分),上面是从数据库拿出来的所有的设备信息,下面是显式已选中的设备信息,页面如下所示:

    可以选中其中的任意数量的设备,点击“添加到以选中设备”,就会如下图所示:

    我们可以看到,在未选中设备信息部分有一个分页,这个是要和后台进行数据交互的,姑且称为“真分页”,而选中设备信息部分也有一个分页,这个并不和后台进行数据交互,仅仅是为了解决数据条数过多造成的页面过长,针对这个问题,我使用jQuery,上网查阅了一些资料,完成了如下所示的伪分页代码:

      1 <!-- 伪分页实现 -->
      2     <script type="text/javascript">
      3         function pretendDevide(){
      4             // 每页显示的条数
      5             var everyPageNum = 10;
      6             // 当前的页数
      7             var current_Num = 1;
      8             // 拿到有所有已选设备组成的数组
      9             var tbodyNode = $("#chooseDeviceTBody tr").toArray();
     10             // 获取数组的长度
     11             var arrayLengrh = tbodyNode.length;
     12             // 设置总条数
     13             $(".totalNum").text(arrayLengrh);
     14             // 获取总页数
     15             totalPageNum = Math.ceil(totalPageNum = arrayLengrh/everyPageNum);
     16             // 显示总页数
     17             $(".totalPage").text(totalPageNum);
     18             // 如果数组大小大于10
     19             if(arrayLengrh > 10){
     20                 $("#chooseDeviceTBody tr").show();
     21                 // 则把后面的全部隐藏
     22                 $("#chooseDeviceTBody tr:gt(9)").hide();
     23             }else{
     24                 // 小于十个也可以显示
     25                 $("#chooseDeviceTBody tr").show();
     26             }
     27             // 点击下一页按钮绑定触发事件
     28             $(".nextPage").click(function(){
     29                 // 判断当期页码是否大于最大页码,如果大于等于,则不触发下一页
     30                 if(current_Num >= totalPageNum){
     31                     return false;
     32                 }else{
     33                     // 执行下一页
     34                     //当前页码加1
     35                     current_Num += 1;
     36                     //显示当前页码
     37                     $(".current_Num").text(current_Num);
     38                     // 让所有tr隐藏出来
     39                     $("#chooseDeviceTBody tr").hide();
     40                     //获取该页显示的起始范围和结束范围
     41                     var start = everyPageNum*(current_Num - 1);
     42                     var end = everyPageNum*current_Num;
     43                     // 判断在start和end中间的显示,其余隐藏
     44                     for(var i = start;i < end;i++){
     45                         $("#chooseDeviceTBody tr").eq(i).show();
     46                     }
     47                 }
     48             });
     49 
     50             // 点击上一页按钮触发事件
     51             $(".prevPage").click(function(){
     52                 // 判断当期页码是否小于等于0,如果小于等于,则不触发上一页
     53                 if(current_Num <= 1){
     54                     return false;
     55                 }else{
     56                     // 执行上一页
     57                     //当前页码减1
     58                     current_Num -= 1;
     59                     //显示当前页码
     60                     $(".current_Num").text(current_Num);
     61                     // 让所有tr隐藏出来
     62                     $("#chooseDeviceTBody tr").hide();
     63                     //获取该页显示的起始范围和结束范围
     64                     var start = everyPageNum*(current_Num - 1);
     65                     var end = everyPageNum*current_Num;
     66                     // 判断在start和end中间的显示,其余隐藏
     67                     for(var i = start;i < end;i++){
     68                         $("#chooseDeviceTBody tr").eq(i).show();
     69                     }
     70                 }
     71             });
     72 
     73             // 点击尾页按钮绑定事件
     74             $(".endPage").click(function(){
     75                 // 判断当期页码是否大于最大页码,如果大于等于,则不触发尾页
     76                 if(current_Num >= totalPageNum){
     77                     return false;
     78                 }else{
     79                     // 执行尾页
     80                     //当前页码赋值为最大页码
     81                     current_Num = totalPageNum;
     82                     //显示当前页码
     83                     $(".current_Num").text(current_Num);
     84                     // 让所有tr隐藏出来
     85                     $("#chooseDeviceTBody tr").hide();
     86                     //获取该页显示的起始范围和结束范围
     87                     var start = everyPageNum*(current_Num - 1);
     88                     var end = everyPageNum*current_Num;
     89                     // 判断在start和end中间的显示,其余隐藏
     90                     for(var i = start;i < end;i++){
     91                         $("#chooseDeviceTBody tr").eq(i).show();
     92                     }
     93                 }
     94             });
     95             $(".jumpTo").click(function(){
     96                 // 获取要跳转到的页码
     97                 var jumpTo = $("#jumpPageNum").val();
     98                 var jumpToInt = parseInt(jumpTo);
     99                 // 如果要跳转的页面不符合要求,则不执行相关操作
    100                 if(jumpToInt < 1 || jumpToInt > totalPageNum){
    101                     // 返回第一页
    102                     current_Num = 1;
    103                 }else{
    104                     current_Num = jumpToInt;
    105                 }
    106                 $(".current_Num").text(current_Num);
    107                 $("#chooseDeviceTBody tr").hide();
    108                 var start = everyPageNum*(current_Num - 1);
    109                 var end = everyPageNum*current_Num;
    110                 for(var i = start;i < end;i++){
    111                     $("#chooseDeviceTBody tr").eq(i).show();
    112                 }
    113             });
    114 
    115             // 跳转首页firstPage
    116             $(".firstPage").click(function(){
    117                 // 判断当期页码是否小于等于1
    118                 if(current_Num <= 1){
    119                     return false;
    120                 }else{
    121                     //当前页码赋值为最小页码
    122                     current_Num = 1;
    123                     //显示当前页码
    124                     $(".current_Num").text(current_Num);
    125                     // 让所有tr隐藏出来
    126                     $("#chooseDeviceTBody tr").hide();
    127                     //获取该页显示的起始范围和结束范围
    128                     var start = everyPageNum*(current_Num - 1);
    129                     var end = everyPageNum*current_Num;
    130                     // 判断在start和end中间的显示,其余隐藏
    131                     for(var i = start;i < end;i++){
    132                         $("#chooseDeviceTBody tr").eq(i).show();
    133                     }
    134                 }
    135             });
    136         } 
    137     </script>
  • 相关阅读:
    模板方法设计模式
    单一职责原则
    开闭原则
    uml
    迭代器模式
    观察者模式
    工厂模式
    代理模式
    idea本地Maven仓库不能下载依赖jar包的解决方案
    selenium 使用教程详解-java版本
  • 原文地址:https://www.cnblogs.com/enjoymylift/p/5974866.html
Copyright © 2011-2022 走看看