HTML для JS Datatable: по-прежнему показывать удаленную строку после сортировки или изменения размера страницы?

Question

У меня есть html-таблица с id:#mytable на моей веб-странице asp.net-4.5, которая создается на сайте c # и отправляется в aspx. В этой HTML-таблице в конце каждой строки есть кнопка DELETE, как показано ниже:

...
html.Append("<td><input type=\"button\" runat=\"server\" value=\"Delete\" onclick=\"deleteRow(this)\" /></td>");

Когда эта кнопка нажата, функция deleteRow (this) запускается с кодом ниже:

btn.parentNode.parentNode.parentNode.removeChild(row);

Когда эта строка запускается, соответствующая строка немедленно удаляется, и я больше не вижу строку на экране.

Эта HTML-таблица представлена ​​в виде таблицы данных (javascript), как показано ниже:

$('#myTable').on('error.dt', function (e, settings, techNote, message) {
                            console.log('An error has been reported by DataTables: ', message);
                        }).DataTable({ fixedColumns: true,
                        "columnDefs": [{
                            "width": '60%',
                            "defaultContent": "-",
                            "targets": "_all"
                        }]
                    });;

Это тоже хорошо работает, моя HTML-таблица превращается в таблицу данных. Моя проблема - , после того как я удаляю строку из таблицы, если я изменяю сортировку или ограничение на количество записей на странице (по умолчанию 10) и т. Д., Я начинаю видеть только что удаленную строку на страница, внутри таблицы. Кажется, моя функция deleteRow удаляет строку не навсегда. Как я могу исправить эту проблему? Будем очень благодарны за любую помощь.

РЕДАКТИРОВАТЬ: мне нужно было обновить страницу после нажатия кнопки удаления с помощью JS: document.location.reload(true) и page_load перечитывает данные, чтобы исправить проблему. Спасибо @NTR и @J E Картер II

EDIT2: Использование $('#myTable').DataTable().rows(row).remove().draw(false); при удалении строки исправило проблему без необходимости повторного чтения данных из БД. Проверь мой ответ.

Answer 1

Вам придется повторно инициализировать таблицу данных с помощью нового вызова ajax или мутированного объекта.Ваш код удаления использует только отображаемую строку, а не данные, которые ее приводят, поэтому при вызове перерисовки с сортировкой он корректно отображает состояние модели независимо от того, какие мутации произошли в DOM.

Я знаю, вы говорите, что не хотите перечитывать данные, но это правильно.Удаленные данные - это источник правды для ваших данных.

Answer 2

Как заявили @NTR и @J E Carter II, повторное чтение данных решает проблему отлично. Однако моя главная цель здесь - не перечитывать данные из БД, я искал решение, обеспечивающее это, и нашел что-то. Все, что я сделал, это изменил строку btn.parentNode.parentNode.parentNode.removeChild(row); на $('#myTable').DataTable().rows(row).remove().draw(false);, и она отлично работает, после обновления таблицы удаленные данные не видны на экране. Вот полная функция AJAX:

var row = btn.parentNode.parentNode;
$.ajax({
           type: 'POST',
           url: 'DataManagementPage.aspx/DeleteRowFromMyDatabase',
           data: JSON.stringify({ id: id, grId:grID, city: city }),
           contentType: 'application/json; charset=utf-8',
           dataType: 'json',
           success: function (msg) 
           {
              $('#myTable').DataTable().rows(row).remove().draw(false);   
           }
});

Тема @NTR также предлагает решение на стороне сервера: Удаление определенных строк из DataTable

РЕДАКТИРОВАТЬ: Обратите внимание, что DeleteRowFromMyDatabase возвращает true после удаления в БД.

Answer 3

Javascript - это технология на стороне клиента, которая не имеет возможности взаимодействовать с базой данных. Ваша таблица генерируется из базы данных с вашим кодом на стороне сервера .NET. Чтобы выполнить то, что вы хотите, вам также необходимо удалить строку в вашей базе данных. Для связи с кодом на стороне сервера вы можете использовать AJAX: AJAX вводный . AJAX - большой предмет, возможно, вам придется провести дополнительное исследование.

Итак, в вашей функции deleteRow вам нужно будет удалить клиентскую строку, как вы делаете сейчас, а затем, используя ajax, удалить серверную строку.

Надеюсь, это поможет!