easyui分页的实现

最新推荐文章于 2020-09-18 21:03:50 发布
最新推荐文章于 2020-09-18 21:03:50 发布
阅读量8k 收藏 5
点赞数 13
分类专栏： EasyUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/openlms/article/details/8991468
版权

弄了整个下午，终于把easyui的dategird分页做出来了。

网上很多例子个人感觉讲的不是很详细，自己把辛辛苦苦总结的贴出来，希望能给大家学习参考一下！共勉。。。。

直接上效果如下：

第二页的数据如下：

不讲太多的理论，开始上代码：

<%@ page language="java" contentType="text/html; charset=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">
<meta name="keywords" content="jquery,ui,easy,easyui,web">
<meta name="description"
	content="easyui help you build your web page easily!">
<title>用户管理</title>
<link rel="stylesheet" type="text/css"
	href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<link rel="stylesheet" type="text/css" href="demo.css">
<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script type="text/javascript" src="../easyui-lang-zh_CN.js"></script>
<style type="text/css">
#fm {
	margin: 0;
	padding: 10px 30px;
}

.ftitle {
	font-size: 14px;
	font-weight: bold;
	color: #666;
	padding: 5px 0;
	margin-bottom: 10px;
	border-bottom: 1px solid #ccc;
}

.fitem {
	margin-bottom: 5px;
}

.fitem label {
	display: inline-block;
	width: 80px;
}
</style>


<script type="text/javascript">
	var url;
	function newUser() {
		$('#dlg').dialog('open').dialog('setTitle', '添加用户');
		$('#fm').form('clear');
		url = '../saveServlet?param=add'; //保存用户的url
	}
	function editUser() {
		var row = $('#dg').datagrid('getSelected');
		if (row) {
			$('#dlg').dialog('open').dialog('setTitle', 'Edit User');
			$('#fm').form('load', row);
			url = '../saveServlet?param=update&id=' + row.id;
		}
	}
	function saveUser() {
		$('#fm').form('submit', {
			url : url,
			onSubmit : function() {
				return $(this).form('validate');
			},
			success : function(result) {

				var date = eval('(' + result + ')');
				if (date.success) {
					$('#dlg').dialog('close'); // close the dialog
					$('#dg').datagrid('reload'); // reload the user data
				} else {
					$.messager.show({
						title : 'Error',
						msg : result.msg
					});
				}
			}
		});
	}
	function removeUser() {
		var row = $('#dg').datagrid('getSelected');
		if (row) {
			$.messager.confirm('Confirm',
					'Are you sure you want to remove this user?', function(r) {
						if (r) {
							$.post('../saveServlet?param=delete', {
								id : row.id
							}, function(result) {
								if (result.success) {
									$('#dg').datagrid('reload'); // reload the user data
								} else {
									$.messager.show({ // show error message
										title : 'Error',
										msg : result.msg
									});
								}
							}, 'json');
						}
					});
		}
	} 
