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

Question

我有一个 jquery ui sortable 数据table，我试图显示 sortable 开始的所有行。我通过使用 dataTable.page.len(-1).draw(false) 然后 $(this).sortable('refresh') 来显示所有行，以允许新显示的行是 sortable.

这工作正常，但是行的刷新导致占位符被删除，但不知何故不是助手。

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

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

复制起来有点困难，你需要在排序开始时几乎不移动鼠标（占位符将在 sort 回调被触发后出现），但我还将添加一个 table 一条记录，这样可以看到占位符不存在。

示例：

$('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') 中尝试了运行数据 table 函数，例如 dataTable.page.len(-1).draw(false)，因为它在实际回调之前运行。我不明白为什么会这样，所以如果有人能解释一下，我将不胜感激。

Answer 1

考虑使用数据表中的行重新排序功能：

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/

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

JQuery UI Sortable + DataTables show all rows without refreshing current page

jquery

jquery-ui

datatables

jquery-ui-sortable

示例：