解决layui的table在reload之后工具栏按钮失效的问题

转自https://blog.51cto.com/1197822/2472692?source=dra

layui.use(['form','layer','table'],function(){
    var form = layui.form,
        layer = parent.layer === undefined ? layui.layer : top.layer,
        table = layui.table;

    // 加载提示
    var loadingMsg = layer.msg('数据请求中', {icon: 16,scrollbar: false,time: 0});
    // 初始化表格及数据
    var tableIns = table.render({
        elem: '#tableList',
        url : 'sysUser/list',
        where :{
            phone : $("#phone").val()
        },
        cellMinWidth : 95,
        toolbar: "#toolbarDemo", //让工具栏左侧显示默认的内置模板
        defaultToolbar: ['filter'], // 工具栏右侧的图标按钮['filter', 'print', 'exports']
        even: true, // 开启斑马线效果
        page : true,
//        height : "full-125",//放置在页面底部
        limits : myLimits,
        limit : myLimit,
        id : "tableListTable",
        cols : [[
            {field: 'userId', title: 'ID', width:100, align:"center"},
            {field: 'userName', title: '用户名', minWidth:150, align:"center"},
            {field: 'state', title: '状态', width:80, align:"center", templet: stateFormat},
            {field: 'sex', title: '性别', width:80, align:"center", templet: sexFormat},
            {field: 'remark', title: '备注', align:"center"}
        ]],
        done: function(res, curr, count){
            // 关闭提示层
            layer.close(loadingMsg);
            // 绑定表格工具栏按钮的触发事件
            bindTableToolbarFunction();
        }
    });

 function bindTableToolbarFunction() {
        // 绑定新增用户事件
        $("#add").on("click", function() {
            layer.alert("新增用户被调用了", {icon: 6});
        });

        // 绑定删除用户事件
        $("#del").on("click", function() {
            layer.alert("删除用户被调用了", {icon: 6});
        });
    }
点赞

发表回复

电子邮件地址不会被公开。必填项已用 * 标注