</script>
</head>
<body>
	<h2>学生信息管理</h2>
	<div class="demo-info" style="margin-bottom: 10px">
		<div class="demo-tip icon-tip"> </div>
		<div>点击下面的添加按钮，实现添加用户</div>
	</div>

	<table id="dg" title="用户管理" class="easyui-datagrid"
		style="width: 1041px; height: 430px" url="../getUserServlet"
		toolbar="#toolbar"  rownumbers="true" pagination="true"  pageSize=10
		fitColumns="true" singleSelect="true">
		<thead>
			<tr>
				<th field="no" width="50">学号</th>
				<th field="username" width="30">用户名</th>
				<th field="password" width="30">密码</th>
				<th field="sex" width="20">性别</th>
				<th field="dept" width="50">学院</th>
				<th field="majorName" width="50">专业名称</th>
				<th field="studentCatagory" width="30">学生类别</th>
				<th field="entranceDate" width="50">入学日期</th>
				<th field="degreeType" width="30">学位类型</th>
				<th field="degreePaperTitle" width="80">学位论文题目</th>
				<th field="guideTeacher" width="30">指导老师</th>
				<th field="studyDirection" width="80">研究方向</th>
			</tr>
		</thead>
	</table>
	<div id="toolbar">
		<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"
			οnclick=newUser();>添加</a> <a href="#" class="easyui-linkbutton"
			iconCls="icon-edit" plain="true" οnclick=editUser();>修改</a> <a
			href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"
			οnclick=removeUser();>删除</a>
	</div>

	<div id="dlg" class="easyui-dialog"
		style="width: 400px; height: 380px; padding: 10px 20px" closed="true"
		buttons="#dlg-buttons">
		<div class="ftitle">添加用户</div>
		<form id="fm" method="post" novalidate>

			<div class="fitem">
				<label> 学号: </label> <input name="no" class="easyui-validatebox"
					required="true">
			</div>
			<div class="fitem">
				<label> 用户名: </label> <input name="password"
					class="easyui-validatebox" required="true">
			</div>
			<div class="fitem">
				<label> 密码: </label> <input name="password">
			</div>
			<div class="fitem">
				<label> 性别: </label> <input class="easyui-combobox"
					name="sex"
					data-options="
								url:'sex_data.json',
								valueField:'id',
								textField:'text',
								panelHeight:'auto'
						">
			</div>
			<div class="fitem">
				<label> 学院: </label> <input name="dept" class="easyui-validatebox"
					required="true">
			</div>
			<div class="fitem">
				<label> 专业名称: </label> <input name="majorName"
					class="easyui-validatebox" required="true">
			</div>
			<div class="fitem">
				<label> 学生方向: </label> <input name="studentCatagory"
					class="easyui-validatebox" required="true">
			</div>
			<div class="fitem">
				<label> 入学日期: </label> <input class="easyui-datetimebox"
					name="enterceDate" data-options="required:true"
					value="1/9/2013 12:00:00 " style="width:150px">
			</div>
			<div class="fitem">
				<label> 学位类型: </label> <input class="easyui-combobox"
					name="degreeType"
					data-options="
								url:'combobox_data.json',
								valueField:'id',
								textField:'text',
								panelHeight:'auto'
						">
			</div>
			<div class="fitem">
				<label> 学位论文题目: </label> <input name="degreePaperTitle"
					class="easyui-validatebox" required="true">
			</div>
			<div class="fitem">
				<label> 指导老师: </label> <input name="guideTeacher"
					class="easyui-validatebox" required="true">
			</div>
			<div class="fitem">
				<label> 研究方向: </label> <input name="studyDirection"
					class="easyui-validatebox" required="true">
			</div>
		</form>
	</div>
	<div id="dlg-buttons">
		<a href="#" class="easyui-linkbutton" iconCls="icon-ok"
			οnclick=saveUser();>保存</a> <a href="#" class="easyui-linkbutton"
			iconCls="icon-cancel" οnclick="javascript:$('#dlg').dialog('close');">取消</a>
	</div>
</body>
</html>
web.xml文件 

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	version="2.5">

	<welcome-file-list>
		<welcome-file>index-demo.jsp</welcome-file>
	</welcome-file-list>
	<servlet>
		<servlet-name>BackGroundService</servlet-name>
		<servlet-class>com.demo.upload.BackGroundService</servlet-class>
	</servlet>
	<servlet>
		<servlet-name>SaveServlet</servlet-name>
		<servlet-class>com.demo.servlet.SaveServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>SaveServlet</servlet-name>
		<url-pattern>/saveServlet</url-pattern>
	</servlet-mapping>
	<servlet>
		<servlet-name>GetUserServlet</servlet-name>
		<servlet-class>com.demo.servlet.GetUserServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>GetUserServlet</servlet-name>
		<url-pattern>/getUserServlet</url-pattern>
	</servlet-mapping>
	<servlet-mapping>
		<servlet-name>BackGroundService</servlet-name>
		<url-pattern>/BackGroundService</url-pattern>
	</servlet-mapping>
	<servlet>
		<servlet-name>autoComplete</servlet-name>
		<servlet-class>com.demo.servlet.AutoCompleteServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>autoComplete</servlet-name>
		<url-pattern>/autoComplete</url-pattern>
	</servlet-mapping>
