layui表格数据重载


Posted in Javascript onJuly 27, 2019

本文实例为大家分享了layui表格数据重载,供大家参考,具体内容如下

html代码

<div class="wrap-container clearfix">
 <div class="column-content-detail">
 <form class="layui-form" action="">
  <div class="layui-form-item" style="margin-left:350px;">
  <div class="layui-inline">
  <input type="text" id="userName" name="userName" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
 </div>
 <button class="layui-btn layui-btn-normal" onclick="return false;" data-type="reload" id="selectbyCondition" >搜索</button>
 <button class="layui-btn layui-btn-normal" onclick="insert()">添加</button>
  </div>
 </form>
 <div class="layui-form" id="table-list">
 <table class="layui-table" lay-skin="nob" id="userTable"></table>
 </div>
  </div>
 </div>

js代码

layui.use('table', function(){
 var table = layui.table;
 table.render({
  elem: '#userTable',
  url:'${HPath}/sUser/SelectUserTable',
  cellMinWidth: 80,
  cols: [[
  {field:'userID', title: '用户ID', sort: true},
  {field:'userName', title: '用户名称'},
  {field:'powerName', title: '权限名称'},
  {field:'mailbox', title: '邮箱'},
  {field:'operatUsers', title: '操作', templet: function(d){
  var html = '';
  html += '<button class="layui-btn layui-btn-warm layui-btn-sm" onclick="updateBtn(' + d.userID + ')">修改</button>';
  html += '<button class="layui-btn layui-btn-danger layui-btn-sm" onclick="deleteBtn(' + d.userID + ')">删除</button>';
   return html
  }, fixed: 'right', width: 130
  }
  ]],
  id:'userTableReload',
  limit: 10,
  page:true
 });
 
 //根据条件查询表格数据重新加载
 var $ = layui.$, active = {
  reload: function(){
  //获取用户名
  var demoReload = $('#userName');
  //执行重载
  table.reload('userTableReload', {
   page: {
   curr: 1 //重新从第 1 页开始
  }
  //根据条件查询
   ,where: {
   userName:demoReload.val()
   }
  });
  }
 };
 //点击搜索按钮根据用户名称查询
 $('#selectbyCondition').on('click',
   function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
   });
 });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 分页全选或反选标识实现代码
Aug 09 Javascript
js操作iframe的一些方法介绍
Jun 25 Javascript
jQuery基础知识小结
Dec 22 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
Dec 03 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
Nov 22 Javascript
200行代码实现blockchain 区块链实例详解
Mar 14 Javascript
javascript与PHP动态往类中添加方法对比
Mar 21 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
Aug 24 Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
May 05 Javascript
vue实现前台列表数据过滤搜索、分页效果
May 28 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
Nov 06 Javascript
基于layui实现高级搜索(筛选)功能
Jul 26 #Javascript
微信小程序 如何获取网络状态
Jul 26 #Javascript
layui使用数据表格实现购物车功能
Jul 26 #Javascript
layui实现数据表格点击搜索功能
Mar 26 #Javascript
vue eslint简要配置教程详解
Jul 26 #Javascript
vue移动端城市三级联动组件使用详解
Jul 26 #Javascript
Bootstrap实现省市区三级联动(亲测可用)
Jul 26 #Javascript
You might like
php面向对象全攻略 (五) 封装性
2009/09/30 PHP
php实现通过cookie换肤的方法
2015/07/13 PHP
PHP多维数组排序array详解
2017/11/21 PHP
详解PHP的抽象类和抽象方法以及接口总结
2019/03/15 PHP
jQuery实现的类flash菜单效果代码
2010/05/17 Javascript
js substr支持中文截取函数代码(中文是双字节)
2013/04/17 Javascript
用js实现输入提示(自动完成)的实例代码
2013/06/14 Javascript
高性能JavaScript 重排与重绘(2)
2015/08/11 Javascript
js通过指定下标或指定元素进行删除数组的实例
2017/01/12 Javascript
关于Vue Webpack2单元测试示例详解
2017/08/14 Javascript
Vue中$refs的用法详解
2018/06/24 Javascript
Vue2 添加数据可视化支持的方法步骤
2019/01/02 Javascript
postman自定义函数实现 时间函数的思路详解
2019/04/17 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
2021/01/07 Javascript
利用Python爬取可用的代理IP
2016/08/18 Python
python实现基于SVM手写数字识别功能
2020/05/27 Python
Python和Java的语法对比分析语法简洁上python的确完美胜出
2019/05/10 Python
如何在Django配置文件里配置session链接
2019/08/06 Python
如何安装2019Pycharm最新版本(详细教程)
2019/09/26 Python
浅谈selenium如何应对网页内容需要鼠标滚动加载的问题
2020/03/14 Python
基于python实现查询ip地址来源
2020/06/02 Python
Scrapy爬虫文件批量运行的实现
2020/09/30 Python
如何用Python提取10000份log中的产品信息
2021/01/14 Python
Python实现简单猜数字游戏
2021/02/03 Python
彪马荷兰官网:PUMA荷兰
2019/05/08 全球购物
酒店应聘自荐信
2013/11/09 职场文书
高中生自我评语大全
2014/01/19 职场文书
求职意向书
2014/07/29 职场文书
群众路线党员自我评议范文2014
2014/09/24 职场文书
学生偷窃检讨书
2014/09/25 职场文书
副总经理岗位职责范本
2014/09/30 职场文书
大学生个人学年总结
2015/02/15 职场文书
离婚撤诉申请书范本
2015/05/18 职场文书
《桂花雨》教学反思
2016/02/19 职场文书
写作之关于描写老人的好段摘抄
2019/11/14 职场文书
Mysql表数据比较大情况下修改添加字段的方法实例
2022/06/28 MySQL