Сортировка в таблице данных не работает при динамической загрузке данных ⇐ Jquery

[Anonymous]

Я использую datatable, и мне нужно загружать его динамически при каждом запросе/обновлении. Этот код работает нормально во всех аспектах, но функция сортировки работает неправильно. Я пробовал использовать ChatGPT, ClaudeAI и т. д., но ни один из них не сработал, все они предлагались на основе DataTable, а не datatable.
function UpdateTableContent(month, year) {
$.ajax({
url: "/the-url",
type: 'POST',
data: {
"month": month,
"year": year,
},
error: function(response) {
alert("Something went wrong. Please try again!");
},
success: function(response) {
if (response['status'] == '0') {
const tbody = document.querySelector("#content_table tbody");
tbody.innerHTML = "";
response['keywords_list'].forEach(dict => {
const row = document.createElement("tr");
row.innerHTML = `

${dict.table_data}

`;
tbody.appendChild(row);
});

var x = $('#content_table').datatable()
$('#content_table').datatable({
pageSize: 10,
sort: [true, true,true,true,true,true,true,true,true,true],
filters: [true, 'select','select','select','select','select','select','select','select','select'],
pagingDivSelector: "#paging-datatable"
});

if(x){

$('#content_table').datatable('destroy')

const tbody = document.querySelector("#content_table tbody");

tbody.innerHTML = "";

response['keywords_list'].forEach(dict => {
const row = document.createElement("tr");
row.innerHTML = `
${dict.table_data}

`;
tbody.appendChild(row);
});

$('#content_table').datatable({
pageSize: 10,
sort: [true, true,true,true,true,true,true,true,true,true],
filters: [true, 'select','select','select','select','select','select','select','select','select'],
pagingDivSelector: "#paging-datatable"
});

$('#content_table').on('click','.approverequest',function(){

var get_id = $(this).attr('data-id')
var get_type = $(this).attr('data-type')
$("#delete_id").val(get_id)
$("#delete_type").val(get_type)
$('#myModaldeactivate').modal('show');

})

$('#content_table').on('click','.revokeapproval',function(){

var get_id = $(this).attr('data-id')
var get_type = $(this).attr('data-type')
$("#delete_id").val(get_id)
$("#delete_type").val(get_type)
$('#myModalRevokeApproval').modal('show');

})

$('#content_table').on('click','.denyrequest',function(){
var get_id = $(this).attr('data-id')
var get_type = $(this).attr('data-type')
$("#delete_id").val(get_id)
$("#delete_type").val(get_type)
$('#myModalDenyRequest').modal('show');

})

$('#content_table').on('click','.reinstateapproval',function(){
var get_id = $(this).attr('data-id')
var get_type = $(this).attr('data-type')
$("#delete_id").val(get_id)
$("#delete_type").val(get_type)
$('#myModalReinstate').modal('show');

})

}else{
$('#content_table').datatable({
pageSize: 10,
sort: [true, true,true,true,true,true,true,true,true,true],
filters: [true, 'select','select','select','select','select','select','select','select','select'],
pagingDivSelector: "#paging-datatable"
});
}
} else {
alert(response['message']);
}
}
});
}

Все работает нормально, таблица загружается динамически, фильтры выбора работают. Но просто функция сортировки не работает. С серверной частью все в порядке.
Это HTML-код:





Data







{% include "loader.html" %}








Я пробовал использовать ChatGPT и другие инструменты искусственного интеллекта, я также пробовал загрузить его в DOM, а затем манипулировать им. Но тогда он не меняет данные динамически всякий раз, когда выбран другой месяц и год.
Это код, который дал какой-то инструмент искусственного интеллекта, и, похоже, он работает нормально при первой загрузке, но это не так. изменять данные при каждом успешном событии
function UpdateTableContent(month, year) {
$.ajax({
url: "/the-url",
type: 'POST',
data: {
"month": month,
"year": year,
},
error: function(response) {
alert("Something went wrong. Please try again!");
},
success: function(response) {
if (response['status'] == '0') {
const tbody = document.querySelector("#content_table tbody");
tbody.innerHTML = "";

// Populate table rows
response['keywords_list'].forEach(dict => {
const row = document.createElement("tr");
row.innerHTML = `
${dict.data}
`;
tbody.appendChild(row);
});

// Check if datatable already exists, and if it does, clear the table
if ($('#content_table').data('datatable')) {
$('#content_table').data('datatable').refresh(); // Correct method for refreshing data
} else {
// Initialize datatable for the first time
$('#content_table').datatable({
pageSize: 10,
sort: [true, true, true, true, true, true, true, true, true, true],
filters: [true, 'select', 'select', 'select', 'select', 'select', 'select', 'select', 'select', 'select'],
pagingDivSelector: "#paging-datatable"
});
}

// Reinitialize click events
$('#content_table').off('click').on('click', '.approverequest', function() {
var get_id = $(this).attr('data-id');
var get_type = $(this).attr('data-type');
$("#delete_id").val(get_id);
$("#delete_type").val(get_type);
$('#myModaldeactivate').modal('show');
});

$('#content_table').on('click', '.revokeapproval', function() {
var get_id = $(this).attr('data-id');
var get_type = $(this).attr('data-type');
$("#delete_id").val(get_id);
$("#delete_type").val(get_type);
$('#myModalRevokeApproval').modal('show');
});

$('#content_table').on('click', '.denyrequest', function() {
var get_id = $(this).attr('data-id');
var get_type = $(this).attr('data-type');
$("#delete_id").val(get_id);
$("#delete_type").val(get_type);
$('#myModalDenyRequest').modal('show');
});

$('#content_table').on('click', '.reinstateapproval', function() {
var get_id = $(this).attr('data-id');
var get_type = $(this).attr('data-type');
$("#delete_id").val(get_id);
$("#delete_type").val(get_type);
$('#myModalReinstate').modal('show');
});

} else {
alert(response['message']);
}
}
});
}

Это еще одно изменение, которое я внес, и теперь я вижу в console.log, что тело изменяется динамически вместе с DOM. Но функция сортировки не работает после начальной загрузки. При первой загрузке функция сортировки работает нормально, но впоследствии, когда я делаю вызовы ajax, DOM обновляется, но функция сортировки снова не работает.
function makeTable(response, tbody){
console.log('tabe=le is ', tbody)
response['keywords_list'].forEach(dict => {
const row = document.createElement("tr");
row.innerHTML = `
${dict.data}
`;
tbody.appendChild(row);
});

$('#content_table').datatable({
pageSize: 10,
sort: [true, true, true, true, true, true, true, true, true, true],
filters: [true, 'select', 'select', 'select', 'select', 'select', 'select', 'select', 'select', 'select'],
pagingDivSelector: "#paging-datatable"
});

$('#content_table').addClass('datatable-initialized');

attachEventHandlers();
}

function UpdateTableContent(month, year) {
$.ajax({
url: "/the-url",
type: 'POST',
data: {
"month": month,
"year": year,
},
error: function(response) {
alert("Something went wrong. Please try again!");
},
success: function(response) {
if (response['status'] == '0') {
const tbody = document.querySelector("#content_table tbody");
if (!tbody) {
console.error("Tbody not found in the DOM");
return;
}

if ($('#content_table').hasClass('datatable-initialized')) {

$('#content_table').datatable('destroy');
const tbody2 = document.querySelector("#content_table tbody");
tbody2.innerHTML = "";
makeTable(response, tbody2);

}

tbody.innerHTML = "";

makeTable(response, tbody);

} else {
alert(response['message']);
}
}
});
}


Подробнее здесь: https://stackoverflow.com/questions/790 ... ynamically