首页 / LAYUI / layui定时刷新数据表格
layui定时刷新数据表格
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了layui定时刷新数据表格,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2625字,纯文字阅读大概需要4分钟。
内容图文
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>配件提示刷新功能</title>
<script src="../assets/js/jquery/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="layui/lib/layui-v2.5.4/css/layui.css" media="all">
</head>
<body>
<!-- 数据表格 -->
<table id="dataTable" lay-filter="dataTable"></table>
<script src="layui/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="layui/lib/layui-v2.5.4/layui.js" charset="utf-8"></script>
<script src="layui/lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>
<script>
layui.use(['layer', 'form', 'table'], function () {
var $ = layui.jquery;
var layer = layui.layer;
var form = layui.form;
var table = layui.table;
/* 渲染表格 */
var cols = [
{field: 'docNo',width:180, title: '单号', align: 'left'},
{field: 'createName',width:120, title: '需求人', align: 'left'},
{field: 'supName', title: '客户', align: 'left'},
{field: 'whName',width:200, title: '仓库', align: 'left'},
{field: 'whArea',width:60, title: '区域', align: 'left'},
{field: 'createTime',width:200, title: '时间', align: 'left'},
{
field: 'docStatus',width:200, title: '单据状态', align: 'left', templet: function (d) {
if (d.docStatus === '0') {
return "<span style='color: #bf81f5;'>待仓库确认</span>";
} else if (d.docStatus === '1') {
return "<span style='color: #81f5e4;'>仓库已确认,正在拣货中</span>";
} else if (d.docStatus === '2') {
return "<span style='color: #81f58d;'>仓库拣货完成</span>";
} else if (d.docStatus === '4') {
return "<span style='color: #f581b1;'>该位置无负责人拣货</span>";
} else {
return "";
}
}
},
{field: 'pickName',width:120, title: '拣货员', align: 'left'},
];
let whCode = getUrlParam("whCode");
var nowCurr=0;
var nowCount=0;
var insTb = table.render({
elem: '#dataTable',
url: '/a/api/ship/getShipPatrsAllData?whCode=' + whCode,
page: true,
toolbar: false,
cellMinWidth: 100,
limits: [10, 11, 12, 13, 14, 18, 19, 20, 50],
limit:17,
cols: [cols],
done: function (res, curr, count) {
//隐藏下面的分页
$(".layui-table-page").css("display","none");
//拿到当前每页的分页总数
let limitCount = insTb.config.limit;
//总数除以每页要显示的数据可以拿到要分多少次页
let result=Math.ceil(count/limitCount);
nowCurr=curr+1;
nowCount=count;
//如果大于最大的分页,则直接把分页重新设置为1,则从第一页重新开始刷新
if (result<nowCurr){
nowCurr=1;
}
}
});
var time = setInterval(function() {
if (nowCount>0){
insTb.reload({page: {curr: nowCurr}});
}
}, 120000);
});
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return decodeURI(r[2]);
} else {
return null;
}
}
</script>
</body>
</html>
记录学习过程
内容总结
以上是互联网集市为您收集整理的layui定时刷新数据表格全部内容,希望文章能够帮你解决layui定时刷新数据表格所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。