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一点特殊用法
May 28 Javascript
jquery下jstree简单应用 - v1.0
Apr 14 Javascript
js 处理数组重复元素示例代码
Dec 27 Javascript
什么是Node.js?Node.js详细介绍
Jun 01 Javascript
jQuery分别获取选中的复选框值的示例
Jun 17 Javascript
JQuery中属性过滤选择器用法实例分析
May 18 Javascript
基于javascript代码实现通过点击图片显示原图片
Nov 29 Javascript
BootStrap modal模态弹窗使用小结
Oct 26 Javascript
Javascript下拉刷新的简单实现
Feb 14 Javascript
canvas实现简易的圆环进度条效果
Feb 28 Javascript
jQuery插件之validation插件
Mar 29 jQuery
vue项目中用cdn优化的方法
Jan 03 Javascript
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
在IIS7.0下面配置PHP 5.3.2运行环境的方法
2010/04/13 PHP
PHP实现HTML页面静态化的方法
2015/11/04 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
PHP hebrev()函数用法讲解
2019/02/21 PHP
几个高效,简洁的字符处理函数
2007/04/12 Javascript
js href的用法
2010/05/13 Javascript
jQuery 表单验证扩展(三)
2010/10/20 Javascript
JavaScript函数详解
2015/02/27 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
2015/06/19 Javascript
JavaScript获取中英文混合字符串长度的方法示例
2017/02/04 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
Node.js console控制台简单用法分析
2019/01/04 Javascript
对Layer UI 模块化的用法详解
2019/09/26 Javascript
vue axios封装httpjs,接口公用配置拦截操作
2020/08/11 Javascript
[57:53]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#3OG VS VP
2016/03/03 DOTA
python简单实现旋转图片的方法
2015/05/30 Python
使用Python解析JSON数据的基本方法
2015/10/15 Python
Django2.1.3 中间件使用详解
2018/11/26 Python
Python中的枚举类型示例介绍
2019/01/09 Python
详解python中init方法和随机数方法
2019/03/13 Python
一篇文章搞定Python操作文件与目录
2019/08/13 Python
tensorflow的ckpt及pb模型持久化方式及转化详解
2020/02/12 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
webapp字号大小跟随系统字号大小缩放的示例代码
2018/12/26 HTML / CSS
shell程序中如何注释
2012/02/17 面试题
期末自我鉴定
2014/02/02 职场文书
商场总经理岗位职责
2014/02/03 职场文书
政府信息公开实施方案
2014/05/09 职场文书
2015年安全生产工作总结范文
2015/04/02 职场文书
电话营销开场白
2015/05/29 职场文书
无工作证明怎么写
2015/06/15 职场文书
Mysql 用户权限管理实现
2021/05/25 MySQL
Python答题卡识别并给出分数的实现代码
2021/06/22 Python
Django对接elasticsearch实现全文检索的示例代码
2021/08/02 Python
js作用域及作用域链工作引擎
2022/07/07 Javascript