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('');}();}});})
}

layui表格分页--laypage相关推荐

基于Flask实现Layui表格分页功能
分组查询语法 Mysql分页查询和联合查询_Stillboring的博客-CSDN博客 Flask view代码 #获取学生信息 def getStuInfoList():#获取页数pageNum = ...
layui分页limit不显示_layui表格分页不生效怎么解决？
layui表格分页不生效(无法正常显示)怎么解决?下面本篇文章给大家介绍一下layui数据表格分页无法正常显示的解决方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 应该先利用l ...
JAVA_树状表格分页(layUI、treeTable.js)
效果图展示(PS:本人很懒,刚开始想在网上随意找一个就用,后来发现好像PHP的不少,JAVA的树状表格大多数跟我开始写的一样没有分页,导致数据量过大后加载过于缓慢被客户吐糟,最后没找到合适的就自己写了 ...
Thinkphp+layui数据表格实现表格分页
项目场景:Thinkphp+layui数据表格实现表格分页提示:thinkphp+layui数据表格分页,需要服务器端配合.之前在百度上一通乱搜也没找到解决方案. 问题描述提示:这里描述项目中遇到 ...
Layui数据表格分页通过两种方法实现
SSM框架+Layui框架实现数据表格分页效果图如下所示: 具体实现方法: 方法一:(基于前台进行分页) 实现思路:主要是后台将全部数据返回到前台,之后前台通过Layui的parseData函数来实现 ...
layui数据表格分页无法正常显示
layui数据表格分页无法正常显示应该先利用layui table中的parseData方法手动将数据切片分页,代码如下,要点是parseData: function(res){}中的方法,对从ur ...
layui表格自定义分页
layui.use(['laypage', 'layer'], function () {var laypage = layui.laypage;//调用分页laypage.render({elem: ...
layui框架中用laypage与后端搭配使用做分页列表
layui框架中用laypage与后端搭配使用做分页列表 layui中文离线文档,包含html文档及layui源码首先我们需要在layui.use中引入laypage: layui.use(['la ...
Layui表格异步请求服务器端分页数据
文章仅作为个人备忘,未精细整理方法及配置参考处layui网站及相关网络资源,实现了通过Layui表格快速实现请求服务器端分页数据. 前端代码 <!DOCTYPE html> <ht ...

layui表格分页--laypage

layui表格分页--laypage相关推荐

最新文章

热门文章