miniui简单单表分页查询

最新推荐文章于 2024-05-27 17:49:14 发布

攻城狮是怎样攻城的

最新推荐文章于 2024-05-27 17:49:14 发布

阅读量1.1k

点赞数 1

文章标签： servlet

本文链接：https://blog.csdn.net/xiaobai_jq/article/details/105997587

版权

登录完了之后，我们应该进入主页，今天就尝试将数据库中的数据查询后显示在页面上，并做一个分页。还是利用miniui前台控件。
先建立数据库
在这里插入图片描述
然后新建实体类

package cn.com.dao;

public class Emp {
	public String loginname;
	public String name;
	public String gender;
	public String salary;
	public String age;
	public String date;
	
	public Emp() {
		super();
	}

	public Emp(String loginname, String name, String gender, String salary, String age, String date) {
		super();
		this.loginname = loginname;
		this.name = name;
		this.gender = gender;
		this.salary = salary;
		this.age = age;
		this.date = date;
	}

	public String getLoginname() {
		return loginname;
	}

	public void setLoginname(String loginname) {
		this.loginname = loginname;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getGender() {
		return gender;
	}

	public void setGender(String gender) {
		this.gender = gender;
	}

	public String getSalary() {
		return salary;
	}

	public void setSalary(String salary) {
		this.salary = salary;
	}

	public String getAge() {
		return age;
	}

	public void setAge(String age) {
		this.age = age;
	}

	public String getDate() {
		return date;
	}

	public void setDate(String date) {
		this.date = date;
	}
	
	
}

新建一个index.jsp

<%@ page language="java" contentType="text/html; charset=utf-8" import="java.util.*"
    pageEncoding="utf-8"%>
<%@ page import="cn.com.dao.Emp"%>
<%@ page import="java.sql.Connection" %>
<%@ page import="cn.com.db.DBUtil" %>
<%@ page import="java.sql.Statement"%>
<%@ page import="java.sql.ResultSet" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>员工列表</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link href="demo.css" rel="stylesheet" type="text/css" />

    <script src="scripts/boot.js" type="text/javascript"></script>
    <script src="ColumnsMenu.js" type="text/javascript"></script>
    
</head>
<body >      

    <div style="padding-bottom:5px;">
        
        <span>员工姓名：</span><input type="text" id="key"  />
        <input type="button" value="查找" onclick="search()"/>
        
    </div>

<div id="datagrid1" class="mini-datagrid" style="width:100%;height:250px;" 
    url="select"
    idField="id" allowResize="true"
    sizeList="[20,30,50,100]" pageSize="10" 
    showHeader="true" title="表格面板"
 onmouseup="return datagrid1_onmouseup()">
    <div property="columns">
        <div type="indexcolumn" ></div>
        <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号</div>    
        <div field="name" width="120" headerAlign="center" allowSort="true">姓名</div>                            
        <div field="gender" width="100" renderer="onGenderRenderer" align="center" headerAlign="center">性别</div>
        <div field="salary" numberFormat="¥#,0.00" align="right" width="100" allowSort="true">薪资</div>                                
        <div field="age" width="100" allowSort="true" decimalPlaces="2" dataType="float">年龄</div>
        <div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>                
    </div>
</div>
<%
List<Emp> list=(List<Emp>)request.getAttribute("list");
if(list==null||list.size()<1){
	//out.print("没有数据");
}else{
	for(Emp emp:list){
%>
	<td><%=emp.getLoginname() %></td>
	<td><%=emp.getName() %></td>
	<td><%=emp.getGender() %></td>
	<td><%=emp.getSalary() %></td>
	<td><%=emp.getAge() %></td>
	<td><%=emp.getDate() %></td>
	
<%
	}
}
%>


    <script type="text/javascript">
        
        mini.parse();
        
        var grid = mini.get("datagrid1");

        grid.load();

        var menu = new ColumnsMenu(grid);

        function search() {
            var key = document.getElementById("key").value;
            grid.load({ key: key});
        }
        $("#key").bind("keydown", function (e) {
            if (e.keyCode == 13) {
                search();
            }
        });
        ///
        var Genders = [{ id: 1, text: '男' }, { id: 2, text: '女'}];
        function onGenderRenderer(e) {
            for (var i = 0, l = Genders.length; i < l; i++) {
                var g = Genders[i];
                if (g.id == e.value) return g.text;
            }
            return "";
        }
        function datagrid1_onmouseup() {

        }

    </script>

  

</body>
</html>

后台代码如下

package cn.com.selevt;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
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.JSONObject;

import cn.com.dao.Emp;
import cn.com.db.DBUtil;

/**
 * Servlet implementation class EmpServlet
 */
@WebServlet("/EmpServlet")
public class EmpServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    
    public EmpServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	 
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		 doPost(request,response);
	}

 
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		 String key1=request.getParameter("key");	//接收前台传递来的查询值
		 String pageIndex=request.getParameter("pageIndex");	
		 String pageSize=request.getParameter("pageSize");	//一页的数据数
		 Connection conn=DBUtil.getMySqlConn();
		 int page=0;
		 String count="select count(*) count from emp";	//查询数据库中有几条记录
		 try {
			 PreparedStatement ps1=conn.prepareStatement(count);
			 ResultSet rs1=ps1.executeQuery(count);
				while(rs1.next()) {
					page=rs1.getInt("count");
				} 
		 }catch (Exception e) {
			// TODO: handle exception
		}
		 
		 String sql="";
		 int zs=page;
		 int kss=Integer.parseInt(pageIndex)*Integer.parseInt(pageSize);
		 int jss=Integer.parseInt(pageIndex)*Integer.parseInt(pageSize)+Integer.parseInt(pageSize);
		 if(key1==null) {
			 sql="select * from emp  limit "+kss+","+jss+"";
		 }else {
			 sql="select * from emp where name like'%"+key1+"%' limit "+kss+","+jss+""; //根据姓名模糊查询
		 }
		 try {
			PreparedStatement ps=conn.prepareStatement(sql);
			ResultSet rs=ps.executeQuery(sql);
			List<Emp> list=new ArrayList<Emp>();	//新建一个集合
			while(rs.next()) {
				Emp emp=new Emp();
				emp.setLoginname(rs.getString("loginname"));
				emp.setName(rs.getString("name"));
				emp.setGender(rs.getString("gender"));
				emp.setSalary(rs.getString("salary"));
				emp.setAge(rs.getString("age"));
				emp.setDate(rs.getString("date"));
				list.add(emp);	//将查询到的数据放在集合中
			}
			request.setAttribute("list", list);
			Map map=new HashMap();
			map.put("data", list);
			map.put("total", page);
			String responseJSONObject=JSONObject.toJSONString(map);	//解析map里的数据
			response.setCharacterEncoding("UTF-8");
			PrintWriter out=null;
			out=response.getWriter();
			out.print(responseJSONObject);	//  返回给前台
			out.flush();
			out.close();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}finally {
			try {
				conn.close();
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
				}
			}
		
	}
}

效果图
创建日期，date格式的数据，显示在页面上遇到点问题，后面在修改下
注意用fastjson解析需要引入jar包，另外xml配置要正确。
这样数据库查询数据在页面上显示就实现了，后续实现增删改。
小白欢迎指教

攻城狮是怎样攻城的

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
miniui简单单表分页查询

登录完了之后，我们应该进入主页，今天就尝试将数据库中的数据查询后显示在页面上，并做一个分页。还是利用miniui前台控件。先建立数据库然后新建实体类package cn.com.dao;public class Emp { public String loginname; public String name; public String gender; public Stri...
复制链接

扫一扫