美文网首页
LayUI搜索及表格数据重载

LayUI搜索及表格数据重载

作者: 筱土豆儿 | 来源:发表于2019-10-08 08:43 被阅读0次

一、前端代码

 <div class="layui-fluid">
  <div class="layui-row layui-form">
    <div class="layui-form-item">
      <div class="layui-inline">
        <div class="layui-input-inline">
          <input type="tel" id="game_id" name="game_id" placeholder="游戏ID" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-inline">
        <div class="layui-input-inline">
          <input type="text" id="pkg_name" name="pkg_name" placeholder="游戏包名" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-inline">
        <div class="layui-input-inline">
          <input type="text" id="game_name" name="game_name" placeholder="游戏名" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-inline">
        <div class="layui-input-inline">
          <select id="game_type" name="game_type" lay-verify="required" lay-search="">
            <option value="all" selected>所有</option>
            <option value="apk_game">APK游戏</option>
            <option value="h5_game">H5游戏</option>
          </select>
        </div>
      </div>
      <div class="layui-inline">
        <button class="layui-btn layuiadmin-btn-useradmin" data-type="search">搜&nbsp;&nbsp;索</button>
      </div>
    </div>
  </div>
</div>

二、layui及js代码

// 数据搜索
var active = {
  search: function () {
    var gameId = $('#game_id')
      , pkgName = $('#pkg_name')
      , gameName = $('#game_name')
      , gameType = $('#game_type')
      , index = layer.msg('查询中,请稍后。。。', {icon:16, time:false, shade:0});
    setTimeout(function () {
      table.reload('v3_games', {  // v3_games为table标签ID
        url: '/admin/v3/v3_games'
        ,methods:"post"
        ,request: {
         pageName: 'page' //页码的参数名称,默认:page
         ,limitName: 'limit' //每页数据量的参数名,默认:limit
        }
        ,where: {
         'game_id': gameId.val(),
         'game_name': gameName.val(),
         'game_type': gameType.val(),
         'pkg_name': pkgName.val(),
        }
        ,page: {
          curr: 1
        }
      });
      layer.close(index);
    }, 800);
  }
};

$('.layui-btn.layuiadmin-btn-useradmin').on('click', function(){
  var type = $(this).data('type');
  active[type] ? active[type].call(this) : '';
});

相关文章

网友评论

      本文标题:LayUI搜索及表格数据重载

      本文链接:https://www.haomeiwen.com/subject/fadkuctx.html