笔记--------手动分页

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=‘width: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;
		}
	}

  

时间: 2025-01-15 20:41:15

笔记--------手动分页的相关文章

纯js手动分页

昨天让做个页面,后台提供所有数据,没有做好分页,需要前端js手动分页. 我参考了 http://www.cnblogs.com/jiechn/p/4095029.html 做了些许改动让分页效果更加完善. 最终效果图 js代码 /** * 分页函数 * pno--页数 * psize--每页显示记录数 * 分页部分是从真实数据行开始,因而存在加减某个常数,以确定真正的记录数 * 纯js分页实质是数据行全部加载,通过是否显示属性完成分页功能 **/ function goPage(pno){ va

paginate分页及手动分页

Paginate分页 //ORM 默认分页 $students=Student::paginate(5); //显示 $students->render(); // 使用简单模板 - 只有 "上一页" 或 "下一页" 链接 Student::where('cars', 2)->simplePaginate(15); // 手动分页 $item //手动查询到的数据 $total //所有符合条件的数据总数量 $perPage //每个页面,数据显示的条数

Laravel 手动分页实现

Laravel 手动分页实现 基于5.2版本 在开发过程中有这么一种情况,你请求Java api获取信息,由于信息较多,需要分页显示.Laravel官方提供了一个简单的方式paginate($perPage),但是这种方法只适用model.查询构建器. 今天说下 给定一个数组如何实现 和paginate方法一样的效果. 查看paginate方法源码 #vendor/laravel/framework/src/Illuminate/Database/Eloquent/Builder.php:480

114.实现手动分页效果

分页 在网站的开发当中,我们常常需要将各种列表中的数据分页显示,想要实现分页的效果,就可以通过django.core.Paginator.Paginator和django.core.Paginator.Page来实现. 1. 比如,将Paginator_pageAPP中表article中的range(1,100)的数据分页显示,每页显示10条数据,可以实现手动分页的效果. (1)首先在models.py文件中定义模型Article,示例代码如下: from django.db import mo

关于laravel 得手动分页问题

一般得分页,我们只需要使用paginate方法,就可以简单得搞定.但是遇到数组得组合情况呢?这个时候,就需要我们使用自定义分页了.首先我们看下laravel得分页方法源码: #vendor/laravel/framework/src/Illuminate/Database/Eloquent/Builder.php:480 public function paginate($perPage = null, $columns = ['*'], $pageName = 'page', $page =

Codeigniter入门学习笔记10—分页

很久很久以前学习Codeigniter的笔记记录,很随意,但都是自己记录的,希望对需要的人有所帮助. 本文使用word2013编辑并发布 Postbird | There I am , in the world more exciting! Postbird personal website : http://www.ptbird.cn ? 分页 public function fenye(){ ????????????//加载分页的控制器 ????????????????$this->load

【安全牛学习】笔记手动漏洞挖掘(三)

手动漏洞挖掘 Directory travarsal / File include(有区别/没区别) 目录权限限制不严 / 文件包含 /etc/php5/cgi/php.ini allow_url_include = on 应用程序功能操作文件,限制不严时导致访问WEB目录以外的文件 读.写文件.远程执行代码 特征但不绝对 ?page=a.php ?home=b.html ?file=content [email protected]:~$ ifconfig [email protected]:

lucene学习笔记四(分页查询)

/**  * 根据页码和分页大小获取上一次最后一个ScoreDoc  * @param pageIndex  * @param pageSize  * @param query  * @param indexSearcher  * @return  * @throws IOException  */ private ScoreDoc getLastScoreDoc(int pageIndex,int pageSize,Query query,IndexSearcher indexSearcher

mysql优化笔记之分页

过年闲得蛋疼,于是看看mysql优化,看了网上好多关于分页的优化方法,但是呢,我亲自试上一把的时候,没有出现他们说的现象...难道是我的机器问题么? 下面看看我的实践记录,希望看到的加入进来交流一下O(∩_∩)O~ 以下采用常规分页和网上大伙都提倡的做法: offset较小时: 常规做法 可以看出当limit offset较小时分页用常规做法的执行时间是0.01s. 当limit offset较小时采用另一种特殊的方法,在这种情况下,确实是符合大伙的推荐做法,即在 limit offset 较小