使用EasyUI界面实现分页和模糊查询

一，项目结构

注：以上项目的结构层次是基于使用EasyUI搭建树形界面以及导航栏

二，创建图书表

create table t_book (id integer not null,bookname varchar(50) not null,price float not null,booktype varchar(40) not null,primary key (id)
);
select * from t_book-- 测试数据
insert  into t_book(id,bookname,price,booktype) values (1,'西游记00088',180,'名著');
insert  into t_book(id,bookname,price,booktype) values (2,'红楼梦001',110.08,'名著');
insert  into t_book(id,bookname,price,booktype) values (3,'倚天屠龙记',150.16,'武侠');
insert  into t_book(id,bookname,price,booktype) values (4,'聊斋志异',100.12,'玄幻');
insert  into t_book(id,bookname,price,booktype) values(5,'永生',110.11,'玄幻');
insert  into t_book(id,bookname,price,booktype) values(6,'武动乾坤',90.89,'玄幻');
insert  into t_book(id,bookname,price,booktype) values(7,'完美世界',100,'玄幻');
insert  into t_book(id,bookname,price,booktype) values(8,'万域之王',56.5,'玄幻');
insert  into t_book(id,bookname,price,booktype) values(9,'遮天001',130.9,'玄幻');
insert  into t_book(id,bookname,price,booktype) values(10,'凡人修仙传',200,'修仙');
insert  into t_book(id,bookname,price,booktype) values(11,'倚天屠龙记',150.16,'武侠');
insert  into t_book(id,bookname,price,booktype) values(12,'斗破苍穹',115.07,'玄幻');
insert  into t_book(id,bookname,price,booktype) values(13,'超级兵王',145,'言情');
insert  into t_book(id,bookname,price,booktype) values(14,'武极天下',45.55,'玄幻');
insert  into t_book(id,bookname,price,booktype) values(15,'聊斋志异',100.12,'玄幻');
insert  into t_book(id,bookname,price,booktype) values(16,'永生',110.11,'玄幻');
insert  into t_book(id,bookname,price,booktype) values(17,'武动乾坤',90.89,'玄幻');
insert  into t_book(id,bookname,price,booktype) values(18,'完美世界',100,'玄幻');
insert  into t_book(id,bookname,price,booktype) values(19,'万域之王',56.5,'玄幻');
insert  into t_book(id,bookname,price,booktype) values(20,'Java',1000,'修仙');
insert  into t_book(id,bookname,price,booktype) values(21,'娃哈哈',100,'玄幻');
insert  into t_book(id,bookname,price,booktype) values(22,'呼啸山庄',123,'mz');
insert  into t_book(id,bookname,price,booktype) values(23,'平凡的世界',123,'mz');
insert  into t_book(id,bookname,price,booktype) values(24,'大红底',12,'xs');

