layui表格分页--table

后台做好分页,将page页对应数据返回,主要采用layui的laypage模块

1.先引入layui.css、layui.js

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

2.一般我们调用接口时,需要跟后端约定好接口返回数据格式,在这里,我与后端约定好的接口如下


在此,接口返回的参数与response对象的值是要一一对应的,这个response是用于对返回数据的数据格式的自定义,此处若想深入了解,点击打开链接

layui.use('table', function(){
    var table = layui.table;	  
	table.render({
	  elem: '#table',
	  url:'http://47.106.120.69:8009/cgi-bin/getinfo.cgi',	
	  method: 'GET',			  
	  where: {version:1.1, cl:app,page:1},//请求参数
	  response: { //定义后端 json 格式,详细参见官方文档
	     statusName: 'errno', //状态字段名称
	     statusCode: '0', //状态字段成功值
	     msgName: 'msg', //消息字段
	     countName: 'count', //总页数字段
	     dataName: 'data' //数据字段
	  },  
	  page: true,
	  cols: [[
	     {field:'number',  title: '编号',align: 'center' ,width:'10%'},
	     {field:'code',  title: 'code',align: 'center'},
	     {field:'hasvalue',  title: '有/无(算力)',align: 'center',width:'15%'},
	     {field:'dmac',title: '数据库录入MAC地址',align: 'center'},
	     {field:'ctime',  title: '最后一次提交算力时间',align: 'center'}	      
	  ]],	    
       });
});

3.最后表格分页完成,当点击将要跳转到的页面时,会自动发起请求,跳到相对应页面

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值