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