数据表行重新排序完成，未获取更新的行ID [英] datatable row reorder completion, not getting updated row id
问题描述
我正在研究数据表.我使用了重新排序功能，它可以正常工作，但是我没有得到更新的重新排序行ID，它总是获取旧的行ID.在这里，我已经输入了代码.任何人都可以检查我的代码并帮助我解决此问题吗?
I am working on datatable. I have used reorder functionality, it works, but I am not getting its updated reorder row id, it always fetching old row id. Here I have put my code for it. Can anyone please check my code and help me to resolve this issue?
table_all_projects.on('row-reorder.dt', function(dragEvent, data, nodes) {
//console.log("all nodes");
var n = 0;
table_all_projects.rows({
order: 'current'
}).every(function(rowIdx, tableLoop, rowLoop) {
console.log(this.data().id);
console.log(rowIdx);
$("#loading").show();
var row_id = this.data().id;
//var rowData = table_all_projects.row(data[i].node).data();
$.ajax({
type: "POST",
url: ajax_object.ajax_url,
data: {
"id": row_id,
"action": "WCP_Projects_Controller::update_order_subportal",
"order_id": rowIdx
},
dataType: "json",
async: false,
success: function() {
if (table_all_projects.rows().count() == order_id) {
$("#loading").hide();
}
}
});
n++;
})
});
推荐答案
您可以使用以下两个事件的组合来跟踪要移动的特定行: row-reordered .
You can use a combination of the following two events to track which specific row was moved: pre-row-reorder and row-reordered.
pre-row-reorder事件告诉您要拖动哪个特定行.
The pre-row-reorder event tells you which specific row is being dragged.
row-reordered事件提供了所有更改的列表(对于每个更改，它提供了前索引和后索引).
The row-reordered event provides a list of all changes (for each change it gives the before index and the after index).
请注意，所有索引值均从零开始(行1为索引0).
Note that all index values are zero-based (row 1 is index 0).
这是一个独立的演示:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
<!-- row reorder -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowreorder/1.2.7/css/rowReorder.dataTables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/rowreorder/1.2.7/js/dataTables.rowReorder.min.js"></script>
</head>
<body>
<div style="margin: 20px;">
<table id="example" class="display dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>Tokyo</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</div>
<script type="text/javascript">
$(document).ready(function() {
var table = $('#example').DataTable( {
ordering: false,
rowReorder: true
} );
var originalIndex;
table.on( 'pre-row-reorder', function ( e, node, index ) {
originalIndex = node.index;
//console.log( "old index: " + originalIndex );
} );
table.on( 'row-reordered', function ( e, diff, edit ) {
for ( var i = 0; i < diff.length ; i++ ) {
if (diff[i].oldPosition === originalIndex) {
//console.log( "new index: " + diff[i].newPosition );
console.log( "row moved from index " + originalIndex +
" to index " + diff[i].newPosition );
}
}
} );
} );
</script>
</body>
</html>
典型的拖放事件的控制台输出为:
The console output for a typical drag and drop event will be:
row moved from index 4 to index 1
这篇关于数据表行重新排序完成，未获取更新的行ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
