使用PageBean进行分页和Ajax显示

效果图:

PageBean 代码:

/**
 * 
 */
package com.project.bean;

import java.util.List;

/**
 * @author howroad
 * @Date 2018年1月16日
 * @version 1.0
 * @version 1.1 准备删除无参构造器
 */
public class PageBean<T> {
	private List<T> list;
	private int pageNo;
	private int pageSize;
	private int totalPage;
	private int totalRecord;
	public PageBean(List<T> list, int pageNo, int pageSize, int totalRecord) {
		this.list = list;
		this.pageNo = pageNo;
		this.pageSize = pageSize;
		this.totalRecord = totalRecord;
		this.totalPage = totalRecord % pageSize == 0 ? totalRecord / pageSize : totalRecord / pageSize + 1;
	}
	public boolean hasPrev(int pageNo) {
		return pageNo > 1;
	}
	public boolean hasNext(int pageNo) {
		return pageNo < this.totalPage;
	}
	public List<T> getList() {
		return list;
	}
	public void setList(List<T> list) {
		this.list = list;
	}
	public int getPageNo() {
		return pageNo;
	}
	public void setPageNo(int pageNo) {
		this.pageNo = pageNo;
	}
	public int getPageSize() {
		return pageSize;
	}
	public void setPageSize(int pageSize) {
		this.pageSize = pageSize;
	}
	public int getTotalPage() {
		return totalPage;
	}
	public void setTotalPage(int totalPage) {
		this.totalPage = totalPage;
	}
	public int getTotalRecord() {
		return totalRecord;
	}
	public void setTotalRecord(int totalRecord) {
		this.totalRecord = totalRecord;
	}
	@Override
	public String toString() {
		return "PageBean [list=" + list + ", pageNo=" + pageNo + ", pageSize=" + pageSize + ", totalPage=" + totalPage
				+ ", totalRecord=" + totalRecord + "]";
	}
}

Jsp代码:

                    <table class="table table-bordered table-hover table-striped" id="my_table">
                    <thead>
                    <tr>
                        <th>事件名称</th>
                        <th>日期</th>
                        <th>发生位置</th>
                        <th>防治方案</th>
                        <th>灾情状况</th>
                    </tr>
                    </thead>
                    <tbody id="dlog_tbody"></tbody>
                </table>

				<nav class="text-center">
				 	<ul class="pagination" id="page_nav"></ul>
				</nav>

<input type="hidden" id="hid" value="0"/> 

Js代码

	function show_list(pageNo){
		$.ajax({
			method:"post",
			url:"/Disaster/ShowDlogAjaxServlet",
			data:{
				pageNo:pageNo,
				dlogName:$("#dlog_name").val(),
				dlogStage:$("#dlog_stage").val(),
				areaName:$("#area_name").val(),
				startDate:$("#start_date").val(),
				endDate:$("#end_date").val()
			},
			success:function(msg){
				json_to_table(msg,"my_table",["dlogId","dlogName","dlogDate","dlogArea.areaName","dlogPlan",disaster_satge_arr,"dlogStage"]);
				$("#hid").val("0");
			}
		});
	}

JS代码2

			//分页开始
			page_no = jsonArr.pageNo;
			total_page = jsonArr.totalPage;
			create_page_btn(page_no,total_page,"onpage");
			pageNo=page_no;
			//分页结束
			$("#hid").val("");

我封装的Js方法

/*
 * 用于分页的js工具
 * @author:howroad
 * @date:2018年4月10日
html页面必须要有的
1.分页按钮
<nav class="text-center">
	<ul class="pagination" id="page_nav"></ul>
</nav>
2.table id
3.隐藏表单 id:hid
*/

