一、创建数据库
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();
}
效果图: