layui分页加下拉选择

html代码

<div class="server"><div><table id="datatable" class="table layui-table"><thead><tr><th>操作内容</th><th><div class="layui-form xuanze"><select name="type" lay-verify="type" lay-filter="type"><option value="0">全部类型</option><option value="1">URL刷新</option><option value="2">规则刷新</option><option value="3">URL预热</option></select></div></th><th><div class="layui-form xuanze"><select name="status" lay-verify="status" lay-filter="status"><option value="0">全部状态</option><option value="1">执行中</option><option value="2">成功</option><option value="3">失败</option></select></div></th><th>进度</th><th>提交时间</th></tr></thead><tbody class=""></tbody></table></div><!-- 分页 --><div id="demo1"></div></div>

js代码

layui.use(['laydate', 'form', 'layer', 'laypage', 'table'], function () {var laydate = layui.laydateform = layui.formlayer = layui.layerlaypage = layui.laypagevar pageSize = 5; //每页显示5条var a = 0, b = 5; //页面首次拿到数据显示条数var type, statu; //1.数据类型   2. 数据状态var arrys = []  //声明数组保存请求到的数据var total;  //总数据条数function xuanran(pageSize, type, statu) {oldtypes = $('select[name="type"]').val();oldstatuss = $('select[name="status"]').val();html = '';var urls = '填写选择框中的数据路径'if (oldtypes == 0 && oldstatuss == 0) {urls = '第一次获取页面的全部数据路径'type = 0statu = 0}$.ajax({type: 'post',url: urls,data: {type: type,status: statu},success(data) {var datas = JSON.parse(data)console.log(datas);if (datas.status == 200) {var arry = datas.data.slice(a, b);onload_workconf_data = datas.data;arrys.push(onload_workconf_data);total = arrys[0].length;chazhi(arry)fenye()}}})}//插值function chazhi(arry) {html = '';$("tbody").empty();if (total != '') {$.each(arry, function (k, v) { //这里的函数参数是键值对的形式，k代表键名，v代表值var time = getLocalTime(arry[k].createtime)html += `<tr><td>${arry[k].url}</td><td>${type}</td><td>${status}</td><td>${arry[k].progress}%</td><td>${Y + M + D + h + m + s}</td></tr>`});$("tbody").append(html);} else {$("table").after(`<p class="no_record">还没有操作记录可以查询</p>`);}}//分页function fenye() {//执行一个laypage实例laypage.render({elem: 'demo1' //注意，这里的 demo1 是 ID，不用加 # 号, theme: '#4189f4', limit: pageSize  //每页显示5条, count: total //数据总数，从服务端得到, layout: ['page', 'count'], jump: function (obj, frist) {if (!frist) {a = (obj.curr - 1) * 5;b = ((obj.curr - 1) * 5) + 5;$("tbody").empty();chazhi(arrys[0].slice(a, b), total)}}});}xuanran(pageSize, type, statu);// 转化时间戳function getLocalTime(nS) {var date = new Date(nS * 1000);Y = date.getFullYear() + '-';M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';D = date.getDate() + ' ';h = date.getHours() + ':';m = date.getMinutes() + ':';s = date.getSeconds();}// 选择类型form.on('select(type)', function (data) {$("tbody").empty();$(".no_record").remove();var str = '';arrys = []type = data.value;statu = $('select[name="status"]').val();a = 0, b = 5xuanran(pageSize, type, statu);fenye()})// 选择状态form.on('select(status)', function (data) {$(".no_record").remove();$("tbody").empty();var str = '';arrys = []statu = data.value;type = $('select[name="type"]').val();a = 0, b = 5xuanran(pageSize, type, statu);fenye()})

layui分页加下拉选择相关推荐

layui实现select下拉选择框组件（含代码、案例、截图）
layui实现select下拉选择框组件(含代码.案例.截图) 案例 · 效果图: 全部代码如下: <!DOCTYPE html> <html> <head>< ...
微信小程序自定义下拉选择框与分页加载--自用【随笔】
效果图展示下拉加载上拉加载编码实现 wxml  <view><vie ...
uniapp 微信小程序分页方法：uni-pagination分页插件和上拉分页、下拉加载刷新、刷新后回到顶部
1.uni-pagination分页插件先去uniapp插件市场安装分页插件: uni-app官网https://uniapp.dcloud.io/component/uniui/uni-pagin ...
layui下拉选择框开启搜索功能后，文本框会将Nbsp显示出来的解决办法
layui下拉选择框直接在select标签添加lay-search,即可开启搜索功能 <select id="selectCategory" lay-filter=" ...
layui表格下拉选择、日期选择
一.下拉选择改动三个地方: 下拉选择模板数据渲染下拉选择监听填充数据 //表格 {title: '是否棚改房<span class="titletips">*&l ...
element 下拉选择_猿实战18——商品发布之类目选择
猿实战是一个原创系列文章,通过实战的方式,采用前后端分离的技术结合SpringMVC Spring Mybatis,手把手教你撸一个完整的电商系统,变身猿人找到工作不是问题.还等什么呢?关注公号,取基 ...
layui怎么给下拉框赋值_layui给select下拉框赋值
转: layui给select下拉框赋值 //重新渲染表单函数 function renderForm() { layui.use('form', function() { var form = la ...
微信小程序原生开发功能合集二：下拉选择组件封装
本章实现小程序中下拉选择组件的封装实现,通过自定义组件的方式实现下拉选择功能,使用小程序的picker组件实现下拉数据的展示及相关自定义处理,封装数据加载过程,数据切换逻辑监听等. 本节实现s ...
layui 数据表格下拉框_layui学习——数据表格嵌套下拉列表，并实现动态更新
layui学习--数据表格嵌套下拉列表,并实现动态更新项目中有些字段的数据为固定的几个值,这些字段在数据表格中显示为汉字,但在数据库中以数字形式存储,例如:仓库属性(0:普通仓/1:检验仓/2:报废 ...

layui分页加下拉选择

layui分页加下拉选择相关推荐

最新文章

热门文章

layui分页 加下拉选择

layui分页 加下拉选择相关推荐

最新文章

热门文章

layui分页加下拉选择

layui分页加下拉选择相关推荐