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

先看一下做出的效果图：

准备工作：先写出自己所需要的实体类，以及实体类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<Long>());
			result=(int)num;
		} catch (SQLException e) {
			e.printStackTrace();
		}finally {
			C3P0Conn.closeAll(conn);
		}
		return result;
	}

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

public List<Admin> selectPage(int pageNum,int pageSize){
		Connection conn=C3P0Conn.getConnection();
		List<Admin> list=null;
		String sql="select * from admin where power=0 limit ?,?";
		try {
			list=qr.query(conn, sql, new BeanListHandler<Admin>(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/

<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>

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

<table class="layui-hide" id="test" lay-filter="test"></table>
<!-- 写在需要添加表格的位置 -->
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/html" id="toolbarDemo">
   <div class="layui-btn-container">
       <button class="layui-btn layui-btn-sm" lay-event="getCheckData">删除选中行数据</button>
       <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
       <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
   </div>
</script>
<!-- 添加在表格头部的按钮 -->
 
<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>
layui.use('table', function(){
  var table = layui.table;
  
  table.render({
    elem: '#test'
    ,url:'AdminServlet?method=selectAll'
       <!-- 跳转到的后台Servlet-->
   ,toolbar: '#toolbarDemo' 
   <!-- 是否添加表格的头部-->
    ,title: '用户数据表'
    ,cols: [[
     <!-- 此处写的返回集合实体类的属性-->
    	 {type: 'checkbox', fixed: 'left'}
         ,{field:'adminName', title:'用户名', width:200, fixed: 'left', unresize: true,align: 'center'}
         ,{field:'adminPassword', title:'密码', width:200,edit:'text',align: 'center'}
         ,{field:'state', title:'状态', width:180,sort: true,align: 'center',
         <!-- 可以写该字段的函数（根据不同的返回值，显示不同的内容）-->
        	 templet: function(d) {
                 if (1 == d.state ) {
                     return '<button type="button" class="layui-btn layui-btn-sm layui-btn-normal layui-btn-radius">在线</button>' 
                 }
                 return '<button type="button" class="layui-btn layui-btn-sm layui-btn-danger layui-btn-radius">离开</button>'
             },
             align: 'center'
         }
         ,{field:'lastTime', title:'最近上线时间', width:270, sort: true,align: 'center'}
         ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:250,align: 'center'}
    ]]
	  ,page: {
	   <!-- 设置分页的值，以及默认值-->
	  	limits : [3,6,9]
	  	,limit : 6
	  }
	  ,parseData:function(res){
	  <!-- 返回数据的总页数、分页查询所得的集合-->
	  	console.log(res);
	  	return{
	  		"code":0,
	  		"msg":"",
	  		"count":res.total,
	  		"data":res.list
	  	};
	  }
  });
  
  //工具栏事件
  table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id);
    switch(obj.event){
      case 'getCheckData':
    	  var shuzu=new Array();
    	  var data = checkStatus.data;
    	  for(var j=0;j<data.length;j++){
    		  var dange=JSON.stringify(data[j].adminId);
    		  //可以得到选中的行的ID
	          shuzu.push(dange);
    	  }
    	  if(shuzu==""){
    		  layer.msg('没有选中');
    	  }else{
    		  alert("删除成功！")
	    	  location.href="AdminServlet?method=del&vals="+shuzu; 
    	  }
      break;
      case 'getCheckLength':
        var data = checkStatus.data;
        layer.msg('选中了：'+ data.length + ' 个');
      break;
      case 'isAll':
        layer.msg(checkStatus.isAll ? '全选': '未全选')
      break;
    };
  });
  
  //监听行工具事件
  table.on('tool(test)', function(obj){
    var data = obj.data;
    //data 表示的是本行的数据，可以获取其属性的值
    if(obj.event === 'del'){
      layer.confirm('真的删除行么', function(index){
    	   location.href="AdminServlet?method=del&uid="+data.adminId; 
      });
    } else if(obj.event === 'edit'){
    //layui的弹出层
    	layer.prompt({
            formType: 0
            //输入框类型，支持0（文本）默认1（密码）2（多行文本）
            ,value: data.adminPassword
            ,title: '修改主题'
          }, function(value, index){
        	  location.href="AdminServlet?method=update&newpass="+value+"&uid="+data.adminId; 
          });
    }
  });
});
</script>

后台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<Admin> 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<Admin> list;`

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

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