分页的具体实现方法

最新推荐文章于 2022-04-15 21:12:26 发布

时间辜负了谁

最新推荐文章于 2022-04-15 21:12:26 发布

阅读量966

点赞数

分类专栏： Java 文章标签：分页

本文链接：https://blog.csdn.net/kpchen_0508/article/details/47810687

版权

Java 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

实例结构图：

直接贴出源码：

1、index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>分页</title>
<link href="static/css/index.css" rel="stylesheet" type="text/css" />
<script src="static/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="static/js/index.js" type="text/javascript"></script>
</head>
<body>
	<div id="inifiniteListViewPage" style="display: block;">
		<div class="paging">
			<a href="javascript:void(0)" class="page-home mou-evt">首页</a> 
			<a href="javascript:void(0)" class="page-prev">上一页</a> 
			<span class="txt">第</span> 
			<span class="page-input-wrap"><input type="text" class="page-input"></span>
			<span class="txt">/<b class="page-all">21</b>页 </span> 
			<a href="javascript:void(0)" class="page-next mou-evt">下一页</a> 
			<a href="javascript:void(0)" class="page-end mou-evt">末页</a>
		</div>
	</div>

</body>
</html>

2、index.css

@CHARSET "UTF-8";

.paging {
	text-align: center;
	margin: 0 auto;
	padding: 5px 0;
	position: relative;
	zoom: 1;
	font: 12px/1.5 tahoma, arial, "宋体";
	color: #666
}

.paging .mou-evt {
	cursor: pointer
}

.paging .disabled {
	cursor: default
}

.paging .disabled:hover {
	background: none;
	color: #545454
}

.paging a,.paging span {
	display: inline-block;
	color: #545454;
	overflow: hidden;
	border: solid 1px #E7ECF0;
	height: 22px;
	line-height: 22px;
	width: 50px;
	margin: 0 2px;
	text-align: center
}

.paging a,.paging a:hover,.paging a:active {
	text-decoration: none;
	color: #666
}

.paging .page-input-wrap {
	width: 32px;
	border: none;
	height: 24px
}

.paging .cur-page {
	height: 22px;
	line-height: 22px;
	width: 50px
}

.paging .txt {
	border: none;
	width: auto
}

.paging .txt b {
	font-weight: normal
}

.paging a:hover,.paging a.sel {
	background-color: #E9F1F7;
	color: #425FC8;
	text-decoration: none
}

.paging .page-input {
	width: 30px;
	height: 22px;
	_height: 21px;
	line-height: 22px;
	padding: 0;
	border: solid 1px #E7ECF0;
	text-align: center;
	margin: 0;
	outline: none
}

3、index.js

var page = {
    event: {},
    data:{},
    initPageData:{}
};

var page = {
	pageNo:1,
	pageTotal:0
};

$(function(){
	page.event.onPageLoad();
});

page.event.onPageLoad = function (){
	//绑定事件
	page.event.bindingEvents();
	
	//加载数据列表
	page.data.loadDataList();
	
	//给页面page和totalPage赋值
	page.initPageData.appendHtml();
};

//绑定分页按钮事件
page.event.bindingEvents = function(){
	$('.page-home').on("click",function(){
		alert("首页");
	});
	$('.page-prev').on("click",function(){
		alert("上一页");
	});
	$('.page-next').on("click",function(){
		alert("下一页");
	});
	$('.page-end').on("click",function(){
		alert("尾页");
	});
	$('.page-input').on("focusout",function(){
		alert($(this).val());
	});
	
};

//加载数据列表
page.data.loadDataList = function(){
	$.ajax({
        url: "/task_findAll.do",
        type: "post",
        data: {keyword:keyword,page:page.pageNo},
        success: function (info) {
            var data = info;
            
           //给全局变量赋值
        	page.pageNo = data.page;
        	page.pageTotal = data.totalPage;
            
            //表格数据 动态添加 start
            appendTableContent(data);
            //表格数据 动态添加 end

        }
    });
};

