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;
    		}
    	}
    

      

  • 相关阅读:
    net core 使用 rabbitmq
    asp.net core WebApi 返回 HttpResponseMessage
    asp.net core 2.1 WebApi 快速入门
    JQuery EasyUI combobox动态添加option
    php截取字符去掉最后一个字符
    JQuery EasyUI Combobox的onChange事件
    对于不返回任何键列信息的 selectcommand 不支持 updatecommand 的动态 sql 生成
    Access2007 操作或事件已被禁用模式阻止解决办法
    Easyui 中 Tabsr的常用方法
    Win 7 IE11不能下载文件,右键另存为也不行
  • 原文地址:https://www.cnblogs.com/GotoJava/p/6158477.html
Copyright © 2011-2022 走看看