DataTable после удаления строки на следующей предыдущей странице снова отображается

У меня странная проблема с DataTables. Я использую этот материал для удаления строки, и все работает (строка удаляется из БД, предупреждения отображаются правильно), и она удаляет строку с дисплея, НО когда я нажимаю на предыдущую страницу и возвращаюсь на страницу, где строка отображалась изначально (по странице Я имею в виду номер страницы DataTable или увеличиваю количество строк на странице) - он снова отображается... (поскольку на самом деле он не был удален)

Только после hard-refresh он удаляется. Почему это происходит и как действительно удалить его, не обновляя браузер?

Вот код, который я использую для удаления строки:

function DeletePublisher(element, publisherid) {
jConfirm('Are you sure you want to delete this publisher?', 'Delete publisher', function (r) {
    if (r) $.post('includes/publishers/delete-publisher.php?publisherid=' + publisherid,

    function (data) {
        if ($.trim(data) == 'error') {
            $.jGrowl('This publisher was already deleted', {
                header: '<strong style="text-align:center;">ERROR</strong>'
            });
            $(element)
                .parents('tr')
                .remove();
        } else {
            $(element)
                .parents('tr')
                .remove();
            oTable.fnDeleteRow(element);
            $('tr')
                .removeClass();
            // Now add class names again
            $('tr:odd')
                .addClass('odd');
            $('tr:even')
                .addClass('even');

            $.jGrowl('Publisher deleted');
        }
    });
});

А это элемент TR:

<td class="action-th">
                    <ul class="button-table-head">
                            <li><div class="button-head edit-icon"><a href="/includes/publishers/edit-publisher.php?editpublisher=<?php echo $publisher_id; ?>" data-fancybox-type="iframe" class="iframe sweet-tooltip" data-text-tooltip="Edit" data-style-tooltip="tooltip-mini-slick"><span>Edit</span></a></div></li>
                        <li><div class="button-head delete-icon"><a href="#" class="sweet-tooltip" data-text-tooltip="Delete" data-style-tooltip="tooltip-mini-slick" onclick="DeletePublisher(this,'<?php echo $publisher_id; ?>')"><span>Delete</span></a></div></li>
                    </ul>
                </td>

Итак, не уверены, что элемент передает правильный идентификатор строки в первую очередь?


jquery jquery-datatables
person Peter    schedule 26.09.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вместо удаления элемента из DOM с помощью $(element).parents('tr').remove(); вы можете попробовать fnDeleteRow также удалить строку из Datatable. Вы можете передать параметр методу, который сообщит Datatables перерисовать таблицу, что не заставит вас выполнять обратную публикацию для обновления данных.

Вот ссылка на fnDeleteRow в API Datatables.

ОБНОВЛЕНИЕ:

Попробуйте что-то вроде этого:

function DeletePublisher(element, publisherid) {
jConfirm('Are you sure you want to delete this publisher?', 'Delete publisher', function (r) {
    if (r) $.post('includes/publishers/delete-publisher.php?publisherid=' + publisherid,

    function (data) {
        var nTr = $(element).closest('tr');

        oTable.fnDeleteRow(nTr, null, true);

        if ($.trim(data) == 'error') {
            $.jGrowl('This publisher was already deleted', {
                header: '<strong style="text-align:center;">ERROR</strong>'
            });
        } else {
            $.jGrowl('Publisher deleted');
        }            
    });
});
person Jason Towne    schedule 26.09.2012
comment
В яблочко. DataTables поддерживает собственную копию данных базовой таблицы, поэтому простого удаления видимых элементов из DOM недостаточно. - person Todd Gibson; 26.09.2012
comment
Что ж, я пробовал: oTable.fnDeleteRow(element); но не получилось? - person Peter; 27.09.2012
comment
@Питер Что такое element? Согласно документам, это должен быть либо индекс строки, которую вы хотите удалить, либо элемент <tr> строки, которую нужно удалить. Вам также может понадобиться перерисовать таблицу после удаления строки. Если вы не перерисуете таблицу вручную, я не думаю, что строка будет отображаться как удаленная. - person Jason Towne; 27.09.2012
comment
Извините, я не очень хорошо разбираюсь в JS, поэтому я обновлю свой код выше, чтобы увидеть и сообщить, является ли элемент правильной переменной вообще. - person Peter; 27.09.2012
comment
@Peter Посмотрите мой обновленный ответ и дайте мне знать, имеет ли это смысл. - person Jason Towne; 27.09.2012
comment
Нет, это вообще не удаляет строку :( ...на самом деле удаляет, но после обновления - person Peter; 27.09.2012
comment
@Peter Вы можете попробовать добавить oTable.fnDraw() после oTable.fnDelete(), но на самом деле это то, что должен делать параметр true. Также обратите внимание, что я удалил фрагмент кода, где вы также вызывали .remove() на tr. - person Jason Towne; 27.09.2012
comment
Это странно. Я пробовал все, и это просто не сработает для меня. :( Я тоже пробовал это: $(element).parents('tr').remove(); var nTr = $(element).closest('tr'); oTable.fnDeleteRow(nTr, null, true ); oTable.fnDestroy(); oTable.fnDraw(); $.jGrowl('Издатель удален'); но это также не сработает, плюс не отображается сообщение... я делаю что-то очень неправильно? - person Peter; 27.09.2012
comment
Избавьтесь от этой строки: $(element).parents('tr').remove();. Вам это не нужно, и это может вызвать проблемы с переменной nTr. Когда Datatables перерисовывается, строки таблицы обновляются и удаляются автоматически. - person Jason Towne; 27.09.2012
comment
Я пробовал это: var nTr = $(element).closest('tr'); oTable.fnDeleteRow(nTr, null, true); $.jGrowl('Издатель удален'); oТаблица.fnDraw(); и когда всплывающее окно jGrowl находится ниже строки fnDelete - оно не отображается, если выше - оно отображается - в обоих случаях издатель действительно удаляется из БД, но ROW не удаляется в DataTable :( - person Peter; 28.09.2012