layui表格分页--laypage

后台返回所有数据，由前端分页

1.先引入layui.css、layui.js，因此时需要用到ajax，所以也引入jQuery

<link rel="stylesheet" href="layui/css/layui.css"  media="all">     
<script src="js/jquery.min.js"></script> 
<script src="layui/layui.all.js" charset="utf-8"></script>

2.html如下：

<table id= "table" class="table layui-table" >
    <thead style="text-align: center;">
	<tr>
	   <th style="text-align: center;">编号</th>
	   <th style="text-align: center;">code</th>
	   <th style="text-align: center;">有/无(算力)</th>
	   <th style="text-align: center;">数据库录入MAC地址</th>
	   <th style="text-align: center;">最后一次提交算力时间</th>
        </tr>
    </thead>
    <tbody id="tbody" style="text-align: center;"></tbody>			
</table>				
<div id="pagination" style="text-align: right;"></div>	

3.采用ajax发送请求，获取全部数据之后，引入laypage进行分页

!function (){			
    $.ajax({
	url:'http://47.106.120.69:8009/cgi-bin/getinfo.cgi?version=1.1&cl=app&page=1',				
	method:'get',
	cache: false,
	dataType: 'json',
	success: function(data){					
	   if(data.errno == 0){						
	         var html = '',tableArr = data.data;	
		 if(tableArr.length > 0){							
		    initTable(tableArr)														
		 }else{
		    html += '<tr><td colspan="6">暂无相关数据</td></tr>'								
		 }
		 $("#table tbody").html(html)	
	    }					
	},error: function(){
		layer.alert("网络连接有误，请稍后！")					
	}
	})						
}()		
function initTable(data){
	layui.use(['laypage'], function(){
		var laypage = layui.laypage;
		laypage.render({
		  elem: 'pagination',
		  count: data.length,
		  limit: 16,
		  jump: function(obj){
		        document.getElementById('tbody').innerHTML = function(){
			var arr = [],thisData = data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
			layui.each(thisData, function(index, item){
			       arr.push('<tr><td>'+item.number+'</td><td>'+item.code+'</td><td>'+item.hasvalue+'</td><td>'+item.dmac+'</td><td>'+item.ctime+'</td></tr>');
			});
			return arr.join('');
		      }();
		  }
	     });
	})
}