Cześć.
Próbuje bawić się z wygenerowaniem tabeli z bazy MySQL za pomocą JQUERY i wyborem opcjonalnych kolumn przesłanych w shortcode.
Stworzyłem sobie wtyczkę i w funkcji , w której jest generowana tabela poprzez poprzez wp_localize_script przesyłam argumenty do mojego pliku .js. W pliku .js jest zapytania JQuery z dodaniem do tabeli rekordów, które dostane JSONEM z innej funkcji.
Problem jest w tym, że dane teoretycznie przychodzą mi poprawne ponieważ wyświetlam je poprzez console.log('Dane:', response.data); i tam widzę, że dane są poprawne. Konsola w przeglądarce nie pokazuje żadnych błędów. Tabela na stronie wypełnia się poprawnie (tak mi się wydaje - dane są te co chce uzyskać) ale na tabeli widnieje napis "Processing...". Do wyświetlania i formatowania tabeli używam DataTable.
Nie wiem jak znaleźć błąd i gdzie go szukać. Z internetu wyczytałem, że to możę być problem zakończeniem przetwarzania odbioru danych.. Jednak w konsoli i w tabelce na stronie wyświetlają się poprawnie.
Poniżej przesyłam kod mojego pliku .js
jQuery(document).ready(function($) {
$("#my-dynamic-table").DataTable({
"processing": true,
"serverSide": false,
"ajax": {
"url": my_plugin_ajax.ajax_url, // Ajax URL WordPressa
"type": "POST",
"dataType": "json", // Określenie, że dane zwracane z serwera będą w formacie JSON
"data": function(d) {
d.action = 'get_new_data';
d.imie = my_plugin_ajax.imie; //$('#my-dynamic-table').data('id');
d.nazwisko = my_plugin_ajax.nazwisko; //$('#my-dynamic-table').data('name');
//d.city = $('#my-dynamic-table').data('city');
},
"error": function(xhr, status, error) {
console.error('AJAX Error:', status, error);
$('#table-body').html('<p>Error loading data. Status: ' + status + ', Error: ' + error + '</p>');
},
"success": function(response) {
// Funkcja success - działa, gdy dane zostały załadowane
if (response.success) {
console.log('Dane:', response.data);
console.log('Czy Tablica:',Array.isArray(response.data));
//////////////////////////
var tableBody = $('#table-body'); // Ciało tabeli
tableBody.empty(); // Wyczyść poprzednie dane
// Wyświetlamy dane w tabeli
response.data.forEach(function(item) {
//$('#table-body').empty(); // Czyszczenie poprzednich danych
// Dodaj nowe dane do tabeli - stale parametry
var row = $('<tr></tr>');
row.append('<td>' + item.id + '</td>');
// Dodanie dynamicznych kolumn
if (item.imie) {
row.append('<td>' + item.imie + '</td>');
}
if (item.nazwisko) {
row.append('<td>' + item.nazwisko + '</td>');
}
row.append('<td>' + item.czas + '</td>');
row.append('</tr>');
tableBody.append(row);
});
//////////////////////////
} else {
alert("Brak danych do wyświetlenia.");
}
}
},
"paging": true,
"ordering": true,
"info": true,
});
// Automatyczne odświeżanie tabeli co 5 sekund
setInterval(function() {
$('#my-dynamic-table').DataTable().ajax.reload();
}, 5000); // Odśwież co 5 sekund
});
