Question

我正在开发一个个人WordPress插件，并使用自定义帖子类型原则。对于我的自定义帖子类型的内容，我已经集成了jQuery DataTables插件。

它工作得很好，仅当我保存帖子内容（并重新加载页面）时，我才遇到问题。确实，我丢失了我创建的DataTable变量，并且无法再修改表。.例如，当我尝试选择一行时，出现了table is undefined错误。

要解释我的JS文件的内容，首先请用户询问表将具有多少列和行。然后，根据其参数创建HTML表（setNewTable），并将其与DataTable关联。
最后，为了满足WordPress的需求，当用户单击“发布”按钮时，我将表格插入到自定义帖子类型表格中。

这是我的JS文件：

jQuery(document).ready(function($) {
    var table;      

    //ask the user the titles of the columns with a form 
    $(document).on('click', '#inv-button-add-table',function(){ 
        var nb_cols = $('#inv-nb-cols').val();

        if (nb_cols){
            var formNbCols = '<p>Définissez le nom des colonnes:</p><form>';
            for(i=1; i<=nb_cols; i++){
                formNbCols += '<input type="text" class="name-rows" name="nb-col-'+i+'">';
            }
            formNbCols += '<input type="submit" id="submit-nb-cols" value="Valider" class="button button-secondary">';
            formNbCols += '</form>';
            $('#inv-define-cols').html(formNbCols);
        }
    });

    //generating the DataTable
    $(document).on('click', '#submit-nb-cols',function(e){  
        e.preventDefault();

        var nbCols = getNbCols();
        setNewTable(nbCols);
        var columnTitles = getColumnTitles(nbCols);
        var dataSet = getDataSet(nbCols);

        table = $('#inv-table-content').DataTable( {
            'paging': false,
            'columns': columnTitles,
            'data': dataSet
        }); 
    });


    //select rows
    $(document).on( 'click', '#inv-table-content tbody tr', function () {
        if ( $(this).hasClass('selected') ) {
            $(this).removeClass('selected');
        }
        else {
            table.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
        }
    } );    

});

function getNbCols(){
    var nameCols = jQuery('input.name-rows');
    return nameCols.length;
}
function getColumnTitles(nbCols){
    var nameCols = jQuery('input.name-rows');
    var columnTitles =[];
    for(i=0; i<nbCols; i++){
        columnTitles.push ({ 'title': nameCols[i].value});
    }
    return columnTitles;
}

function getDataSet(nbCols){
    var nb_rows = jQuery('#inv-nb-rows').val();
    if (!nb_rows) nb_rows = 1;
    var dataSet = [];
    for(i=0; i<nb_rows; i++){
        var row = [];
        for(j=0; j<nbCols; j++){
            row.push('vide');
        }
        dataSet.push(row)
    }
    return dataSet;
}

//generate HTML table
function setNewTable(nbCols){
    var newTable = '<table id="inv-table-content" class="display" style="width:100%">';
    newTable += '<thead><tr>';
    for(i=0; i<nbCols; i++){
        newTable += '<th>title</th>';
    }
    newTable += '</tr></thead>';
    newTable += '<tbody></tbody>';  
    newTable += '</table>';
    jQuery('#inv-div-content').html(newTable);  
}

我试图在加载页面时添加表变量的声明，问题是当我更新自定义帖子类型时，则重复了DataTable，我有多个表：<table id="inv-table-content" class="display dataTable no-footer" style="width: 100%;" role="grid"></table>。

jQuery(document).ready(function($) {
    var table;
    if(typeof(table) == "undefined" && table == null) {
        table = $('#inv-table-content').DataTable({
            'paging': false
        });
    }...

如有必要，这是表格的HTML部分：

$table = get_post_meta($post->ID, 'inv_content', true);

?>

    <div id="inv-toolbar" class="toolbar">
        <div id="inv-create-table-form">
            <label>Nombre lignes:</label>
            <input id="inv-nb-rows" type="text" size="1">
            <label>Nombre colonnes:</label>
            <input id="inv-nb-cols" type="text"  size="1">
            <input id="inv-button-add-table" class="button button-secondary" type="button" value="Ajout tableau">
        </div>
    </div>
    <div id="inv-define-cols"></div>
    <div id="inv-div-content" class="div_content inside">
<?php 

        echo $table;    

?>
    </div>
    <form id="inv-form-content" method="post">
        <input id="inv-input-content" type="hidden" name="inv_content" />
    </form>

感谢那些阅读这些内容的人。

Answer 1

OOkk我发现了一个把戏！我必须使用函数destroy()。不干净，但是如果您有其他很棒的想法，那么现在暂时绕开！

因此，在发布时，我销毁了DataTable：

$(document).on('click', '#publish',function(){
    table.destroy();
    $("#inv-input-content").val($("#inv-div-content").html());
} );

然后在页面加载时，我再次创建DataTable：

jQuery(document).ready(function($) {
    var table = $('#inv-table-content').DataTable({'paging': false});
    ...

当用户何时生成另一张表时，我需要销毁旧表并创建新表：

$(document).on('click', '#submit-nb-cols',function(e){  
    e.preventDefault();

    ...

    table.destroy();
    table = $('#inv-table-content').DataTable( {
        'paging': false,
        'columns': columnTitles,
        'data': dataSet
    }); 
});

WP和DataTables-更新后表的重复

1 个答案: