LayUI搜索及表格数据重载

一、前端代码

 <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) : '';
});
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容