JS:js配合数据库（oracle）实现前台分页

这是自己在公司某次需求中做的（其实是被迫的），当时项目是webForm的，我在里做二次开发（新增一些功能），没有用传统的WebForm开发模式，用的一般处理程序模式（在我其他文章有讲）。所有不能用项目里自带的分页所以自己弄了一个这样的分页，不多bb,开始！

首先看下最终结果

样式不咋地，下面是html代码

//样式部分
<scipt type="text/css">
      #FY_UL li:hover {
            cursor: pointer;
        }

        #FY_UL li {
            float: left;
            width: 40px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            /*border: 1px solid black;*/
            margin-left: 0px;
        }

        #FY_UL {
            display: none;
        }

</script>
     
//html部分
 <div id="fy_div" style="width: 100%;">
                <ul id="FY_UL" style="margin-top: 2px; float: right;">
                    <li id="HomePage">首頁</li>
                    <li id="PreviousPage">上一頁</li>
                    <li id="CurrentPage" style="width: 80px;">當前頁：<span class="curPage"></span></li>
                    <li id="NextPage">下一頁</li>
                    <li id="EndPage">尾頁</li>
                    <li id="TotalPages" style="width: 80px;">總頁數：<span class="ttlPage"></span></li>
                    <%--總頁數---%>
                    <li id="CountPage" style="width: 80px;">總條數：<span class="cutPage"></span></li>
                    <%--總條數---%>
                </ul>
 </div>

以下面页面为示例 最终结果

以下为js

           ///首頁跳轉
            $("#HomePage").click(function () {
                Page("SY")
            })
            ///上一頁
            $("#PreviousPage").click(function () {
                Page("S")
            })
            //下一頁
            $("#NextPage").click(function () {
                Page("X")
            })
            //尾頁
            $("#EndPage").click(function () {
                Page("W");
            })
     //參數 尾頁為W   首頁為SY 下一頁為X  上一頁為S  查詢為C  參數名TYPE
        function Page(TypeS) {
            //默認查詢第一頁
            var RN_BEGIN = 1;
            var RN_END = 10;
            //獲取當前頁
            var curPageS = $(".curPage").html();
            //獲取總行數 
            var cutPageS = $(".cutPage").html()
            //獲取總頁數  
            var ttlPageS = $(".ttlPage").html()
            var index = 1;
            var txt_startdate = "";
            var txt_enddate = "";
            var Company_NAME = "";
            var MD_NAME = "";
            if (TypeS == "C") {   //查询 获取当前页面值
               //这里写参数
            } else if (TypeS == "X") {
                 //下一页：获取当前页数+1 如果大于总页数 退出方法
                if ((Number(curPageS) + 1) > ttlPageS) {
                    return;
                }
                //总页数等于1时退出
                if (ttlPageS == "1") {
                    return;
                } else {
                
                    RN_BEGIN = (Number(curPageS) * 10) + 1; //开始行数
                    RN_END = (Number(curPageS) + 1) * 10;  //结束行数
                }
                index = Number(curPageS) + 1;
            } else if (TypeS == "S") {   //上一页 
                if (Number(curPageS) - 1 == 0) {   //当前页减1小于1的情况下退出
                    return;
                }
                RN_BEGIN = ((Number(curPageS) * 10) + 1) - 20;  //以21为例 当前页3 乘以每页显示数量 10 等于30  然后加1 等于31   31-20=11
                RN_END = (Number(curPageS) - 1) * 10; 

                index = Number(curPageS) - 1;
            } else if (TypeS == "W") { //尾页
                RN_BEGIN = (ttlPageS * 10) - 9; //获取最后一页的第一条 21条有三页  3*10-9=21
                RN_END = Number(ttlPageS) * 10;//页数乘以10得到最后条
                index = ttlPageS;
            } else if (TypeS == "SY") {  //首页
                RN_BEGIN = 1;
                RN_END = 10;
            }
            //alert(LICENSING_ORG + "," + COMPANY_NAME);
            $.ajax({
                type: 'POST',
                url: 'DC_TransportPack.ashx',  ///此内容在我其他文章一讲到《一般处理程序开发》
                data: { action: "SELECT", V_BEGIN_DATE: txt_startdate, V_END_DATE: txt_enddate, V_COMPANY_NAME: Company_NAME, V_ORG_NAME: MD_NAME, V_RN_BEGIN: RN_BEGIN, V_RN_END: RN_END },
                success: function (data) {
                    //console.log(data);    
                   
                    var obj = GetEval(data);//把json 字符串 转换成数组
                    $(".JSON").remove();  //删除原有数据
                    if (obj.length > 0) {
                        
                        //拼table
                            count = val["COUNTS"]; //
                           
                        })
                       // $("#COUNT").html(SUM);
                       //$("#table_list tr:eq(1)").css("display", "block");
                        $("#FY_UL").css("display", "block");//分页的显示和影藏
                        $(".cutPage").html(count); ///赋值总行数

                        //初次加載
                        $(".curPage").html(index);//赋值当前页
                        // $("#TotalPages").html("總頁數:" + (count + 10 - 1) / 10);
                        var s = count % 10 == 0 ? count / 10 : Math.ceil(count / 10);
                        $(".ttlPage").html(s);//赋值总页数
                        $("#table_list").append(_tr);//数据显示
                    } else {
                        $(".JSON").remove();
                        $("#FY_UL").css("display", "none");
                        //$("#table_list tr:eq(1)").css("display", "none");
                        alert("無數據")
                    }
                }
            })

        }

接下来就是sql了

   OPEN P_CURTYPE FOR
      WITH MODULES AS
       (SELECT 
             需要展示的栏位
          FROM  Table  T )
      SELECT *
        FROM (SELECT ROWNUM AS RN,  //给每行数据一个序号
                    
                     (SELECT COUNT(1) FROM MODULES) AS COUNTS //计算总行数
                FROM MODULES T
               WHERE ROWNUM <= RN_END //传入的参数总结束行数
               ) UA
       WHERE UA.RN >= RN_BEGIN //传入的参数 开始行数
       );

数据库查询的结果

最终页面展示结果在第二张图