zoukankan      html  css  js  c++  java
  • 笔记手动分页

    1.页面 绑定page对象的  pageSize每页大小 和 pageCurren当前页数(隐藏域中保存这两个值),首次请求后台后,把值放上去。

    2.首页,上一页,当前页,下一页,尾页。绑定事件,动态改变pageCurren的值,然后发送请求后台。

    3. 每次后台查询出 总的行数totalRows,根据 pageSize计算出总页数totalPages  (totalRows/pageSize),

      oracle: 开始行数:startRow = (currentPage - 1) * pageSize;   结束行数:currentPage* pageSize

    <div id="pageNumDiv" style="margin-top: 5px;">
        <div style="float: left;">
           <select id="pageSizeSelect" style="height: 20px">   
              <option value="20" selected="selected">20</option>
              <option value="50">50</option>
              <option value="100">100</option>
           </select>
        </div>
        <div style="float: left;">
            <img id="topImg" alt="第一页" src="${pageContext.request.contextPath}/css/common/images/first.gif" style="padding-top: 4px;cursor:pointer;">
        </div>
        <div style="float: left;">
            <img id="prevImg" alt="上一页" src="${pageContext.request.contextPath}/css/common/images/prev.gif" style="padding-top: 4px;cursor:pointer;">
        </div>
        <div style="float: left;">
                               当前页<input type="text" id="txtCurrPage" value="1" style="height: 20px" size="4"/>总页数<span>1</span>
        </div>
        <div style="float: left;">
              <img id="nextImg" alt="下一页" src="${pageContext.request.contextPath}/css/common/images/next.gif" style="padding-top: 4px;cursor:pointer;">
        </div>
        <div style="float: left;">
            <img id="lastImg" alt="最后一页" src="${pageContext.request.contextPath}/css/common/images/last.gif" style="padding-top: 4px;cursor:pointer;">
           </div>
    </div>
    $("#flightDetailListSearchBtn").click(function(){
            $("#txtCurrPage").val("1");
            searchInfo();
        });
    
    
        $("#pageNumDiv div:eq(1)").click(function(){//第一页
            $("#txtCurrPage").val(1);
            searchInfo();
        });
        $("#pageNumDiv div:eq(2)").click(function(){//上一页
            var prePage =  Number($("#txtCurrPage").val())-1;
            if(!isNaN($("#txtCurrPage").val()) && prePage > 0 ){
                $("#txtCurrPage").val( prePage );
                searchInfo();
            }
        });
        $("#pageNumDiv div:eq(4)").click(function(){//下一页
            var nextPage = Number($("#txtCurrPage").val())+1;
            if(!isNaN($("#txtCurrPage").val()) && nextPage <= totalPage){
                $("#txtCurrPage").val(nextPage);
                searchInfo();
            }
        });
        $("#txtCurrPage").keydown(function(event){//回车键
            if(event.keyCode=="13"){
                if(!isNaN($(this).val())){
                    searchInfo();
                }
            }
        });
        $("#pageNumDiv div:eq(5)").click(function(){//最后一页
            $("#txtCurrPage").val(totalPage);
            searchInfo();
        });
        $("#pageNumDiv select").change(function(){
            searchInfo();
        });

    function searchInfo(){
            firstOpen++;
            //分页设置
            $("#pageSize").val($("#pageSizeSelect").val());
            $("#currentPage").val($("#txtCurrPage").val());
            var data = $("#flightDetailListSearchForm").serialize();
    
            $("#flightDetailListDiv").parent().find(".ui-button-text").eq(0).attr("params",data);//绑定参数
            //生成遮盖
            converflexigrid("#flightDetailListWithChooseDiv");
            $.post($path+"/mc/foilManage/goodAnalysisshowList",data,function($data){
                //返回数据之后隐藏遮盖
                removeConverflexigrid("#flightDetailListWithChooseDiv");
                var errorMessage = $data.errorMessage;
                if(errorMessage!=undefined ){
                    hiAlert(errorMessage,"提示");
                }else {
                    var vwStatisticalAnalysisList = $data.vwStatisticalAnalysisList;
                    var html = "";
                    //$("#moreFoilDetail tr:gt(0)").remove();
                    $("#moreFoilDetailList tr").remove();
                    if (vwStatisticalAnalysisList != undefined && vwStatisticalAnalysisList.length > 0) {
                        for (var i = 0; i < vwStatisticalAnalysisList.length; i++) {
                            if (i % 2 == 0) {
                                html = html + "<tr style='background-color: rgb(220, 220, 220);'>";
                            }
                            var moreFoil = vwStatisticalAnalysisList[i];
                            for (var j = 0; j < vwStatisticalAnalysisparamters.length; j++) {
                                var showValue = "";
                                if(moreFoil[vwStatisticalAnalysisparamters[j]]!= undefined ){
                                    showValue = moreFoil[vwStatisticalAnalysisparamters[j]];
                                }
                                html = html + "<td><div class='dataManage_td_div3' style='100%;"+tableWidthCss[j]+"'>" + showValue + "</div></td>";
                            }
                            html = html + "</tr>";
                        }
                        var pager = $data.pager;
                        $("#pageNumDiv div span").html(pager.totalPages);
                        totalPage = pager.totalPages;
                        $("#totalRows").html("总数:"+pager.totalRows);
                    } else {
                        //html = html + "<tr><td colspan='" + vwStatisticalAnalysisColumns.length + "'>暂无数据</td></tr>";
                        var pager = $data.pager;
                        $("#pageNumDiv div span").html("1");
                        totalPage = pager.totalPages;
                        $("#totalRows").html("无记录数");
                        $("#currentPage").val("1");
                    }
                    $("#moreFoilDetailList").append(html);
                }
            },'json');

    后台page核心代码如下:

    	public void setTotalRows(int totalRows) {
    		this.totalRows = totalRows;
    		this.totalPages = totalRows / pageSize;
    		int mod = totalRows % pageSize;
    		if (mod > 0) {
    			this.totalPages++;
    		}
    		if (this.currentPage > totalPages){
    			if(isFor){
    				int forSize = currentPage%totalPages;
    				if(forSize>0){
    					currentPage=forSize;
    				}else{
    					currentPage = totalPages;
    				}
    			}else{
    				this.currentPage = totalPages;
    			}
    		}
    		this.startRow = (currentPage - 1) * pageSize;
    		if (this.startRow < 0) {
    			startRow = 0;
    		}
    		if (this.currentPage == 0 || this.currentPage < 0) {
    			currentPage = 1;
    		}
    	}
    

      

  • 相关阅读:
    前段性能----详细渲染过程
    前段性能----repaint和reflow
    前段性能----缓存机制
    前段性能----带宽与延迟
    前端性能----从输入URL开始到返回数据的中间经历过程
    前端性能----TCP协议
    前端性能----CDN
    前端性能优化-学习链接,待持续更新
    前端性能----图像优化(图片)
    前端性能----静态资源,资源压缩
  • 原文地址:https://www.cnblogs.com/GotoJava/p/6158477.html
Copyright © 2011-2022 走看看