本篇文章較為簡單，實現的功能是分頁。下面貼程式碼。

<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>引入）