使用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>

 

转载于:https://www.cnblogs.com/enjoymylift/p/5974866.html