JQuery UI Sortable+DataTables显示所有行，而不刷新当前页面

Question

我有一个jquery ui可排序数据表，我试图在可排序开始时显示所有行。我使用dataTable.page.len(-1).draw(false)和$(this).sortable('refresh')来显示所有行，以允许对新显示的行进行排序。

这运行得很好，但是刷新行会导致占位符被删除，但不知何故不会删除辅助对象。

如何在不刷新当前行的情况下将所有隐藏行添加到当前页面？

我不确定我的想法是否正确，但我只需要占位符就可以了。

复制有点困难，在排序开始时几乎不需要移动鼠标(占位符将在sort回调启动后出现(，但我还将添加一个带有一条记录的表，这样您就可以看到占位符不存在。

示例：

$('table').each(function() {
var table = $(this);
var dataTable = $(this).DataTable({
"aaSorting": [[ 1, "asc" ]],
stateSave: true,
"lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]
});
var thead = table.find('thead');
var tbody = table.find('tbody');
var dataTable = table.DataTable();
var page_length = null;
tbody.sortable({
items: 'tr',
axis: 'y',
handle: '.handle',
placeholder: 'ui-sortable-placeholder',
start: function(event, ui) {
ui.item.addClass('ui-sortable-item');
ui.placeholder.height($(ui.item).height());
ui.placeholder.width($(ui.item).width());
// show all rows
dataTable.page.len(-1).draw(false);
// refresh so that newly shown rows are counted as sortable items
$(this).sortable('refresh');
// sort table by sequence
dataTable.order([1, 'asc']).draw(false);
},
sort: function(event, ui) {
},
});
});

.ui-sortable-placeholder {
background: #eee !important;
border: 1px solid #ddd !important;
}
.handle {
height: 30px;
width: 30px;
background: #ccc;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
<table>
<thead>
<tr>
<th>handle</th>
<th>Sequence</th>
</tr>
</thead>
<tbody>
<tr>
<td><div class="handle"></div></td>
<td>1</td>
</tr>
<tr>
<td><div class="handle"></div></td>
<td>2</td>
</tr>
<tr>
<td>Something</td>
<td>3</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>handle</th>
<th>Sequence</th>
</tr>
</thead>
<tbody>
<tr>
<td><div class="handle"></div></td>
<td>1</td>
</tr>
</tbody>
</table>

以下是我尝试过的：

我尝试克隆占位符，并在开始回调结束时(刷新后(附加克隆，但sortable无法将克隆识别为实际的占位符。

我尝试在.on('sortstart')内部运行数据表函数，如dataTable.page.len(-1).draw(false)，因为它在实际回调之前运行。我不太明白为什么会发生这种情况，所以如果有人能解释一下，我会很感激的

Answer 1

考虑在DataTables:中使用行重排功能

https://jsfiddle.net/Twisty/pmyw6do2/

JavaScript

$('table').each(function() {
var table = $(this);
var dataTable = $(this).DataTable({
"aaSorting": [
[1, "asc"]
],
stateSave: true,
"lengthMenu": [
[10, 25, 50, 100, -1],
[10, 25, 50, 100, "All"]
],
rowReorder: true
});
var thead = table.find('thead');
var tbody = table.find('tbody');
var dataTable = table.DataTable();
var page_length = null;
});

CSS

.ui-sortable-placeholder, .dt-rowReorder-moving {
background: #eee !important;
border: 1px solid #ddd !important;
}
.handle {
height: 30px;
width: 30px;
background: #ccc;
}

HTML

<table>
<thead>
<tr>
<th>handle</th>
<th>Sequence</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="handle"></div>
</td>
<td>1</td>
</tr>
<tr>
<td>
<div class="handle"></div>
</td>
<td>2</td>
</tr>
<tr>
<td>Something</td>
<td>3</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>handle</th>
<th>Sequence</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="handle"></div>
</td>
<td>1</td>
</tr>
</tbody>
</table>

查看更多：https://datatables.net/extensions/rowreorder/