Здравствуйте!
Есть скрипт библиотеки http://cdn.datatables.net/plug-ins/, который добавляет фильтры и сортировщики для таблицы:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
$(document).ready(function () {
$('#friendTable').DataTable({
retrieve: true,
paging: false,
//ajax: '/ajax/arrays.txt',
language: {
url: "http://cdn.datatables.net/plug-ins/1.10.20/i18n/Russian.json"
},
initComplete: function () {
this.api().columns([6,8,13,14,19,21]).every(function () {
var column = this;
var select = $('<select><option value="">Все</option></select>')
.appendTo($($(column.header()))) //$(column.footer().empty())
.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
$(select).click(function (e) {
e.stopPropagation();
});
column.data().unique().sort().each(function (d, j) {
if (column.search() === '^' + d + '$') {
select.append('<option value="' + d + '" selected="selected">' + d.substr(0, 30) + '</option>')
} else {
select.append('<option value="' + d + '">' + d.substr(0, 30) + '</option>')
}
});
});
}
});
});
В процессе, тело таблицы (tbody), к которой применяется скрипт обновляется, и после обновления tbody фильтры, которые добавляются вышеописанной функцией и библиотекой не обновляются, и сортировщики строк перестают работать.
Функция обновления tbody:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
$(function () {
$("#SelectElectoralDistrictId").change(function () {
var formData = { 'IdElectoralDistrict': Number.parseInt($('#SelectElectoralDistrictId').val()), 'Name': $('#SelectElectoralDistrictId>option:selected').text() };
$('#' + 'friendTable' + ' tbody > tr').remove();
$.ajax({
type: 'POST',
// url: '@Url.Action("GetPolingStationsByElectoralDistrict")',
url: 'Admin/SearchFriendsByElectoralDistrict/',
headers:
{
'Content-Type': 'application/json',
'RequestVerificationToken': $('#RequestVerificationToken').val()
},
data: JSON.stringify(formData),
success: function (data) {
$('#TbodyFriendTable').replaceWith(data);
updatingFields('friendTable', 'numberRecords');
// Генерация события для элемента FriendTable
let elemFriendTable = document.querySelector('#friendTable')
const eventChange = new Event("change");
elemFriendTable.dispatchEvent(eventChange);
},
error: function (result, status, er) {
alert('error: ' + result + ' status: ' + status + ' er:' + er);
}
});
});
});
Сгенерировал в методе обновления tbody событие изменения для данной таблицы, но это не помогло - на изменение tbody не реагирует:
1.
2.
3.
4.
/ Генерация события для элемента FriendTable
let elemFriendTable = document.querySelector('#friendTable')
const eventChange = new Event("change");
elemFriendTable.dispatchEvent(eventChange);
Пробовал создать обработчик только только на тело tbody таблицы, но это тоже не сработало:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
$('#friendTable tr td').on('DOMSubtreeModified', function () {
$('#friendTable').DataTable({
retrieve: true,
paging: false,
language: {
url: "http://cdn.datatables.net/plug-ins/1.10.20/i18n/Russian.json"
},
initComplete: function () {
this.api().columns([6, 8, 13, 14, 19, 21]).every(function () {
var column = this;
var select = $('<select><option value="">Все</option></select>')
.appendTo($($(column.header()))) //$(column.footer().empty())
.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
$(select).click(function (e) {
e.stopPropagation();
});
column.data().unique().sort().each(function (d, j) {
if (column.search() === '^' + d + '$') {
select.append('<option value="' + d + '" selected="selected">' + d.substr(0, 30) + '</option>')
} else {
select.append('<option value="' + d + '">' + d.substr(0, 30) + '</option>')
}
});
});
}
});
});
Тогда срабатывает при загрузки страницы, а при изменении тела таблицы нет.
Подскажите, что нужно ещё сделать, чтобы используемая библиотека применилась уже к обновленному tbody таблицы?
