[英]jQuery DataTable sorting doesn't updates after table data updated
I can't resolve a problem with jQuery DataTable (from https://datatables.net/ ) sorting function.我无法解决 jQuery DataTable (来自https://datatables.net/ )排序 function 的问题。 I create a simple example
HERE
.我在
HERE
创建了一个简单的示例。
Issue description: I have a client side sortable table with some data.问题描述:我有一个带有一些数据的客户端可排序表。 By clicking Edit button in a row, I create some ajax request and update data on server, then I recieve updated data from server and rebuild table with new data.
通过连续单击编辑按钮,我创建了一些 ajax 请求并更新服务器上的数据,然后我从服务器接收更新的数据并使用新数据重建表。 But if I'll try to sort new data in a table, sorting function of a table will use old data, before updating it.
但是,如果我尝试对表中的新数据进行排序,则在更新之前对表的 function 进行排序将使用旧数据。 You can see this issue in example above.
您可以在上面的示例中看到此问题。 I replace my ajax request by simple replacing data in table.
我通过简单地替换表中的数据来替换我的 ajax 请求。
HTML: HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DataTables</title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
</head>
<body>
<table class="table table-bordered table-condensed table-striped" id="campaigns_table">
<thead>
<tr>
<th>Campaign</th>
<th>Subject</th>
<th>Subsubject</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
JS: JS:
function updateCampaignsTable(data, init = false) {
const tableProps = {
paging: false,
"bAutoWidth": false,
fixedHeader: false,
"serverSide": false,
"columns": [
{"data": 'name', "searchable": true, "bSortable": true },
{"data": 'subject_id', "searchable": true, "bSortable": true },
{"data": 'subsubject_id', "searchable": true, "bSortable": true },
{"data": 'actions', "searchable": false, "bSortable": false },
],
"initComplete": function(settings, json) {
console.log( 'DataTables has finished its initialisation.' );
const recordsCount = settings.fnRecordsDisplay();
},
};
let tableRows = ``;
data.forEach((item) => {
tableRows += `<tr>
<td>${item.name}</td>
<td>${item.subject_id}</td>
<td>${item.subsubject_id}</td>
<td>${item.actions}</td>
</tr>`
}
);
var table = $(`#campaigns_table`);
$(table).children(`tbody`).empty().append(tableRows);
if (init) {
table.DataTable(tableProps);
}
}
const firstData = [
{
name: `campaign #1 Name`,
subject_id: `campaign #1 subjectID`,
subsubject_id: `campaign #1 subsubjectID`,
actions: `<button type="button" class="action-btn">Edit</button>`
},
{
name: `campaign #2 Name`,
subject_id: `campaign #2 subjectID`,
subsubject_id: `campaign #2 subsubjectID`,
actions: `<button type="button" class="action-btn">Edit</button>`
},
{
name: `campaign #3 Name`,
subject_id: `campaign #3 subjectID`,
subsubject_id: `campaign #3 subsubjectID`,
actions: `<button type="button" class="action-btn">Edit</button>`
},
{
name: `campaign #4 Name`,
subject_id: `campaign #4 subjectID`,
subsubject_id: `campaign #4 subsubjectID`,
actions: `<button type="button" class="action-btn">Edit</button>`
},
{
name: `campaign #5 Name`,
subject_id: ``,
subsubject_id: ``,
actions: `<button type="button" class="action-btn">Edit</button>`
}
]
const secondData = [
{
name: `campaign #1 Name`,
subject_id: `11111111111111111`,
subsubject_id: `11111111111111111`,
actions: `<button type="button" class="action-btn">Edit</button>`
},
{
name: `campaign #2 Name`,
subject_id: `222222222222222`,
subsubject_id: `22222222222222`,
actions: `<button type="button" class="action-btn">Edit</button>`
},
{
name: `campaign #3 Name`,
subject_id: `33333333333333333`,
subsubject_id: `333333333333333333`,
actions: `<button type="button" class="action-btn">Edit</button>`
},
{
name: `campaign #4 Name`,
subject_id: `444444444444444444`,
subsubject_id: `4444444444444`,
actions: `<button type="button" class="action-btn">Edit</button>`
},
{
name: `campaign #5 Name`,
subject_id: `555555555555`,
subsubject_id: `55555555555555`,
actions: `<button type="button" class="action-btn">Edit</button>`
}
]
$(document).ready(function(){
updateCampaignsTable(firstData, `init`);
$(`.action-btn`).on(`click`, () => {
updateCampaignsTable(secondData);
});
});
I resolve this problem by myself.我自己解决了这个问题。 I should to replace html code that I transfer to the table by array of objects in data attribute of the table props.
我应该替换我通过表格道具的数据属性中的对象数组传输到表格的 html 代码。 And after clicking button call a destroy() method of DataTables and reinitialize table.
单击按钮后,调用 DataTables 的 destroy() 方法并重新初始化表。 Also you can add
"bDestroy": true
to the table props.您也可以将
"bDestroy": true
添加到表格道具中。 I update my example on codepen.我在 codepen 上更新了我的示例。 Issue fixed.
问题已修复。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.