【数据表格】-003-分页实现
2016-01-18 13:15
357 查看
1、前台分页展示界面
2、WebContent/jsp/datagrid_003.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String root = request.getContextPath();
%>
<!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 rel="stylesheet" type="text/css" href="<%=root %>/css/common.css" />
<!-- 引入easyui依赖库 -->
<script type="text/javascript" src="<%=root %>/js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="<%=root %>/js/jquery-easyui-1.2.6/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="<%=root %>/js/jquery-easyui-1.2.6/themes/icon.css" />
<script type="text/javascript" src="<%=root %>/js/jquery-easyui-1.2.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=root %>/js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function() {
$('#t_user').datagrid({
idField:'id', //标识字段，只要创建数据表格,就必须要加 idField
url:'<%=root %>/UserServlet?method=getList', //后台访问地址
title:'用户列表', //表格标题
width:1000, //表格宽度
height:400, //表格高度
fitColumns:true, //自动扩展或收缩列的大小以适应网格宽度和防止水平滚动条
/*
frozenColumns:[[ //冻结列特点，会将列冻结在左边，不能与fitColumns特性一起使用
{field:'username',title:'用户名',width:100}
]],*/
striped:true, //隔行换色，默认值为false
nowrap:true, //当true时，把数据显示在一行;当false时，数据会被换行;默认值为true
loadMsg:'数据正在加载，请耐心等待...',
rownumbers:true, //显示行号，默认为false
singleSelect:true, //当true时，只允许单选，默认为false
remoteSort:false, //定义是否从服务器给数据排序,默认值为true,当为false时,sortName和sortOrder设置才有效
sortName:'salary', //定义可以排序的列
sortOrder:'desc', //定义列的排序顺序，只能用'asc'或'desc'
pagination:true, //在表格底部显示分页栏，默认为false不显示
pageSize:5, //当设置了pagination特性时，初始化每页显示的记录数
pageList:[5,10,15,20,50], //当设置了pagination特性时,初始化页面尺寸的选择列表,默认值[10,20,30,40,50]
rowStyler:function(rowIndex,rowData) { //行样式设置
if(rowData.age>25) {
return "background:red";
}
},
columns:[[ //定义对应后台传过来的列名(field),表格列的名字(title),表格宽度(width),表格列的对齐方式(align)
{field:'username',title:'用户名',width:100},
{field:'password',title:'密码',width:100},
{field:'age',title:'年龄',width:100,align:'right'},
{field:'sex',title:'性别',width:50},
{field:'birthday',title:'生日',width:100},
{field:'city',title:'所属城市',width:100,align:'right'},
{field:'salary',title:'薪水',width:100},
{field:'starttime',title:'开始时间',width:180},
{field:'endtime',title:'结束时间',width:180},
{field:'description',title:'个人描述',width:150}
]]
});
});
</script>
</head>
<body>
<table id="t_user"></table>
</body>
</html>
3、pagination、pageSize和pageList分页特性
4、前台传入后台的分页参数
5、com.easyui.dao.UserDao.java
package com.easyui.dao;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import com.easyui.bean.TUserBean;
import com.easyui.util.DBUtil;
/**
* 用户数据库操作类
* @author LiPiaoShui
*/
public class UserDao {
/**
* 获取全部用户信息
* @return
*/
public List<TUserBean> getList() {
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
List<TUserBean> uList = new ArrayList<TUserBean>();
try {
String sql = "select * from t_user";
conn = DBUtil.getConnection();
pstmt = conn.prepareStatement(sql);
rs = pstmt.executeQuery();
while(rs.next()) {
TUserBean user = new TUserBean();
user.setId(rs.getInt("id"));
user.setUsername(rs.getString("username"));
user.setPassword(rs.getString("password"));
user.setSex(rs.getString("sex"));
user.setAge(rs.getInt("age"));
user.setBirthday(rs.getString("birthday"));
user.setCity(rs.getInt("city"));
user.setSalary(rs.getString("salary"));
user.setStarttime(rs.getString("starttime"));
user.setEndtime(rs.getString("endtime"));
user.setDescription(rs.getString("description"));
uList.add(user);
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
DBUtil.close(rs, pstmt, conn);
}
return uList;
}
/**
* 分页显示用户信息
* @param currentPage
* @param pageSize
* @return
*/
public List<TUserBean> queryByPagination(int currentPage,int pageSize) {
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
List<TUserBean> uList = new ArrayList<TUserBean>();
try {
String sql = "select * from t_user limit ?,?";
conn = DBUtil.getConnection();
pstmt = conn.prepareStatement(sql);
pstmt.setInt(1, (currentPage-1)*pageSize);
pstmt.setInt(2, pageSize);
rs = pstmt.executeQuery();
while(rs.next()) {
TUserBean user = new TUserBean();
user.setId(rs.getInt("id"));
user.setUsername(rs.getString("username"));
user.setPassword(rs.getString("password"));
user.setSex(rs.getString("sex"));
user.setAge(rs.getInt("age"));
user.setBirthday(rs.getString("birthday"));
user.setCity(rs.getInt("city"));
user.setSalary(rs.getString("salary"));
user.setStarttime(rs.getString("starttime"));
user.setEndtime(rs.getString("endtime"));
user.setDescription(rs.getString("description"));
uList.add(user);
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
DBUtil.close(rs, pstmt, conn);
}
return uList;
}
/**
* 获取总用户数
* @return
*/
public int getTotal() {
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
int total = 0;
try {
String sql = "select count(1) from t_user";
conn = DBUtil.getConnection();
pstmt = conn.prepareStatement(sql);
rs = pstmt.executeQuery();
if(rs.next()) {
total = rs.getInt(1);
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
DBUtil.close(rs, pstmt, conn);
}
return total;
}
}
6、com.easyui.servlet.UserServlet.java
package com.easyui.servlet;
import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import com.easyui.bean.TUserBean;
import com.easyui.dao.UserDao;
/**
* 用户控制器类
*
* @author LiPiaoShui
*/
public class UserServlet extends HttpServlet {
private static final long serialVersionUID = 9140830946116659042L;
private UserDao uDao = new UserDao();
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String method = request.getParameter("method");
if ("getList".equals(method)) {
getList(request, response);
}
}
/**
* 获取全部用户信息
*
* @param request
* @param response
*/
private void getList(HttpServletRequest request,
HttpServletResponse response) {
try {
//当前页码
int currentPage = Integer.parseInt(request.getParameter("page"));
//每页显示的大小
int pageSize = Integer.parseInt(request.getParameter("rows"));
// 获取分页显示的用户信息
List<TUserBean> uList = uDao.queryByPagination(currentPage, pageSize);
//获取总用户数
int total = uDao.getTotal();
// json格式 --> {"total":10,"rows":[{},{}]}
String json = "{\"total\":" + total + ",\"rows\":"
+ JSONArray.fromObject(uList).toString() + "}";
response.setContentType("text/html;charset=utf-8");
response.getWriter().write(json);
} catch (Exception e) {
e.printStackTrace();
}
}
}
阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 实现ssm加layui数据表格展示数据，搜索，编辑，分页（后台用pagehelper），排序，查看图片 ，点击查看大图（弹出层）
- JQuery页面的表格数据的增加与分页的实现
- JS实现table表格数据排序(可支持动态数据+分页效果)
- JQuery实现页面的表格数据的增加与分页
- 自己实现的数据表格控件（dataTable），支持自定义样式和标题数据、ajax等各种自定义设置以及分页自定义
- JQuery页面的表格数据的增加与分页的实现
- JS实现table表格数据排序功能(可支持动态数据+分页效果)
- Jquery easyUI—datagrid数据表格分页原理以及实现
- 自己实现的数据表格控件（dataTable），支持自定义样式和标题数据、ajax等各种自定义设置以及分页自定义
- JQuery实现页面的表格数据的增加与分页
- jqgrid 分页时，清空原表格数据加载返回的新数据
- 使用poi实现导出excel数据表格
- EasyUI Datagrid 分页的情况下实现点击表头的小三角图标对数据库中所有数据重新排序
- 用json-lib如何来处理数据，在前台实现分页
- ajax实现数据分页查询
- ASP实现在WEB中显示电子表格数据 显示数据及生成HTML表格
- oracle的存储过程实现数据分页
- C#拼接SQL语句，SQL Server 2005+，多行多列大数据量情况下，使用ROW_NUMBER实现的高效分页排序
- ExtJS4.2学习(六)表格分页与通过后台脚本获得分页数据 推荐
- Vue实现表格中对数据进行转换、处理的方法