EasyUI(分页&模糊查询)

一、创建数据库

1、创建表并插入数据:

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');

2、建包建类

index.jsp界面   记得更改主界面<script>里面的内容

        //双击事件
        onDblClick:function(node){
             //判重,如果为false就添加新的tab页
            if(!$("#tt").tabs("exists",node.text)){
                // add a new tab panel    
                $('#tt').tabs('add',{    
                    title:node.text,    
                    //将内容更改为iframe框架,跳转到servlet处理
                    content:'<iframe frameborder=0 src="' 
                        + node.url 
                        + '" scrolling="no" style="width:100%;height:100%;"></iframe>',        
                    closable:true    
                });  
            }else{
                //反之为true,选择一个选项卡面板
                $("#tt").tabs("select",node.text)
            }

实体类Book

dao方法BookDao

 

页面搭建   bookList.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>Insert title here</title>
<%@include file="../../common/head.jsp" %>
<script>
    $(function(){
        $('#dg').datagrid({    
            url:ctx+'/BookServlet',    
            toolbar: '#tb',
            pagination:true, //显示底部分页工具栏
            columns:[[    
                //表格的结构,需要与实体类保持一致
                {field:'id',title:'ID',width:100,align:'center'},    
                {field:'bookname',title:'书本名称',width:100,align:'center'},    
                {field:'price',title:'价格',width:100,align:'center'},
                {field:'booktype',title:'类型',width:100,align:'center'} 
            ]]    
        });  
        
        $("#qrybtn").click(function(){
            qry();
        })
        
        function qry(){
            $('#dg').datagrid("reload",{
                bookName:$("#bookName").val()
            });
        }
        
    });
</script>
</head>
<body>
<form style="margin-top:20px;">
    <label for="name">书籍名称:</label>  
    <input id="bookName" class="easyui-textbox" data-options="" style="width:300px;">
    <a id="qrybtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>  
</form>
 
<div style="margin-top:10px;">
    <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>
 
</body>

service层开发 

IBookService

package com.zking.euidemo.service;
 
import java.util.List;
 
import com.zking.euidemo.entity.Book;
 
public interface IBookService {
    /**
     * 带模糊查询的分页
     * @param name 你要查询的书籍名称
     * @param pageIndex 第几页
     * @param pageSize 每页多少条记录
     * @return 书籍集合
     */
    List<Book> getBooks(String name,int pageIndex, int pageSize);
    
    /**
     * 获取总记录数
     * @param name 书籍名称
     * @return
     */
    int getTotalPage(String name);
}
 

servlet开发(控制器)

        BookServlet

package com.zking.euidemo.servlet;
 
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
 
import javax.servlet.ServletException;
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.euidemo.entity.Book;
import com.zking.euidemo.service.BookService;
import com.zking.euidemo.service.IBookService;
@WebServlet("/BookServlet")
public class BookServlet extends HttpServlet{
    
    private IBookService service = new BookService();
    
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }
    
     @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, 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> books = service.getBooks(name, pid, pageSize);
        int totalPage = service.getTotalPage(name);
        
        Map<String,Object> data = new HashMap<>();
        data.put("total", totalPage);
        data.put("rows", books);
        
        String json = JSON.toJSONString(data);
        
        PrintWriter out = resp.getWriter();
        out.write(json);
        out.flush();
        out.close();
         
         
    }

效果图:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值