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