您的位置：首页 > 其它

分页的具体实现方法

2015-08-20 17:12 274 查看

实例结构图：



直接贴出源码：

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.iflytek.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());
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航