使用jQuery实现伪分页

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

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

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

 <!-- 伪分页实现 -->

     <script type="text/javascript">

         function pretendDevide(){

             // 每页显示的条数

             var everyPageNum = 10;

             // 当前的页数

             var current_Num = 1;

             // 拿到有所有已选设备组成的数组

             var tbodyNode = $("#chooseDeviceTBody tr").toArray();

             // 获取数组的长度

             var arrayLengrh = tbodyNode.length;

             // 设置总条数

             $(".totalNum").text(arrayLengrh);

             // 获取总页数

             totalPageNum = Math.ceil(totalPageNum = arrayLengrh/everyPageNum);

             // 显示总页数

             $(".totalPage").text(totalPageNum);

             // 如果数组大小大于10

             if(arrayLengrh > 10){

                 $("#chooseDeviceTBody tr").show();

                 // 则把后面的全部隐藏

                 $("#chooseDeviceTBody tr:gt(9)").hide();

             }else{

                 // 小于十个也可以显示

                 $("#chooseDeviceTBody tr").show();

             }

             // 点击下一页按钮绑定触发事件

             $(".nextPage").click(function(){

                 // 判断当期页码是否大于最大页码，如果大于等于，则不触发下一页

                 if(current_Num >= totalPageNum){

                     return false;

                 }else{

                     // 执行下一页

                     //当前页码加1

                     current_Num += 1;

                     //显示当前页码

                     $(".current_Num").text(current_Num);

                     // 让所有tr隐藏出来

                     $("#chooseDeviceTBody tr").hide();

                     //获取该页显示的起始范围和结束范围

                     var start = everyPageNum*(current_Num - 1);

                     var end = everyPageNum*current_Num;

                     // 判断在start和end中间的显示，其余隐藏

                     for(var i = start;i < end;i++){

                         $("#chooseDeviceTBody tr").eq(i).show();

                     }

                 }

             });

             // 点击上一页按钮触发事件

             $(".prevPage").click(function(){

                 // 判断当期页码是否小于等于0，如果小于等于，则不触发上一页

                 if(current_Num <= 1){

                     return false;

                 }else{

                     // 执行上一页

                     //当前页码减1

                     current_Num -= 1;

                     //显示当前页码

                     $(".current_Num").text(current_Num);

                     // 让所有tr隐藏出来

                     $("#chooseDeviceTBody tr").hide();

                     //获取该页显示的起始范围和结束范围

                     var start = everyPageNum*(current_Num - 1);

                     var end = everyPageNum*current_Num;

                     // 判断在start和end中间的显示，其余隐藏

                     for(var i = start;i < end;i++){

                         $("#chooseDeviceTBody tr").eq(i).show();

                     }

                 }

             });

             // 点击尾页按钮绑定事件

             $(".endPage").click(function(){

                 // 判断当期页码是否大于最大页码，如果大于等于，则不触发尾页

                 if(current_Num >= totalPageNum){

                     return false;

                 }else{

                     // 执行尾页

                     //当前页码赋值为最大页码

                     current_Num = totalPageNum;

                     //显示当前页码

                     $(".current_Num").text(current_Num);

                     // 让所有tr隐藏出来

                     $("#chooseDeviceTBody tr").hide();

                     //获取该页显示的起始范围和结束范围

                     var start = everyPageNum*(current_Num - 1);

                     var end = everyPageNum*current_Num;

                     // 判断在start和end中间的显示，其余隐藏

                     for(var i = start;i < end;i++){

                         $("#chooseDeviceTBody tr").eq(i).show();

                     }

                 }

             });

             $(".jumpTo").click(function(){

                 // 获取要跳转到的页码

                 var jumpTo = $("#jumpPageNum").val();

                 var jumpToInt = parseInt(jumpTo);

                 // 如果要跳转的页面不符合要求，则不执行相关操作

                 if(jumpToInt < 1 || jumpToInt > totalPageNum){

                     // 返回第一页

                     current_Num = 1;

                 }else{

                     current_Num = jumpToInt;

                 }

                 $(".current_Num").text(current_Num);

                 $("#chooseDeviceTBody tr").hide();

                 var start = everyPageNum*(current_Num - 1);

                 var end = everyPageNum*current_Num;

                 for(var i = start;i < end;i++){

                     $("#chooseDeviceTBody tr").eq(i).show();

                 }

             });

             // 跳转首页firstPage

             $(".firstPage").click(function(){

                 // 判断当期页码是否小于等于1

                 if(current_Num <= 1){

                     return false;

                 }else{

                     //当前页码赋值为最小页码

                     current_Num = 1;

                     //显示当前页码

                     $(".current_Num").text(current_Num);

                     // 让所有tr隐藏出来

                     $("#chooseDeviceTBody tr").hide();

                     //获取该页显示的起始范围和结束范围

                     var start = everyPageNum*(current_Num - 1);

                     var end = everyPageNum*current_Num;

                     // 判断在start和end中间的显示，其余隐藏

                     for(var i = start;i < end;i++){

                         $("#chooseDeviceTBody tr").eq(i).show();

                     }

                 }

             });

         }

     </script>

巴特西

使用jQuery实现伪分页

最新文章

热门文章