数据表格重载为何只能执行一次

提问 已结 11 458
影清如梦
悬赏:100飞吻
版本:layui 浏览器:360急速模式
我的数据表格重载只能执行一次,点击搜索以后再点击就没有效果了
回帖
  • lll_lll
    2019-7-8
    @影清如梦 试一下,和楼上形式是一样,有多表时最好这样定义一个参数保存
    //加载商品管理页面列表数据
    var commodityManagementList;//保存table数据,方便重载
    layui.use('table', function () {
    var table = layui.table;
    commodityManagementList = table.render({});//加载表格并赋值,数据省略
    });

    //查询商品管理数据,从新加载表格,点击事件触发,更改数据时可调用更新表格数据
    function queryCommodityManagementList() {
    commodityManagementList.reload({
    where: { //设定异步数据接口的额外参数,任意设
    title: $('#title').val(),
    cate_id: $('#cate_id').val(),
    is_effect: $('#is_effect').val()
    },
    page: {
    curr: 1 //重新从第 1 页开始
    }
    });
    }
    0 回复
  • lll_lll
    2019-7-8
    兄台贴一下代码
    0 回复
  • <table class="layui-hide" id="test" lay-filter="test"></table>
    <script type="text/html" id="toolbarDemo">
    <div class="demoTable">
    搜索用户名:
    <div class="layui-inline">
    <input class="layui-input" name="username" id="demoReload" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
    </div>
    </script>
    <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail" >查看</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script>
    layui.use('table', function(){
    var table = layui.table;

    table.render({
    elem: '#test'
    ,url:'index.php?c=ajaxdata&action=user_list'
    ,toolbar: '#toolbarDemo'
    ,title: '用户数据表'
    ,cols: [[
    {type: 'checkbox', fixed: 'left'}
    ,{field:'username', title:'用户名'}
    ,{field:'email', title:'邮箱',width:198}
    ,{field:'fullname', title:'真实名称'}
    ,{field:'sex', title:'性别', sort: true,templet:function(res){
    if(res.sex==1){
    return '<span style="color:blue;">男</span>'
    }else{
    return '<span style="color:#fd4f00;">女</span>'
    }
    }}
    ,{field:'mobi', title:'联系电话', }
    ,{field:'status', title:'白名单', event: 'set_status',templet:function(res){
    if(res.status==1){
    return '<input type="checkbox" name="yyy" lay-skin="switch" lay-text="白名单|普通栏" checked disabled>'
    }else if(res.status==2){
    return '<input type="checkbox" name="yyy" lay-skin="switch" lay-text="白名单|普通栏" disabled>'
    }
    }}
    ,{field:'reg_time', title:'注册时间'}
    ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
    ]]
    ,id:'testReload'
    ,page: true
    });

    var $ = layui.$, active = {
    reload: function(){
    var demoReload = $('#demoReload');
    //执行重载
    table.reload('testReload', {
    page: {
    curr: 1 //重新从第 1 页开始
    }
    ,where: {
    username: demoReload.val()
    }
    }, 'data');
    }
    };

    $('.demoTable .layui-btn').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
    });
    //操作工具栏
    table.on('tool(test)', function(obj){
    var data = obj.data;
    if(obj.event === 'detail'){
    window.location.href="index.php?c=user&action=edit&id="+data.id;
    } else if(obj.event === 'del'){
    layer.confirm('真的删除行么', function(index){
    obj.del();
    layer.close(index);
    });
    } else if(obj.event === 'edit'){
    layer.alert('编辑行:<br>'+ JSON.stringify(data))
    }else if(obj.event === 'set_status'){
    if(data.status==1){
    layer.confirm('您确定将此会员移入普通栏目吗?', {
    btn: ['确定','取消'], //按钮
    icon:3
    }, function(){
    $.get("index.php?c=ajaxdata&action=set_status&id="+data.id, function(data){
    if(data.code==0){
    layer.msg('设置成功',{icon:1,time:500},function(){
    window.location.reload();
    })
    }
    },'json');
    });
    }else{
    layer.confirm('您确定将此会员移入白名单吗?', {
    btn: ['确定','取消'], //按钮
    icon:3
    }, function(){
    $.get("index.php?c=ajaxdata&action=set_status&id="+data.id, function(data){
    if(data.code==0){
    layer.msg('设置成功',{icon:1,time:500},function(){
    window.location.reload();
    })
    }
    },'json');
    });
    }
    }
    });
    });
    </script>
    </div>
    0 回复
  • $("#search").click(function(){
    table.reload('test',{
    where:{
    taskId:$("#taskId").val().trim(),
    feedbackBy:$("#feedbackBy").val().trim(),
    recepitionStatus:$("#feedbackState").val().trim()
    }
    })
    })
    你可以试下这种重载方式
    0 回复
  • 好的,谢谢,我先试一下,稍后采纳各位的建议
    0 回复
  • @结城明日奈i 还是只能点击搜索一次,搜索结果是对的但是第二次点击没有反应,要刷新一下页面才能再进行搜索,而且依然是只能点一次
    0 回复
  • @ll_lll 和你楼上一样
    0 回复
  • lll_lll
    2019-7-8
    @影清如梦 你每一次点击的触发了事件吗 你可以调试一下
    0 回复
  • 改一下按钮试一下?不用data-type="reload",用这样的
    <button type="button" class="layui-btn" id="search">
    <i class="layui-icon layui-icon-search"></i>
    </button>
    0 回复
  • @ll_lll 你的写法帮助了我,看上面代码我把触发的方法给移到外面,再重新定义table,然后进行重载,目前已可以使用,@结城明日奈i 的方法也不错
    0 回复