Как заполнить данные из формата json в таблицу данных и сохранить свойства данных
Мне удалось получить данные в таблицу данных из формата json через ajax, но внезапно таблица данных потеряла некоторые свойства, которые позволяют ей выполнять поиск и разбивать на страницы. Но результаты можно просмотреть как массив через console.info, и все данные в результате поступают в длинную таблицу. Но в функции document.ready таблица до того, как я изменю элемент управления, выглядит хорошо со всеми функциями.
1- Я попытался заполнить его через js, объявив и включив свойства следующим образом:
$('#assets').DataTable({
paging: true,
scrollX: true,
lengthChange : true,
searching: true,
ordering: true
});
и показано от 0 до 0 из 0 записей (отфильтровано из 1 записей)
2- Альтернативно
.done( function(data) {
$('#example').dataTable( {
"aaData": data,
"columns": [
{ "data": "id" },
{ "data": "name" },
{ "data": "detail_alias" },
{ "data": "points" }
]
})
})
Я пробовал разные методы из разных источников и красных ресурсов с данными, но не сработало. Я долго гуглил, но не получил ответа
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я использовал URL-адрес фиктивного онлайн-продукта для получения данных. Обновите свой код соответствующим образом.
Вам необходимо соответствующим образом настроить таблицу данных:
$(document).ready(function() {
var table = $('#assets').DataTable({
paging: true,
scrollX: true,
lengthChange: true,
searching: true,
ordering: true,
columns: [
{ data: 'id' },
{ data: 'name' },
{ data: 'detail_alias' },
{ data: 'points' }
]
});
Более того, если ваши данные возвращаются из серверного API в соответствии с форматом таблицы данных, смело удаляйте код форматирования:
var formattedData = data.products.map(function(product) {
return {
id: product.id,
name: product.title,
detail_alias: product.title,
points: product.price
};
});
Для получения дополнительной информации обратитесь к коду ниже:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>DataTable with JSON Data</title>
<script src = "https://code.jquery.com/jquery-3.5.1.js"></script>
<script type = "text/javascript" charset = "utf8" src = "https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>
</head>
<body>
<table id = "assets" class = "display">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Detail Alias</th>
<th>Points</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
$(document).ready(function() {
var table = $('#assets').DataTable({
paging: true,
scrollX: true,
lengthChange: true,
searching: true,
ordering: true,
columns: [
{ data: 'id' },
{ data: 'name' },
{ data: 'detail_alias' },
{ data: 'points' }
]
});
$.ajax({
url: 'https://dummyjson.com/products', // Replace with original url
method: 'GET',
dataType: 'json',
success: function(data) {
var formattedData = data.products.map(function(product) { // Not needed if data receive from backend is in format accordingly
return {
id: product.id,
name: product.title,
detail_alias: product.title,
points: product.price
};
});
table.clear();
table.rows.add(formattedData);
table.draw();
},
error: function(xhr, status, error) {
console.error('AJAX Error:', {
status: status,
error: error,
responseText: xhr.responseText
});
alert('An error occurred while loading data. Please check the console for details.');
}
});
});
</script>
</body>
</html>если ответ хотя бы частично решает цель, я прошу вас отметить его как правильный ответ и проголосовать за любовь к сообществу. Тогда мы сможем сделать все остальное.. @Shyakalee
Здравствуйте, сэр, мой запрос не решен, как показано, я все еще не разобрался, результаты хорошо отображаются в формате json через console.info, но невозможно визуально заполнить их в таблице, пожалуйста, помогите @Selaka Nanayakkara
Я использовал часть вашего кода, кажется, он уже в пути, но теперь таблица заполнена исправленными 6 записями, но я не вижу их четко видимыми в таблице, похоже, мне нужно поместить каждый элемент в соответствующий столбец, чтобы показано, вот блок успеха @selaka-nanayakkara, пожалуйста, помогите решить его