美文网首页
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