萌新:利用layui插件的动态表格以及分页的实现 前后台代码实现

先看一下做出的效果图:

萌新:利用layui插件的动态表格以及分页的实现 前后台代码实现_第1张图片
萌新:利用layui插件的动态表格以及分页的实现 前后台代码实现_第2张图片萌新:利用layui插件的动态表格以及分页的实现 前后台代码实现_第3张图片准备工作:先写出自己所需要的实体类,以及实体类Dao方法(其中除了增删改还需要写出分页所需的两个方法)。

查询数据库里面共有多少条数据:

public int selectCount() {
		int result=0;
		Connection conn=C3P0Conn.getConnection();
		String sql="select count(*) from admin where power=0";
		try {
			long num=qr.query(conn, sql,new ScalarHandler());
			result=(int)num;
		} catch (SQLException e) {
			e.printStackTrace();
		}finally {
			C3P0Conn.closeAll(conn);
		}
		return result;
	}

根据传入的分页的页数,以及每页的大小查询信息记录:

public List selectPage(int pageNum,int pageSize){
		Connection conn=C3P0Conn.getConnection();
		List list=null;
		String sql="select * from admin where power=0 limit ?,?";
		try {
			list=qr.query(conn, sql, new BeanListHandler(Admin.class),(pageNum-1)*pageSize,pageSize);
		} catch (SQLException e) {
			e.printStackTrace();
		}finally {
			C3P0Conn.closeAll(conn);
		}
		return list;
	}

前端代码(使用layui插件):
先导入layui的css文件、js文件 下载地址:https://www.layui.com/



写入layui动态表格的代码(也可以在官网选择适合自己的样式)

后台Servlet 代码:

	response.setContentType("application/json;charset=UTF-8");
		//设置json数据的编码
		String index=request.getParameter("page");
		//读取前台传过来的当前页码
		int pageNum=1;
		if(index!=null) {
			pageNum=Integer.parseInt(index);
		}
		String size=request.getParameter("limit");
		//读取前台传过来的每页大小
		int pageSize=3;
		if(size!=null) {
			pageSize=Integer.parseInt(size);
		}
//		每页大小
		AdminDao adao=new AdminDao();
		int total=adao.selectCount();
		List list=adao.selectPage(pageNum, pageSize);
		//	记录总数、记录总页数。
		Page page=new Page(total,list);
		//封装到page实体类返回
		ObjectMapper mapper=new ObjectMapper();
		String json=mapper.writeValueAsString(page);
		response.getWriter().print(json);
		//将其变成json字符串返回
这里的Page 实体类,是专门用作返回结果的实体类。有总页数和List的返回。
private int total;
private List list;`

需要注意的是layui不支持返回的数据嵌套访问,所以传回的数据最好封装成一个实体类返回(就如此处的Page 实体类对象)。

就这样就可以实现利用layui实现 动态表格以及分页的

你可能感兴趣的:(layui,动态表格,新手,前后端实现)