大三笔记（ssm项目中使用layui进行分页）

 

本篇文章较为简单，实现的功能是分页。下面贴代码。

<script src="layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use('table', function(){
  var table = layui.table;
  table.render({
	  skin: 'line' //行边框风格
		,even: true //开启隔行背景
		,page:true //开启分页
		,id:'ldh'
		,limit:8  //每页8条
	  ,elem: '#t'
	 ,height: 412
	,width:1100
	   ,url: '/myspringTest/list.do' //数据接口
	
	   //开启分页
		//,where: {token: 'sasasas', id: 123}
	
	  ,cols: [[ //表头
		  {type: 'checkbox', fixed: 'left'}
	       ,{field: 'student_id', title: 'ID', width:80, sort: true, fixed: 'left'}
	     ,{field: 'name', title: '姓名', width:120}
	       ,{field: 'sex', title: '性别', width:100, sort: true, totalRow: true}
	       ,{field: 'age', title: '年龄', width:100} 
	       ,{field: 'phone', title: '手机号码', width: 177, totalRow: true}
	     ,{field: 'course_id', title: '排课编号', width: 180, sort: true}
	        ,{field: 'exam_id', title: '考试编号', width: 180, sort: true}
	        ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
	      ]],
	  	request: {
			pageName: 'page',
			limitName: 'size'  //如不配置，默认为page=1&limit=8，配置之后：page=1&size=8
		},
		
		limits: [8, 16, 24, 32, 40]

	  
	    });

  
  
  
  //监听表格复选框选择
  table.on('checkbox(demo)', function(obj){
    console.log(obj)
  });
  //监听工具条
  table.on('tool(demo)', function(obj){
    var data = obj.data;
    if(obj.event === 'detail'){
      //layer.msg('ID：'+ data.id + ' 的查看操作');
    
        $.ajax({                      
        	type : "post",//发送方式 
            url : "/myspringTest/detail.do",// 路径
            data : {"student_id":data.student_id} ,  
            success: function(text){
            	 $.get("detail.jsp",function(data){
            		   $("#content").html(data);//初始化加载界面
            		   });
            	},     
            error: function(text) {alert("对不起,用户ID不存在,请输入正确的用户ID");}   
            });  

    		    
      
    } else if(obj.event === 'del'){
      layer.confirm('真的删除行么', function(index){
        obj.del();
        layer.close(index);
      });
    } else if(obj.event === 'edit'){
      layer.alert('编辑行：<br>'+ JSON.stringify(data))
    }
  });
  
  var $ = layui.$, active = {
    getCheckData: function(){ //获取选中数据
      var checkStatus = table.checkStatus('ldh')
      ,data = checkStatus.data;
      layer.alert(JSON.stringify(data));
    }
    ,getCheckLength: function(){ //获取选中数目
      var checkStatus = table.checkStatus('ldh')
      ,data = checkStatus.data;
      layer.msg('选中了：'+ data.length + ' 个');
    }
    ,isAll: function(){ //验证是否全选
      var checkStatus = table.checkStatus('ldh');
      layer.msg(checkStatus.isAll ? '全选': '未全选')
    }
  };
  
  $('.demoTable .layui-btn').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });
});
</script>

	@RequestMapping("list")
	@ResponseBody
	public tableVo<List<student>> getAllStudent(@RequestParam("page") Integer page, @RequestParam("size") Integer size){
		System.out.println("收的到");
		List<student> list = service.getAllStudent(page,size);
		tableVo<List<student>> vo = new tableVo<List<student>>();
		int count = service.selectCount();
		vo.setData(list);
		vo.setCode(0);
		vo.setCount(count);
		vo.setMsg("");
		return vo;
	}

 

studentServiceImpl.java

	public List<student> getAllStudent(Integer page,Integer size) {
		// TODO Auto-generated method stub
	      if(page == null || page <= 0){
	           page = 1;
	        }
	        if (size == null || size <= 0){
	            size = 10;
	        }
	        Integer start = (page - 1) * size;


		List<student> list = this.mapper.getAllStudent(start,size);
		
		return  list;
		
	}

studentMapper.xml

  <select id="getAllStudent" resultType="com.cn.lin.bean.student">
    	select * from student  LIMIT #{start}, #{size}
    
    </select>

（最好不要select * ,而是把每个字段都列出来，或者<include>引入）