1、引用layui框架
<link rel="stylesheet" href="layui/css/layui.css" type="text/css"></link>
<script type="text/javascript" src="layui/layui.js"></script>
2、jsp页面
<div class="userinfo_top1">
<div class="userinfo_zj">
<div class="tools" style="margin-top: 0.5%;">
<ul class="toolbar" style="margin-left: 1.1%;">
<li id="tianjia"><span><img src="images/t01.png"/></span>添加</li>
<li id="bj"><span><img src="images/t02.png" /></span>修改</li>
<li><span></span>用戶名:</li>
<li><input id="UserMC" name="UserMC" value="${usermc}"></li>
<li type="button" id="chax"><span><i id="layui-icon" class="layui-icon layui-icon-search"></i></span>查询</li>
<li id="sxin"><span><i id="layui-icon" class="layui-icon layui-icon-refresh-1"></i></span>刷新</li>
</ul>
<ul class="toolbar1" style="margin-right: 0.8%;">
<li><span><img src="images/t05.png" /></span>设置</li>
</ul>
</div>
</div>
<div class="userinfo_xm">
<table class="layui-hide" id="test" lay-filter="test"></table>
</div>
</div>
3、引用layui框架数据表格显示数据
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit" >编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" >删除</a>
</script>
<script type="text/javascript">
layui.use('table', function(){
var table = layui.table;
var Usermc = $("#UserMC").val();
table.render({
elem: '#test'
,url:"servlet/OutStopServlet?fun=selectuserinfo&usermc=" + Usermc
,toolbar: '#toolbarDemo'
,title: '用户数据表'
,totalRow: true
,page: true/*开启分页*/
,cols: [[
{type: 'checkbox', fixed: 'left',align:'center',hide:true}
,{field:'userID', title:'ID序号', width:100, fixed: 'left',align:'center',unresize: true, sort: true}
,{field:'userMC', title:'用户名', width:120, edit: 'text',align:'center', sort: true}
,{field:'sex', title:'性别', width:115, edit: 'text',align:'center', sort: true}
,{field:'userType', title:'用户类型', width:150,align:'center', sort: true}
,{field:'IDcard', title:'身份证', width:280, align:'center', sort: true}
,{field:'userTypeID',hide:true, title:'用户类型id', width:0,align:'center', sort: true}
,{field:'password',hide:true, title:'密码', width:0,align:'center', sort: true}
,{field:'phonenumber', title:'手机号', width:180, edit: 'text',align:'center', sort: true}
,{field:'site', title:'地址', width:300, edit: 'text',align:'center', sort: true}
,{field:'remarks', title:'备注', width:198, align:'center', sort: true}
,{fixed:'right', title:'操作', toolbar: '#barDemo', width:200,align:'center'}
]]
,request: {
pageName: 'currentPage' //页码的参数名称,默认:page
,limitName: 'pageSize' //每页数据量的参数名,默认:limit
}
,response: {
statusName: 'success' //规定数据状态的字段名称,默认:code
,statusCode: true //规定成功的状态码,默认:0
,countName: 'totalRows' //规定数据总数的字段名称,默认:count
,dataName: 'data' //规定数据列表的字段名称,默认:data
}
});
/*刷新*/
$("#sxin").click(function () {
table.reload("test");
});
});
/*模糊查询*/
$("#chax").click(function(){
var UserMC = $("#UserMC").val();
window.location.href="servlet/OutStopServlet?fun=selectuser&usermc=" + UserMC;
});
</script>
4、servlet
层接收页面传的数据并且验证数据库的数据
package com.xmg.servlet;
import java.io.IOException;
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 com.xmg.po.OutStopCheck;
import com.xmg.po.UserPo;
public class OutStopServlet extends HttpServlet {
private static final long serialVersionUID = 4403707527738384890L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String fun =request.getParameter("fun");
if ("list".equals(fun)) {
list(request, response);
}else if ("selectuserinfo".equals(fun)) {
selectuserinfo(request, response);
}else if ("selectuser".equals(fun)) {
selectuser(request, response);
}else{
response.sendRedirect("/main/right.jsp");
}
}
/*模糊查询*/
public void selectuser(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
/*获取页面传来的值,并且转码*/
String name = new String(request.getParameter("usermc").getBytes("iso-8859-1"),"utf-8");
request.setAttribute("usermc",name);
request.getRequestDispatcher("/jsp/userinfo.jsp").forward(request, response);
}
/*查询用户信息*/
public void selectuserinfo(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
/*获取页面传来的值,并且转码*/
String name = new String(request.getParameter("usermc").getBytes("iso-8859-1"),"utf-8");
String currentPageStr =request.getParameter("currentPage");
String pageSizeStr = request.getParameter("pageSize");
int currentPage=1;
int pageSize=10;
if (currentPageStr !=null && Tools.isNum(currentPageStr)) {
currentPage=Integer.parseInt(currentPageStr);
}
if (pageSizeStr !=null && Tools.isNum(pageSizeStr)) {
pageSize=Integer.parseInt(pageSizeStr);
}
int startIndex =(currentPage-1)*pageSize;
IUserService userService =new UserSerivceImpl();
Bsgrid<UserPo> checks = userService.selectUser(name, startIndex, pageSize);
checks.setSuccess(true);
checks.setCurPage(currentPage);
JSONObject jsonObject = JSONObject.fromObject(checks);
PrintWriter out =response.getWriter();
out.write(jsonObject.toString());
out.flush();
out.close();
}
}
5、servlet
层Bsgrid<UserPo> checks = userService.selectUser(name, startIndex, pageSize);
跳转查询数据库的数据,并且返回servlet
层在输出到jsp页面接收显示
package com.xmg.dao.impl;
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.xmg.dao.IUserDao;
import com.xmg.po.OutStopCheck;
import com.xmg.po.UserPo;
public class UserDaoImpl implements IUserDao {
private Connection con =null;
private PreparedStatement ps=null;
private ResultSet rs= null;
private String Count = "SELECT COUNT(*) COUNTo FROM tb_user";
private String selectuser="SELECT * FROM tb_user ,tb_usertype WHERE tb_user.UserTypeID=tb_usertype.UserTypeID";
/*查询用户信息*/
@Override
public Bsgrid<UserPo> selectUser(String UserMC,int startIndex,int pageSize) {/*用户信息*/
List<UserPo> userpo=new ArrayList<UserPo>();
Bsgrid<UserPo> bsgrid = new Bsgrid<UserPo>();
bsgrid.setCurPage(startIndex);
UserPo useres = null;
String str;
try {
con =DBUtil.getConnection();
if (UserMC !=null && !"".equals(UserMC)) {
str=" where UserMC like ?";
ps=con.prepareStatement(Count +str);/*查询总条数*/
ps.setString(1, '%' + UserMC + '%');
rs=ps.executeQuery();
while (rs.next()) {
bsgrid.setTotalRows(rs.getInt("COUNTo"));/*遍历数据*/
}
str = " and UserMC like ?" + " limit " + startIndex +","+ pageSize;
ps=con.prepareStatement(selectuser+str);
ps.setString(1, '%' + UserMC + '%');
}
else {
ps=con.prepareStatement(Count);
rs=ps.executeQuery();
while (rs.next()) {
bsgrid.setTotalRows(rs.getInt("COUNTo"));
}
str =" limit " + startIndex +","+ pageSize;
ps=con.prepareStatement(selectuser +str);
}
rs=ps.executeQuery();
userpo=JdbcHelper.getResult(rs, UserPo.class);
bsgrid.setData(userpo);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
finally{
DBUtil.close(con, ps, rs);
}
return bsgrid;
}
}