</web-app>
GetUserServlet.java 
package com.demo.servlet;

import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;



import com.demo.dao.UserDao;
import com.demo.json.util.Pager;
import com.demo.service.impl.UserServiceImpl;
import com.demo.vo.User;
import com.google.gson.Gson;
import com.google.gson.JsonArray;

public class GetUserServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		String page = request.getParameter("page"); // 当前页数
		String rows = request.getParameter("rows"); // 每页显示行数
		System.out.println(page + "--" + rows);
		PrintWriter out = response.getWriter();
		UserServiceImpl serviceImpl;
		try {
			serviceImpl = new UserServiceImpl();
			//String msg = serviceImpl.selectAllUser(page, rows);
			UserDao dao = new UserDao();
			List<User> list = dao.select(page, rows);
			int total=dao.count();
			Pager p = new Pager();
			p.setRows(list);
			p.setTotal(total);
			Gson gson=new Gson();
			String msg=gson.toJson(p);
			out.print(msg);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}

	}
}

public List<User> select(String page, String rows) throws SQLException {

		int p = Integer.parseInt(page); // 当前页数
		int r = Integer.parseInt(rows); // 显示条数

		int begin = (p - 1) * r;
		int count = r;
		String sql = "select * from userinfo limit " + begin + " ," + count
				+ "";
		ResultSet rs = stmt.executeQuery(sql);
		List<User> list = new ArrayList<User>();
		User user = null;
		while (rs.next()) {
			int u_id = rs.getInt(1);
			String no = rs.getString(2);
			String username = rs.getString(3);
			String password = rs.getString(4);
			String sex = rs.getString(5);
			String dept = rs.getString(6);
			String majorName = rs.getString(7);
			String studentCatagory = rs.getString(8);
			String entranceDate = rs.getString(9);
			String degreeType = rs.getString(10);
			String degreePaperTitle = rs.getString(11);
			String guideTeacher = rs.getString(12);
			String studyDirection = rs.getString(13);

			user = new User(u_id, no, username, password, sex, dept, majorName,
					studentCatagory, entranceDate, degreeType,
					degreePaperTitle, guideTeacher, studyDirection);
			list.add(user);

		}

		return list;

	}

在我们的上面代码中用到的vo类

package com.demo.vo;

/**
 * @author shenyiya ʵ����
 */
public class User {

