WP и DataTables - дублирование таблицы после обновления

Question

Я разрабатываю личный плагин для WordPress и использую принцип пользовательского типа поста.Для содержимого моего пользовательского типа записи я интегрировал плагин jQuery DataTables.

Это работает довольно хорошо, только когда я сохраняю содержимое своего поста (и перезагружаю страницу), у меня возникает проблема.Действительно, я теряю созданную мной переменную DataTable и больше не могу изменять свою таблицу ... Я получаю ошибку table is undefined, когда пытаюсь выбрать, например, строку.

Чтобы объяснить содержимое моего JSфайл, сначала я спрашиваю пользователя, сколько столбцов и строк будет таблица.Затем я создаю таблицу HTML (setNewTable) в соответствии с ее параметрами и связываю ее с таблицей данных.
Наконец, чтобы удовлетворить потребность в 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

Ок, я нашел трюк!Я должен был использовать функцию 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
    }); 
});