//分页工具
/**
 * 将ajax接受到的msg转化成table的数据
 * @param msg ajaxsuccess中的参数
 * @param table_id_str 字符串格式的table_id
 * @param propertys_arr msg中的list里面的每一个对象的属性名称
 * 		如果需要用数组修饰,在前面加一个数组(很少用),
 * 		如果是对象中的对象,用点来连接即可
 * @returns void
 * 例子:
 * json_to_table(msg,"my_table",["areaId","areaName","areaForest",land,"areaLand","areaAdv","areaClass.clsName"]);
 * json_to_table(msg,"my_table",["dlogId","dlogName","dlogDate","dlogArea.areaName","dlogPlan",disaster_satge_arr,"dlogStage"]);
 * json_to_table(msg,"my_table",["clsId","clsName","clsPerson","clsTel","clsArea.areaName"]);
 * 
 */
function json_to_table(msg,table_id_str,propertys_arr){
	var ojson = JSON.parse(msg);//转换成json对象
	page_no = ojson.pageNo;//当前页码
	var page_size = ojson.pageSize;//分页记录数量
	total_page = ojson.totalPage;//总页数
	var total_record = ojson.totalRecord;//总记录数
	var olist = ojson.list;//需要显示的数据
	var str = "";
	for(var i=0;i<olist.length;i++){
		str +="<tr index="+olist[i][propertys_arr[0]]+">";//ID
		for(var j=1;j<propertys_arr.length;j++){
			if(Array.isArray(propertys_arr[j])){
				str +="<td>"+propertys_arr[j][olist[i][propertys_arr[++j]]]+"</td>";//如果是数组
			}else if(propertys_arr[j].indexOf(".")!=-1){//判断是否有逗号
				var arr=propertys_arr[j].split('.');
				if(olist[i][arr[0]]==null){
					str +="<td></td>";
				}else{
					str +="<td>"+olist[i][arr[0]][arr[1]]+"</td>";//只判断两层即可
				}
				
			}else{
				str +="<td>"+olist[i][propertys_arr[j]]+"</td>";//其他属性
			}
		}
	}
	str += "</tr>";
	//填充表格
	for(var i=0;i<page_size-olist.length;i++){
		str+="<tr style='height:36.8px;'>";
		for(var j = 0;j<$("#"+table_id_str+" thead tr th").length;j++) {
			str+="<td></td>";
		}
		str+="</tr>"
	}	
	$("#"+table_id_str+" tbody").html(str);
	//绑定点击事件
	$("#"+table_id_str+" tbody tr").click(function(){
		$("#"+table_id_str+" tbody tr").removeClass("as");
		$(this).addClass("as");
		$("#hid").val($(this).attr("index"));
	});
	//分页按钮
	create_page_btn(page_no,total_page,"show_list");
}

//分页按钮跳转事件
function jump_page(){
	var page = $("#jump_input").val();
	if(page>=1){
		page=page>total_page?total_page:page;
		show_list(page);
	}else{
		$("#jump_input").val("");
	}
}

//只负责分页按钮显示的
function create_page_btn(page_no,total_page,show_list){
	var str2 = "";
	str2 +="<li "+(page_no==1?"class='active'":"")+"><a href='javascript:"+show_list+"(1)'>第 1 页</a></li>";
	var temp1 = page_no<=1?1:(page_no-1);
	str2 +="<li "+(page_no==1?"class='disabled'":"")+"><a href='javascript:"+show_list+"("+temp1+")'>上一页</a></li>";
	str2 +="<li><a>"+page_no+"</a></li>";
	str2 +="<li><a class='input-group input-group-sm' style='padding:5px 5px'><input type='text' class='form-control' style='width:50px;height:22px' id='jump_input'/></a></li>";
	str2 +="<li><a href='javascript:jump_page()'>跳转</a></li>";
	var temp2 = page_no>=total_page?total_page:(page_no+1);
	str2 +="<li "+(page_no==total_page?"class='disabled'":"")+"><a href='javascript:"+show_list+"("+temp2+")'>下一页</a></li>";
	str2 +="<li "+(page_no==total_page?"class='active'":"")+"><a href='javascript:"+show_list+"("+total_page+")'>第 "+total_page+" 页</a></li>";
	$("#page_nav").html(str2);
}