	private int u_id;
	private String no;
	private String username;
	private String password;
	private String sex;
	private String dept;
	private String majorName;
	private String studentCatagory;
	private String entranceDate;
	private String degreeType;
	private String degreePaperTitle;
	private String guideTeacher;
	private String studyDirection;
	public int getU_id() {
		return u_id;
	}
	public void setU_id(int u_id) {
		this.u_id = u_id;
	}
	public String getNo() {
		return no;
	}
	public void setNo(String no) {
		this.no = no;
	}
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	public String getSex() {
		return sex;
	}
	public void setSex(String sex) {
		this.sex = sex;
	}
	public String getDept() {
		return dept;
	}
	public void setDept(String dept) {
		this.dept = dept;
	}
	public String getMajorName() {
		return majorName;
	}
	public void setMajorName(String majorName) {
		this.majorName = majorName;
	}
	public String getStudentCatagory() {
		return studentCatagory;
	}
	public void setStudentCatagory(String studentCatagory) {
		this.studentCatagory = studentCatagory;
	}
	public String getEntranceDate() {
		return entranceDate;
	}
	public void setEntranceDate(String entranceDate) {
		this.entranceDate = entranceDate;
	}
	public String getDegreeType() {
		return degreeType;
	}
	public void setDegreeType(String degreeType) {
		this.degreeType = degreeType;
	}
	public String getDegreePaperTitle() {
		return degreePaperTitle;
	}
	public void setDegreePaperTitle(String degreePaperTitle) {
		this.degreePaperTitle = degreePaperTitle;
	}
	public String getGuideTeacher() {
		return guideTeacher;
	}
	public void setGuideTeacher(String guideTeacher) {
		this.guideTeacher = guideTeacher;
	}
	public String getStudyDirection() {
		return studyDirection;
	}
	public void setStudyDirection(String studyDirection) {
		this.studyDirection = studyDirection;
	}
	public User(int u_id, String no, String username, String password,
			String sex, String dept, String majorName, String studentCatagory,
			String entranceDate, String degreeType, String degreePaperTitle,
			String guideTeacher, String studyDirection) {
		super();
		this.u_id = u_id;
		this.no = no;
		this.username = username;
		this.password = password;
		this.sex = sex;
		this.dept = dept;
		this.majorName = majorName;
		this.studentCatagory = studentCatagory;
		this.entranceDate = entranceDate;
		this.degreeType = degreeType;
		this.degreePaperTitle = degreePaperTitle;
		this.guideTeacher = guideTeacher;
		this.studyDirection = studyDirection;
	}
	public User(String no, String username, String password, String sex,
			String dept, String majorName, String studentCatagory,
			String entranceDate, String degreeType, String degreePaperTitle,
			String guideTeacher, String studyDirection) {
		super();
		this.no = no;
		this.username = username;
		this.password = password;
		this.sex = sex;
		this.dept = dept;
		this.majorName = majorName;
		this.studentCatagory = studentCatagory;
		this.entranceDate = entranceDate;
		this.degreeType = degreeType;
		this.degreePaperTitle = degreePaperTitle;
		this.guideTeacher = guideTeacher;
		this.studyDirection = studyDirection;
	}
	
	
	
	

	
}

Pager.java 
package com.demo.json.util;

import java.util.List;

import com.demo.vo.User;

public class Pager {

	private int total;
	private List<User> rows;
	
	public int getTotal() {
		return total;
	}
	public void setTotal(int total) {
		this.total = total;
	}
	public List<User> getRows() {
		return rows;
	}
	public void setRows(List<User> rows) {
		this.rows = rows;
	}


}

项目源码