三，使用iframe更改导航栏的请求路径

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"><%@ include file="common/head.jsp" %>
<title>Insert title here</title>
<script type="text/javascript">$(function(){$("#funcTree").tree({url:ctx+'/ModuleServlet',//用户双击一个节点触发onDblClick: function(node){if(!$("#tt").tabs('exists',node.text)){$('#tt').tabs('add',{    title:node.text,    content:'<iframe frameborder=0 src="' + node.url + '" scrolling="no" style="width:100%;height:100%;"></iframe>',    closable:true,    tools:[{    iconCls:'icon-mini-refresh',    handler:function(){    alert('refresh');    }    }]    });  }}});});</script>
</head>
<body class="easyui-layout">  <div data-options="region:'west',title:'功能导航',split:true" style="width:150px;"><ul id="funcTree" class="easyui-tree"></ul>  </div>   <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">
<div id="tt" class="easyui-tabs" style="width:100%;height:100%;">   <div title="首页" style="padding:20px;display:none;">   首页    </div>
</div>  </div> <div data-options="region:'south',split:true" style=" text-align:center;height:30px;background: #E0ECFF" class="panel-title">Copyright@XXXX有限责任公司</div>
</body>
</html>

iframe:相当于一个容器

frameborder=0无边框

src='node.url'：显示界面的路径

注：这里的请求路径和上一篇博客的表中的url对应我只是对书籍管理进行分页和模糊查询

scrolling="no"：滚动

即上进行url界面的创建

四，实体类(Book)

package com.zking.model;public class Book {private int id;private String bookname;private String price;private String booktype;private String booktypedesc;public int getId() {return id;}public void setId(int id) {this.id = id;}public String getBookname() {return bookname;}public void setBookname(String bookname) {this.bookname = bookname;}public String getPrice() {return price;}public void setPrice(String price) {this.price = price;}public String getBooktype() {return booktype;}public void setBooktype(String booktype) {this.booktype = booktype;}public String getBooktypedesc() {return booktypedesc;}public void setBooktypedesc(String booktypedesc) {this.booktypedesc = booktypedesc;}@Overridepublic String toString() {return "Book [id=" + id + ", bookname=" + bookname + ", price=" + price + ", booktype=" + booktype + "]";}}

五，dao层

@Overridepublic List<Book> getBooks(String name, int pageIndex, int pageSize) {Connection con = null;PreparedStatement ps = null;ResultSet rs = null;List<Book> list = new ArrayList<>();try {String sql = "select id,bookname,price,booktype,rownum as rid from t_book";//name就是要查询的关键字先判断name是否存在值如果存在就根据name模糊查询不存在句查询全部if(name != null && !"".equals(name)) {sql += " where bookname like ?";}sql = "select * from (" + sql + ")b where b.rid between ? and ?";con = DBHelper.getCon();ps = con.prepareStatement(sql);int start =(pageIndex-1)*pageSize+1;int end = pageIndex*pageSize;//给占位符赋值也是判断name是否存在存在就赋值不存在就不赋值if(name != null && !"".equals(name)) {ps.setString(1, name+"%");ps.setInt(2, start);ps.setInt(3, end);} else {ps.setInt(1, start);ps.setInt(2, end);}rs = ps.executeQuery();while(rs.next()) {Book m = new Book();m.setId(rs.getInt("id"));m.setBookname(rs.getString("bookname"));m.setPrice(rs.getString("price"));m.setBooktype(rs.getString("booktype"));list.add(m);}} catch (Exception e) {e.printStackTrace();} finally {DBHelper.myClose(con, ps, rs);}return list;}@Overridepublic int getTotalPage() {Connection con = null;PreparedStatement ps = null;ResultSet rs = null;int n  = 0;try {con= DBHelper.getCon();String sql = "select count(*) from t_book";ps = con.prepareStatement(sql);rs= ps.executeQuery();if(rs.next()) {n = rs.getInt(1);}} catch (Exception e) {e.printStackTrace();}finally {DBHelper.myClose(con, ps, rs);}return n;}

六：Service层(业务逻辑层)

public class BookService implements IBookService {private IBookDao dao = new BookDao();@Overridepublic List<Book> getBooks(String name, int pageIndex, int pageSize) {return dao.getBooks(name, pageIndex, pageSize);}@Overridepublic int getTotalPage() {return dao.getTotalPage();}}

七，Servlet层

package com.zking.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.List;
import java.util.Map;import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import com.alibaba.fastjson.JSON;
import com.zking.model.Book;
import com.zking.service.BookService;
import com.zking.service.IBookService;
@WebServlet("/bookServlet")//相当于web.xml的配置与映射
public class BookListServlet  extends HttpServlet {/*** */private static final long serialVersionUID = 1L;private IBookService service = new BookService();public void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException {doPost(req, resp);}public void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException {//设置编码方式req.setCharacterEncoding("utf-8");resp.setContentType("application/json; charset=utf-8");String name = req.getParameter("bookName");String pageIndex = req.getParameter("page");//使用三元运算符进行第几页的判断int pid = pageIndex == null || "".equals(pageIndex) ?  1 : Integer.parseInt(pageIndex);int pageSize = 10;List<Book> list = service.getBooks(name, pid, pageSize);int totalPage = service.getTotalPage();Map<String,Object> data = new HashMap<>();data.put("total", totalPage);data.put("rows", list);String json = JSON.toJSONString(data);PrintWriter out = resp.getWriter();out.write(json);out.flush();//刷新out.close();//关闭}}

八，界面代码

<%@ 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>Insert title here</title>
<%@ include file="../../common/head.jsp"%>
<script type="text/javascript">$(function(){$('#dg').datagrid({    url:ctx+'/bookServlet',toolbar: '#tb',pagination:true,columns:[[    //这里的id，bookname，price，booktype必须跟实体类保持一致{field:'id',title:'ID',width:100},    {field:'bookname',title:'书本名称',width:100},    {field:'price',title:'价格',width:100},{field:'booktype',title:'类型',width:100} ]]    });//给查询添加点击事件$("#qrybtn").click(function(){qry();});function qry(){//重载行$('#dg').datagrid("reload",{//拿到以前的值给文本框赋值bookName:$("#bookName").val()});}})
</script>
</head>
<body>
<form action="" method="post" style="margin-top:20px"><label for="name">书籍名称：</label>   <input id="bookName" class="easyui-textbox" style="width:300px"> <a id="qrybtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a><div style="margin-top:20px" style="text-align:center"><table id="dg"></table></div><div id="tb" style="text-align:right"><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true"></a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"></a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true"></a></div>
</form>
</body>
</html>

效果图

使用EasyUI界面实现分页和模糊查询相关推荐

yii2实现后端分页和模糊查询
注:这里说的是前后端分离的方式,前端可以用vue+element,不管用什么,只要能把需要的参数传给后端就OK 1.前端需要传的主要参数包括: listQuery: { //动态请求table数据时传 ...
index客户主页+页面分页的模糊查询 and add知识
一.首先回望一下,我们经常会在JSP学习中遇到的问题和有必要掌握的 a little 知识. 1.如何修改默认的编码方式? 1)首先点击eclipse上方工具栏的window,选择preference ...
Spring Boot+MybatisPlus使用JQuery DataTables表格插件展示数据、实现分页和模糊查询等功能
Spring Boot+MybatisPlus使用JQuery DataTables表格插件展示数据.实现分页和查询功能一.部分技术选型二.项目结构三.功能需求和效果展示四.关键代码 4.1页 ...
《前端》Element ui 表格（Table）组件中前端实现数据分页和模糊查询--未看
我是用的Element ui 表格(Table)组件中的例子下面是别人自己写的方法: Element ui 表格(Table)组件中前端实现数据分页和模糊查询_明天也要努力的博客-CSDN博客 h ...
Javaweb15==mysql+mybatis+servlet+axios+fasetjson+vue+elementUI前后端分离，实现列表后端分页、模糊查询后分页、新增、单一/批量删除、修改
难点:模糊查询后再次分页,并可以选择页数. 最终环境配置: maven3.8:依赖包管理 IDEA2021+JDK8+mysql connector java5+Mysql5+mybatis3.5:从 ...
Jsp新闻项目（规范访问分页之模糊查询主题分页查询[客户页面]）
目录一.规范访问二.模糊查询分页 1.代码分析上一章我们有讲到将伪表查询代替之前的模糊查询来进行分页,今天我们要在伪表查询的基础上加上模糊查询,也就是说在模糊查询时也可以分页了三.主题分页查询 ...
使用Ef框架进行分页..EF模糊查询..EF多表内连接查询
先来DAL层代码..稍后解释... public List<Staff> Getstaff(string DepId,string staffname,DateTime date ,int ...
【测试开花】三、项目管理-后端-实现列表接口（含分页、模糊查询）
基于 springboot+vue 的测试平台开发继续更新. 打开项目管理,就需要看到列表里展示项目数据,比如这样(截图是这个前端框架的demo,仅作示意): 那么对应到我们平台的项目管理功能,就需要 ...
SSM框架之数据分页，模糊查询
1.创建springMVC项目,搭建环境 2.创建Page.java,存储信息 import java.util.HashMap; import java.util.List; import java ...