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

Posted 2023-05-08

【中文标题】JQuery UI Sortable + DataTables显示所有行而不刷新当前页面

【英文标题】：JQuery UI Sortable + DataTables show all rows without refreshing current page

【发布时间】：2020-11-27 03:10:06

【问题描述】：

我有一个 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)，因为它在实际回调之前运行。我不太明白为什么会发生这种情况，所以如果有人能解释一下，我将不胜感激。

【问题讨论】：

为什么不使用 DataTables 中的功能：datatables.net/extensions/rowreorder

@Twisty 我不知道它存在。你知道这个扩展是否有一个“开始”回调吗？当用户开始拖动一行时，我仍然想显示所有行。不过谢谢！

有一个row-reorder 事件可以监听：datatables.net/extensions/rowreorder/examples/initialisation/… 会类似。

还有一个pre-row-reorder：datatables.net/reference/event/#rowreorder

@Twisty 我找到了这些，起初它对我不起作用，因为我将事件绑定在文档而不是表格上。感谢您的帮助。

【参考方案1】：

考虑在 DataTables 中使用 Row ReOrder 功能：

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/