le4
关注
  • 13
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
easyui分页实现
07-04
通过easyui 中的控件实现分页 效果
easyui的form表单提交处理
scheme2008的专栏
06-11 446
  $('#fm').form('submit',{                   url: url,                   onSubmit: function(){                       return $(this).form('validate');                   },                   succe...
EasyUI Pagination分页功能的实现讲解以分页没有效果问题
空空说技术的博客
10-22 7106
EasyUI Pagination 分页没有效果？分页功能的实现讲解 本次某个项目中用到Easyui+SSM框架，而easyui-Pagination在前后台分页的写法比较多，但是相对固定，于是我在这里直接写一份关于easyui下的分页教程，省得以后到处找，也方便各位参考。 当然本文是基于SSM+Easyui而且是有一定基础的朋友。 1.分页介绍 web开发中所说的分页，实际上是分为假分页和真分页...
easyui实现分页
w_t_y_y的博客
11-20 1094
.
基于asp.net + easyui框架——实现添加、编辑、删除（三）
MrXu_Persi的博客
11-10 873
这篇博客的主题是实现对话窗口的添加、编辑和删除。我们总共分成五步：        1、制作对话窗口html                                       %-- 弹出操作框--%>    div id="dlg" class="easyui-dialog" style="width: 400px; height: auto;
BootStrap实例
weixin_34060299的博客
06-02 350
S1.html <!DOCTYPE html><html><head><meta charset="UTF-8"><title>Checkbox in DataList - jQuery EasyUI Demo</title><link rel="stylesheet" type="text/css"...
Jquery easyUI分页实现
04-14
NULL 博文链接：https://firezhfox.iteye.com/blog/1735932
EasyUi datagrid 实现表格分页
09-03
主要介绍了EasyUi datagrid 实现表格分页的方法和示例分享,需要的朋友可以参考下
easyui-分页功能详解
Developer of XingKong22star
11-21 3160
我们现在后台是SSI，前台用的是jquery easyUi easyui的Datagrid分页原理： 通过pagination:true,属性来指定easyui的分页功能，当前端页面会通过ajax发送分页显示请求时，会向后台传递两个参数，page和rows,在struts2的action中通过属性驱动可
EasyUI框架分页实现
weixin_44438928的博客
08-27 578
EasyUI添加分页组件demo demo #创建数据网格（DataGrid），设置 ‘pagination’ 属性为 true，它将在数据网格（datagrid）的底部生成一个分页（pagination）工具栏。pagination将发送两个参数到服务器，为了从远程服务器端加载数据，设置 ‘url’ 属性， url地址发起ajax请求. 动态的添加分页的参数. page：页码，起始值 1。 rows：每页显示行。 服务器端应该返回 JSON 格式数据。 <table class="easyui-da
EasyUI的Combogrid 多选项 通过Form表单提交，后台只能获取最后一个值的解决办法
小小德尔(C#)
08-06 1192
之前用在ASP.NET MVC 框架下使用EasyUI开发系统，在开发过程中一直没有使用过combogrid的多选项（multiple）。所以一直也没遇到这个问题； 在combogrid的multiple参数为true的情况下（多选），通过easyui的$('#fm').form('submit')方法提交form表单时，后台只能获取到combogrid的最后一个选项值； 前端代码： <form id="form1" method="post"> <div style.
EasyUI中分页的简单使用
忆水思寒的博客
09-18 1387
场景 效果 属性 名称类型描述默认值totalnumber记录总数，应该在创建分页（pagination）时设置。1pageSizenumber页面尺寸。（注：每页显示的最大记录数）10pageNumbernumber创建分页（pagination）时显示的页码。1pageListarray用户能改变页面尺寸。pageList 属性定义了能改成多大的尺寸。 代码实例：   ...
如何用easyui在页面上实现分页操作
qq_35654259的博客
07-18 3548
此项目我发布在https://download.csdn.net/download/qq_35654259/10549651中 1、效果图(下图为分页效果图) 分页效果图 2、准备工作      1)在操作数据库的java文件中要存在分页查询和 数据的总行数         1-1数据的分页查询     (下面oracle语句中TABLE_NAME为表名, ROWNUM 是一个序列,...
easyui分页
Sundefind的博客
01-12 865
第一点 datagrid会向后台传递  rows（每一页展示多少条数据）， page（第几页） 这两个数据，而在文档中没有指出来 ，这也是我今天弄了很久的原因（看别人写的代码发现的这一点） 第二点 后台传json数据时也要按照datagrid的数据格式，另外分页有两个数据，文档也没有指出来  total键 存放总记录数 rows键 存放每页记录
easyUI学习中
sunnvig
05-17 343
1.当创建用户时，打开一个对话框并清空表单数据。function newUser(){    $('#dlg').dialog('open').dialog('setTitle','New User');    $('#fm').form('clear');    url = 'save_user.php';}2.当编辑用户时，打开一个对话框并从 datagrid 选择的行中加载表单数据。var ...
easyui+jsp+servlet上手实例
08-25
完整的easyui的datagrid使用实例，带你快速入门，一步上手
easyui datagrid前端分页如何实现
最新发布
05-30
EasyUI Datagrid前端分页可以通过以下步骤实现： 1. 设置分页相关参数 在Datagrid的初始化代码中，设置以下分页相关参数： ``` pagination: true, // 启用分页 pageSize: 10, // 每页显示的记录数 pageList: [10,...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

le4

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值