后台返回所有数据,由前端分页
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('');
}();
}
});
})
}