用ajax和jquery html注入表后再次调用tabelize答案

【问题标题】：Call tabelize again after injecting table with ajax and jquery html用ajax和jquery html注入表后再次调用tabelize
【发布时间】：2017-04-19 17:05:13
【问题描述】：

我正在使用这个插件，tabelizer，它使用起来非常简单，您只需按照指定的方式构建表格并在准备好文档时调用 tabelizer：

我的 jquery：

$(document).ready(function(){
    tabilize();
});

我的功能：

function tabilize(){
    console.log("It's getting called");
    var table1 = $('#table1').tabelize({
        /*onRowClick : function(){
            alert('test');
        }*/
        fullRowClickable : false,
        onReady : function(){

        },
        onBeforeRowClick :  function(){

        },
        onAfterRowClick :  function(){

        },
    });
}

我得到了想要的结果，

但是当我使用 ajax 调用刷新表格时：

success: function (response) {
       var resp = response.split('|');
        if (resp[0] == 'ok'){
                $('#table1').html(resp[1]).promise().done(function(){
                   tabilize();
                });
                return false;

我知道它会再次被调用，因为当我加载我的页面时，我会得到控制台日志，当我单击按钮时，我会再次得到控制台日志。

我知道表格与新行相同，因为相同的函数会创建表格，而且，如果我只是刷新浏览器，它会被表格化，但是当我使用刷新表格按钮调用时，它不会被表格化。

我注意到这样做的原因是你只能调用一次 tabelize，如果我没有在文档准备好时调用它，然后我点击刷新表格按钮，表格确实会被 tabelized，但是如果我再次点击刷新它，它没有被制表，我只是得到表格。

那么，我需要做什么才能再次调用 tabelize？

【问题讨论】：

您是否考虑过使用更合适的插件来更好地处理表格数据的变化？
我肯定没有，但是当我看到这个时我很喜欢它，它使用起来非常简单，您有什么建议吗？

标签： jquery

【解决方案1】：

好吧，如果有人偶然发现同样的问题，我所做的就是修改 jquery.tabelizer.min.js 并添加一个我称为 retabelize 的函数，它只是再次初始化并返回公共对象。

我知道这与插件本身创建的对象的持久性有关，并且一旦初始化它就不会再次初始化它自己，它只是更新，所以当你再次调用 tabelize 时，它不会再次初始化自己这就是你需要的。

插件本身很短，所以你可以阅读它的作用。

我在脚本中添加的内容：

e.fn.retabelize = function() {
    return n.caller = this,
    n.init(),
    n.updateData(),
    n.getPublicObj()
}

还有我的 tabelize 函数：

function tabilize(){

if (table1 == null || table1 == 'undefined'){
    table1 = $('#table1').tabelize({
    /*onRowClick : function(){
        alert('test');
    }*/
    fullRowClickable : false,
    onReady : function(){

    },
    onBeforeRowClick :  function(){

    },
    onAfterRowClick :  function(){

    },
});
}else{
    table1 = $('#table1').retabelize();
}
}

【讨论】：

【解决方案2】：

$.fn.tabelize = function(confProp){
    var existingSelf = this.data('tabelizer');
    if (typeof existingSelf == 'undefined'){
        $.extend(self.conf, confProp);
        self.caller = this;
        self.init();

    }else{
        self = existingSelf;
        $.extend(self.conf, confProp);
        self.caller = this;
        self.init();
    }
    //Store copy of self in data for repeat calls, update it after any repeating call
    self.updateData();

    return self.getPublicObj()
};

我的稳定功能

function tabilize(){
            alert("table value"+table1);
            table1 = $('#table1').tabelize({
                /*onRowClick : function(){
                    alert('test');
                }*/
                fullRowClickable : true,
                onReady : function(){
                    console.log('ready');
                },
                onBeforeRowClick :  function(){
                    console.log('onBeforeRowClick');
                },
                onAfterRowClick :  function(){
                    console.log('onAfterRowClick');
                },
            });
    }

然后将给定的方法调用到tabilize();的任何位置

【讨论】：

亲爱的皮埃尔，你没有得到什么？