LayUI数据表格和分页的实现

1、简单表格

样式

没有分页，没有crud操作

html代码

<table class="layui-hide" id="test">table>

js代码

layui.use('table', function(){
  var table = layui.table;
  
  table.render({
    elem: '#test'	//id选择器
    ,url:'/demo/table/user/'		//数据接口
    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度
    ,cols: [[
      {field:'id', width:80, title: 'ID', sort: true}		//field  字段
      ,{field:'username', width:80, title: '用户名'}		//title    tr名
      ,{field:'sex', width:80, title: '性别', sort: true}		//sort 此字段可排序
      ,{field:'city', width:80, title: '城市'}		//width  宽度
      ,{field:'sign', title: '签名', width: '30%', minWidth: 100} //minWidth：局部定义当前单元格的最小宽度
      ,{field:'experience', title: '积分', sort: true}
      ,{field:'score', title: '评分', sort: true}
      ,{field:'classify', title: '职业'}
      ,{field:'wealth', width:137, title: '财富', sort: true}
    ]]
  });
});

接口数据

code：固定是0
msg：随便写啥好像都没差别
count:此数据的总数
data:表格数据，来多少条显示多少条。

这4个是接口数据必须的4个属性

{
"code":0,
"msg":"",
"count":1000,
"data":[
{.....数据.....},
{.....数据.....}]

---

2、自动分页表格

样式

有分页，没有crud

html代码

<table class="layui-hide" id="test">table>

js代码

自动分页表格，和普通的表格的js代码部分差不多，就多了一句 page： true
但前后端交互的数据不一样了。

layui.use('table', function(){
  var table = layui.table;
  
  table.render({
    elem: '#test'
    ,url:'/demo/table/user/'
    ,cols: [[
      {field:'id', width:80, title: 'ID', sort: true}
      ,{field:'username', width:80, title: '用户名'}
      ,{field:'sex', width:80, title: '性别', sort: true}
      ,{field:'city', width:80, title: '城市'}
      ,{field:'sign', title: '签名', minWidth: 150}
      ,{field:'experience', width:80, title: '积分', sort: true}
      ,{field:'score', width:80, title: '评分', sort: true}
      ,{field:'classify', width:80, title: '职业'}
      ,{field:'wealth', width:135, title: '财富', sort: true}
    ]]
    ,page: true	//开启自动分页
  });
});

request参数和接口数据

开启自动分页后，request里会自动带上分页数据。
page：第几页
limit：每页几条数据

这些参数是可以通过HttpServletRequest取出来的。
（这里只是展示，实际我这里用到springmvc的自动取参。）

		String pageStr=request.getParameter("page");
		String limitStr=request.getParameter("limit");

拿到这些参数后，我们可以进行sql分页查询

	@RequestMapping("/list")
	@ResponseBody
	public Map<String,Object>  selectAll(Repair repair,@RequestParam(defaultValue="1")int page,@RequestParam(defaultValue="5")int limit) {	
		List<Repair> countData=service.selectAll();		//查询总数
		List<Repair> data=service.selectByPage(page,limit);		//分页查询数据
		
		Map<String,Object> map=new HashMap<>();		//装填回调数据
		map.put("code", 0);	
		map.put("msg", "随便写啥");
		map.put("count", countData.size());		//获得数据的总数
		map.put("data",data);	//本次分页查询的数据
		return map;
	}

json格式

{
"code":0,
"msg":"随便写啥",
"count":1000,	//数据的总数 
"data":[	//本次分页查询的数据
{.....数据.....},
{.....数据.....}]

---

3、定制分页表格 和 手动设置参数

样式

和自动分页表格差不多，手动挡和自动挡的区别。

html

<table class="layui-hide" id="demo">table>

js代码

可以设置下一页、上一些、跳页这些按钮的顺序，
当回调数据不叫code、msg、data时，可以手动设置对应关系。

	layui.use('table', function(){
		var table = layui.table;	 	//加载table模块
	 	
		table.render({
			  elem: '#demo' //指定原始表格元素选择器（推荐id选择器）
			  ,title:"售后维修点表格"
			  ,height: 315 //容器高度
			  ,url:'${contextPath }/repair/list' //数据接口
			//设置分页属性
			  ,page:{
				 layout: [ 'prev', 'page', 'next', 'count','limit', 'refresh', 'skip']//自定义布局顺序 
				 ,limit:5	//初始  每页几条数据
		       	 ,limits:[5,10,15]	//可以选择的 每页几条数据 
				 ,groups:10 	//最多几个跳页按钮
		         ,first: false //不显示首页
		         ,last: false //不显示尾页
			  }
			  //设置回调数据和数据表格参数对应
			  ,parseData : function(resp) {  //当名字不一致时，使用
					return {
						"code" : resp.mycode,  //使分页参数和回调数据对应
						"msg" : resp.mymsg,
						"count" : resp.mytotal,
						"data" : resp.data.list,  //json格式
				}
			  }
			  //设置表头
			  ,cols: [[
			      {type:'numbers', width:80, title: '序号', sort: true}
			      ,{field:'rep_id', width:80, title: 'ID', sort: true}
			      ,{field:'rep_name', width:80, title: '公司名'}
			      ,{field:'address', width:80, title: '地址', sort: true}
			      ,{field:'phonenum', width:80, title: '电话'}
			  ]]
			  //,…… //更多参数参考官方文档
			});
		

	 	

---

4、crud表格

样式

分页的同时，每行有crud操作按钮

html代码

表格部分基本和上面一样，table需要添加一个lay-filter属性，可以看做是一个layui的识别id。

<table id="test"  class="layui-hide" lay-filter="demo">table>

js代码

为了精简代码，我这里就用自动分页了。

表头需要添加,{fixed: 'right', width:178, align:'left', toolbar: '#barDemo'}
其中toolbar:#barDemo指定一个按钮组的id。

按钮组

 <!-- 操作按钮 -->
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <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(){
	 	//加载table模块
		var table = layui.table;
	 	
		table.render({
			  elem: '#test' //指定原始表格元素选择器（推荐id选择器）
			  ,title:"售后维修点表格"	//表格标题
			  ,height: 315 //容器高度
			  ,url:'${contextPath }/repair/list'	//数据接口
			  ,page:true
			  //设置表头
			  ,cols: [[
			      {type:'numbers', width:80, title: '序号', sort: true}
			      ,{field:'rep_id', width:80, title: 'ID', sort: true}
			      ,{field:'rep_name', width:80, title: '公司名'}
			      ,{field:'address', width:80, title: '地址', sort: true}
			      ,{field:'phonenum', width:80, title: '电话'}
			    ,{fixed: 'right', width:178, align:'left', toolbar: '#barDemo'} 	//添加工具条
			  ]]
			  
			});
		

 	  //为工具条添加监听
 	  //这里括号里对应table设置的lay-filter属性！！
	  table.on('tool(demo)', function(obj){
		//获取当前行数据
		  var data = obj.data;
		//获取event对应的值
		var event =obj.event;
		//获取当前行的dom对象
		var tr=obj.tr;
		  
	    if(event === 'detail'){		//如果点击了查看按钮
			//执行查看详情的方法
	    	
	    } else if(event === 'del'){	//如果点击了删除按钮
			//执行异步删除方法
			
	      });
	    } else if(event === 'edit'){	//如果点击了修改按钮
			//执行修改方法

	    } 
	  }); 
</script>

---

*上面用到的方法

<script>
//查看详情方法
function detail(data){
	layer.open({
		//弹出层类型
		type:2,
		 //取值
        content:'${contextPath }/static/test_B11/tanchu.jsp?id='+data.rep_id+'&name='+data.rep_name+'&address='+data.address+'&phonenum='+data.phonenum,
        //设置宽和高
        area:['500px','300px'],
        //设置按钮名称
        btn:['我知道了'],
        //设置按钮位置
        btnAlign:'c',
        //透明度 和 被遮盖层颜色
        shade: [0.8,'#393D49'],
        //渐显动画
        anim: 5
		
		})
}

//修改方法
function edit(data){
 	layer.open({
		 //弹出层类型
       type:2,
       //取值
       content:'${contextPath }/static/test_B11/xiugai.jsp?id='+data.rep_id+'&name='+data.rep_name+'&address='+data.address+'&phonenum='+data.phonenum,
       //设置宽和高
       area:['600px','400px'],
       //设置按钮名称
       btn:['暂不进行修改'],
       //设置按钮位置
       btnAlign:'c',
       //透明度 和 被遮盖层颜色
       shade: [0.8,'#393D49'],
       //渐显动画
       anim: 5,
       //当检测到弹出层被关闭时，自动刷新一下界面
       //用于后面修改学生信息请求提交后自动刷新查看修改结果  
       end: function(){
           console.log("222");
       },
	})
}
</script>

//删除方法
	     layer.confirm('真的删除行么', function(index){
	       //index表示第几次弹出层不是索引值，也不是主键等信息
            //刷新页面重置
           obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
           layer.close(index);
           //执行一个异步删除方法
           }