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(); } } }
相关推荐
第03讲:uni-pagination实现表格分页查询
html前端获取后端js的数据,实现到html表格,并且实现表格分页显示,分页显示原理是要显示那一页数据就从后端获取需要显示页的数据,不会一次性获取全部数据,减小流前端的压力。后端使用js+express,读取csv文件...
利用jquery实现表格动态分页,前台用jquery实现。后台用java实现动态查询数据,分页。
亲测 vue el-table前端使用file-saver组件,导出excel ,可导出分页数据,里面有详细步骤
Spring Boot+MybatisPlus使用JQuery DataTables表格插件展示数据、实现分页和模糊查询等功能
qt表格自定义model,支持分页展示,支持上一页、下一页、跳转页,总页数等功能, 配合则我的另外一个表格资源学习,效果更佳
使用JDBC实现数据库工具类,使用工具类连接数据库,使用EasyUI连接后台实现数据表格的展示和分页功能
使用 Bootstrap-table表格进行分页,表格汇总统计,方便我们做报表
jQuery分页动态数据表格插件是一款默认设置表格行数显示,支持页码跳转。
jQuery动态表格数据分页检索排序代码,纯前端实现搜索功能(非原创)
jQuery bootstrap带分页表格数据搜索筛选代码
// 每页显示数据条数,默认为10条记录 private int currentPage = 1; // 当前页数 private boolean hasPrevious = false; // 是否有上一页 private boolean hasNext = false; // 是否有下一页 public int ...
利用jquery实现表格动态...表格数据的总记录数,每页条数,总页数,上/下一页,首页,末页等基本功能元素都有相应的函数实现,可作为基本分页功能的学习。 缺点:css文件涉及的图片是缺失的,用户可自行寻找图片代替。
今天小编就为大家分享一篇Layui实现数据表格默认全部显示(不要分页),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
实现了从后台读取数据,并进行分页显示,从后台读取treepanel数据,显示,并实现了点击节点复选框的时候,出现父节点和子节点的联动,运行环境是vs2008
主要为大家详细介绍了layui实现数据表格table分页功能、异步加载,表格渲染,含条件查询,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
4. 实现表格分页功能,可指定是否开启分页功能及每页行数; 5. 排序数据支持数据类型自动识别(这点很强大)。例如:整型数据、浮点型数据、字母、电话号码、日期、链接 6. 表格外观样式可通过CSS灵活定制 7. 所需要...
最近用到ng-table,根据网上一通搜索,最终确认使用ng-table作为表格展示,但是也有一些不尽如人意的地方,例如,分页的控件说实在的难以接受。后期再想办法完善吧。 一般网上的例子都是简单例子,并且都是客户端...
本文实例为大家分享了vue+Element-ui前端实现分页效果的具体代码,供大家参考,具体内容如下 分页技术 分页技术的概念 分页就是将所有的数据分段展示给用户,用户看到的可能不是全部的数据,而是其中一部分,用户...
绑定table数据进行分页,里面的sql.txt文件是分页套用的公式。