Блог

Я разрабатываю персональный плагин 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" amp;amp; 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>
  

Спасибо тем, кто читает эти строки..

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