行重新排序

DataTables通常用于显示顺序数据,因此自然而然地希望能够重新排序这些数据 - 为此,可以利用RowReorder扩展。通过它,最终用户可以通过单击并拖动(或在移动设备上触摸并拖动)表格中的行并更改其位置。还可以完全集成Editor的多行编辑功能,即可自动将更新内容写入数据库。

RowReorder使用数据交换方法进行操作,因此即使是非顺序数据也能进行操作。例如,考虑将行拖动到表格顶部,它将获取当前位于顶部位置的行的数据,当前顶部行将移到第二行,它将从此第二行中的行获取新值,依此类推。在修改的行中的数据点由rowReorder.dataSrc定义。通常,您希望它是一个顺序数字!否则,数据重新排序可能会让最终用户感到困惑!

下载

获取并使用RowReorder的最简单方法是使用DataTables下载构建器,您可以在其中选择您希望在页面上使用的软件,并为您创建一个托管的单个JavaScript和CSS文件。

或者,您可以在页面上包含各个文件下载发行包或者在GitHub上克隆源代码控制存储库

初始化

可以在DataTable中使用rowReorder选项(在DataTables选项对象中)初始化RowReorder - 这仅仅是布尔值true,表示这些行应该可以重新排序,但也可以使用对象进行精细控制(有关详细信息,请参阅引用文档)

$('#myTable').DataTable( {
    rowReorder: true
} );

特性

RowReorders提供了以下特性

  • 支持单击和触控功能的DataTables行重新排序
  • Editor完全集成
  • 自定义拖动开始手柄
  • 拖动对齐
  • 与Bootstrap、Foundation和DataTables支持的其他样式库完全集成