layui表格数据重载

本文实例为大家分享了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) : \'\';
   });
 }); 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。