//表格数据 动态添加 
function appendTableContent(data){
	$("table tbody").html("");
	
	var html = '';
    for(var i = 0; i < data.rows.length; i++){
        html +='<tr>';
        html +='<td><div class="checker"><span><input type="checkbox" name="checkbox" value="'+data.rows[i].taskId+'" /></span></div></td>';
        html +='<td><a href="javascript:void(0);" onclick="jumpToCreate('+data.rows[i].taskId+')" title="'+data.rows[i].taskNameTip+'">'+data.rows[i].taskName+'</a></td>';
        if(data.rows[i].taskComment==""){
            html +='<td><span class="nodata">（空）</span></td>';
        }else{
            html +='<td title="'+data.rows[i].taskCommentTip+'">'+data.rows[i].taskComment+'</td>';
        }
        html +='<td>'+data.rows[i].taskType+'</td>';
        html +='<td>'+data.rows[i].createTime+'</td>';
        html +='<td>'+data.rows[i].userName+'</td>';
        html +='<td>'+data.rows[i].taskStatus+'</td>';

        if(data.rows[i].taskStatus=="正在运行"){
            html +='<td><a href="javascript:void(0);"  onclick="stop('+data.rows[i].taskId+')" title="停止">停止</a><a href="javascript:void(0);"  style="text-decoration: none;color:#B9B7B7;text-decoration:line-through;" title="此任务正在运行不能删除操作">删除</a></td>';
        }else{
            html +='<td><a href="javascript:void(0);" onclick="start('+data.rows[i].taskId+');" title="开始">开始</a><a href="javascript:void(0);" onclick="del('+data.rows[i].taskId+');" title="删除">删除</a></td>';
        }

        html +='</tr>';
    }

    $("table tbody").append(html);
}

page.initPageData.appendHtml = function(){
	$('.page-input').val(page.pageNo);
	$('.page-all').html(page.pageTotal);
};

4、工具类PagerBean.java

package com.ww.pms.utils;

import java.util.List;

import com.alibaba.fastjson.JSONObject;

/**
 * 分页工具类 PagerBean
 *
 * @param <T>
 */
public class PagerBean<T> {
    /**
     * 默认当前页
     */
    private int page;

    /**
     * 每页大小
     */
    private int pageSize;
    /**
     * 查询的结果总数
     */
    private long total;

    /**
     * 对象查询参数
     */
    private T param;
    /**
     * 每页的分页数据
     */
    private List<T> rows;

    /**
     * 总页数
     */
    private int totalPage;

    /**
     * 排序方式 升序还是降序
     */
    private String order;

    /**
     * 排序字段
     */
    private String sort;

    public String getOrder() {
        return order;
    }

    public void setOrder(String order) {
        this.order = order;
    }

    public String getSort() {
        return sort;
    }

    public void setSort(String sort) {
        this.sort = sort;
    }

    public int getPage() {
        return page;
    }

    public void setPage(int page) {
        this.page = page;
    }

    public int getPageSize() {
        return pageSize;
    }

    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }

    public long getTotal() {
        return total;
    }

    public void setTotal(long total) {
        this.total = total;
    }

    public List<T> getRows() {
        return rows;
    }

    public void setRows(List<T> rows) {
        this.rows = rows;
    }

    public int getTotalPage() {
        this.totalPage = (int) this.total % this.pageSize != 0 ? (int) this.total
                / this.pageSize + 1
                : (int) this.total / this.pageSize;
        return totalPage;
    }

    public T getParam() {
        return param;
    }

    public void setParam(T param) {
        this.param = param;
    }

    @Override
    public String toString() {
        return JSONObject.toJSONString(this);
    }

}

6、使用方法

 public void findAll() {
        //封装查询条件
        TaskInfo taskInfo = getTaskInfoCondition();

        PagerBean<TaskInfo> pager = new PagerBean<TaskInfo>();
        pager.setPage(page);
        pager.setPageSize(pageSize);
        pager.setOrder(order);
        pager.setSort(sort);
        // 加入查询条件
        pager.setParam(taskInfo);
        PagerBean<TaskInfoDTO> pagerDto = taskDao.findTaskAll(pager, this.getData_Source());
        log.info("任务列表："+pagerDto.toString());
        this.printToPage(pagerDto.toString());
    }