Layui 解决表格异步调用后台分页的问题


Posted in Javascript onOctober 26, 2019

参考Layui数据表格文档可以看到三种layui表格渲染方式,项目选用第一种,采用Layui的异步数据接口方式,渲染表格并分页。

按照官方写法,会报跨域错误,尝试几次,发现需要设置contentType。

//js
layui.use(['table','element'], function(){
 var fhtable = layui.table;
 //方法渲染表格
 fhtable.render({
 id: "pxjltable",//容器唯一id
 elem: '#pxjltable',//原始table容器dom
 method :'get',
 contentType: 'jsonp',//一定要是jsonp类型
 headers:{
 "Token": winStorage.token
 },
 request: {
 pageName: 'current', //页码的参数名称,默认:page
 limitName: 'limit' //每页数据量的参数名,默认:limit
 },
 url: baseAjaxUrl+'/fmReviewManagementRecord/front_login/getRecordByUserId',
 height: 470, //设置高度
 limit: 10,
 page: {layout: ['prev','page','next','count','skip']},
 cols:[[
 {field:'applyDate',title:'复核申请日期',width:131,align:'center'},
 {field:'certificateLevel',title:'认定级别',templet:'#level',width:102,align:'center'},
 {field:'status',title:'状态',templet:'#status',width:102,align:'center'},
 {field:'passDateFmt',title:'审核日期',width:131,align:'center'},
 {field:'status',title:'复核结果',templet:'#status1',width:105,align:'center'},
 {field:'orgName',title:'复合单位',align:'center'},
 {field: 'auditContents',title: '审核反馈',
  templet: function(d) {
  if (null == d.auditContents || d.auditContents == "") {
   return '无反馈信息' 
  }
  return '<span class="see-info" data-value="' + d.auditContents + '">查看</span>'
  },
  align: 'center'
 }
 ]],
 parseData: function(res){ //res 即为原始返回的数据
 return {
  "code": res.code, //解析接口状态
  "msg": res.message, //解析提示文本
  "count": res.data.total, //解析数据长度
  "data": res.data.records //解析数据列表
 };
 },
 response: {
 statusCode: 200
 },
 done: function(res, curr, count) {
 layer.closeAll();
 }
});
 
//html
<table id="pxjltable" lay-filter="fhgldemo" class="layui-table" lay-skin="nob">
 </table>
<script type="text/html" id="level">
 {{# if(d.certificateLevel === '1'){ }}
 <span>初级</span>
 {{# } else if(d.certificateLevel === '2'){ }}
 <span>中级</span>
 {{# } else if(d.certificateLevel === '3'){ }}
 <span>高级</span>
 {{# } }}
</script>
<script type="text/html" id="status">
 {{# if(d.status === '1'){ }}
 <span style="color: #FF1B1B;">待审核</span>
 {{# } else { }}
 <span style="color: #1AB263;">已完成</span>
 {{# } }}
</script>
<script type="text/html" id="status1">
 {{# if(d.status === '2'){ }}
 <span>合格</span>
 {{# } else if(d.status === '3'){ }}
 <span>优秀</span>
 {{# } else if(d.status === '4'){ }}
 <span>不合格</span>
 {{# } else { }}
 <span>-</span>
 {{# } }}
</script>

效果图

Layui 解决表格异步调用后台分页的问题

以上这篇Layui 解决表格异步调用后台分页的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript与CSS复习(二)
Jun 29 Javascript
js自定义方法通过隐藏iframe实现文件下载
Feb 21 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
Aug 09 Javascript
jquery实现的网页自动播放声音
Apr 30 Javascript
详解vue渲染从后台获取的json数据
Jul 06 Javascript
node.js中使用Export和Import的方法
Sep 18 Javascript
详解vue+webpack+express中间件接口使用
Jul 17 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
Aug 14 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
Jan 08 Javascript
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
解决vue初始化项目一直停在downloading template的问题
Nov 09 Javascript
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
Layui实现数据表格默认全部显示(不要分页)
Oct 26 #Javascript
vue-router的钩子函数用法实例分析
Oct 26 #Javascript
VUE兄弟组件传值操作实例分析
Oct 26 #Javascript
layui实现给某一列加点击事件
Oct 26 #Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
Oct 26 #Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
Oct 26 #Javascript
layui 解决富文本框form表单提交为空的问题
Oct 26 #Javascript
You might like
来自PHP.NET的入门教程
2006/10/09 PHP
PHP 一个比较完善的简单文件上传
2010/03/25 PHP
php一个找二层目录的小东东
2012/08/02 PHP
PHP时间格式控制符对照表分享
2013/07/23 PHP
php中读写文件与读写数据库的效率比较分享
2013/10/19 PHP
常用PHP框架功能对照表
2014/10/23 PHP
Yii的CDbCriteria查询条件用法实例
2014/12/04 PHP
文件上传之SWFUpload插件(代码)
2015/07/30 PHP
php的RSA加密解密算法原理与用法分析
2020/01/23 PHP
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
2010/03/23 Javascript
{}与function(){}选用空对象{}来存放keyValue
2012/05/23 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
2014/03/10 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
javascript中判断json的方法总结
2015/08/27 Javascript
jQuery实现平滑滚动的标签分栏切换效果
2015/08/28 Javascript
js轮盘抽奖实例分析
2020/04/17 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
详解vue 实例方法和数据
2017/10/23 Javascript
vue仿淘宝订单状态的tab切换效果
2020/06/23 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
2017/12/27 Javascript
微信运维交互机器人的示例代码
2018/11/12 Javascript
详解基于原生JS验证表单组件xy-form
2019/08/20 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
linux服务器快速卸载安装node环境(简单上手)
2021/02/22 Javascript
python列表去重的二种方法
2014/02/14 Python
python调用摄像头拍摄数据集
2019/06/01 Python
Python新手学习标准库模块命名
2020/05/29 Python
python能做哪方面的工作
2020/06/15 Python
2014年电信员工工作总结
2014/12/19 职场文书
情侣餐厅的创业计划书范本!
2019/07/26 职场文书
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle
Python异常类型以及处理方法汇总
2021/06/05 Python
Python使用OpenCV和K-Means聚类对毕业照进行图像分割
2021/06/11 Python
mysql字段为NULL索引是否会失效实例详解
2022/05/30 MySQL