如果你是一个前端开发人员，那么你一定知道 DataTables.js 这个非常流行的 JavaScript 库。而 datatables.net-rowreorder-bs4 则是 DataTables.js 的一个扩展，它提供了一种非常方便的界面，让用户可以拖拽行来重新排序。
在本文中，我们将为你提供 datatables.net-rowreorder-bs4 的使用教程。你将学习到如何添加该扩展以及如何配置它，还将看到具体的示例代码和效果。这篇文章对我们学习 DataTables.js 的扩展以及掌握如何使用它的重要性是不言而喻的。
什么是 datatables.net-rowreorder-bs4？
datatables.net-rowreorder-bs4 是一个 Datatables.js 插件，它可以为 DataTables 表格提供拖拽排序功能。它支持跨浏览器、跨平台、自适应移动设备操作，并且与 Bootstrap4 深度集成。
如何使用 datatables.net-rowreorder-bs4？
首先，我们需要先引入 Datatables 和 Bootstrap4 的库文件。该插件需要 jQuery 和 DataTables 核心文件，同时需要 Bootstrap4 的样式来美化界面。在页面中加入以下代码块可以实现上述步骤：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ------------------------------------ ------------- ----- ---------------- ------------------------------------------------------------------------- ----- ---------------- -------------------------------------------------------------------------------------- ----- ---------------- -------------------------------------------------------------------------------------- ----- ---------------- ----------------------------------------------------------------------------- ----- ---------------- ---------------------------------------------------------------------------- -- ------- ------ ------ ------------ ------------ ------------- --------------- ------------------- ------- ---- --------- --------- -------- --------- ----------------- --------------- ------------ --------- --------- ----- -------- ------- ---- -------------- -------------- ---------- -------------- ------------------ ----------- ------------------- ----- ---- ---------------- ---------------- ------------------- -------------- ----------- ------------------- ----- ---- --------------- ------------ ---------- --------- ----------- ------- -------------- ----------- ------------------- ----- ---- --------------- -------------- ---------- ---------- -------------- ------------------ ----------- ------------------- ----- ---- -------------- ---------------- ------------- --------------- ------------------ ----------- ------------------- ----- ---- -------------- --------------- ------------ ------------ ------- --------- ----------- ------------------- ----- -------- -------- ------- ------- ------------------------------------------------------------------------------ ------- ------------------------------------------------------------------------------------------- ------- ------------------------------------------------------------------------------------------- ------- ------------------------------------------------------------------------------------------- ------- ---------------------------------------------------------------------------------- ------- ----------------------------------------------------------------------------------- -------- ---------------------------- - ------------------------ - ----------- - --------- ----------------- -- ----------- ---- - -- - -- --------- -------展开代码
然后，您需要实例化 DataTables 表格，并在 options 参数中使用 rowReorder 的属性来开启拖拽排序功能：
$(document).ready(function() { $('#example').DataTable( { rowReorder: { selector: 'td:nth-child(2)' } } ); } );
通过 selector 属性，我们可以指定拖拽排序的触发层级。 在此示例中，表格的第 2 个 <td> 元素（即 Last name 列）将被用于启动拖拽排序功能。
此外，您还可以使用 rowReorder 回调属性来监听拖拽排序事件，以在排序发生后执行进一步的操作。 下面是一个例子：
-- -------------------- ---- ------- ---------------------------- - ------------------------ - ----------- - --------- ----------------- -- ----------- ----- ------------------- -------- ------ ----- - ----------------- ------------ - - -- - --展开代码
这里的函数将在拖拽排序完成后被调用，并传递重新排序的行和列数据。
您也可以使用 css 可调整 Reorder 控件。例如，您可以将以下样式表将 Reorder 控件调整为更具体的位置：
.dataTables_rowReorder { width: 20px !important; cursor: move; }
示例代码
下面是一个 datatables.net-rowreorder-bs4 的示例代码块，您可以将其添加到您的项目中，了解此扩展的更多详细信息。
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ------------------------------------ ------------ ----- ---------------- ------------------------------------------------------------------------- ----- ---------------- -------------------------------------------------------------------------------------- ----- ---------------- -------------------------------------------------------------------------------------- ----- ---------------- ----------------------------------------------------------------------------- ----- ---------------- ---------------------------------------------------------------------------- -- ------- ------ ------ ------------ ------------ ------------- --------------- ------------------- ------- ---- --------- --------- -------- --------- ----------------- --------------- ------------ --------- --------- ----- -------- ------- ---- -------------- -------------- ---------- -------------- ------------------ ----------- ------------------- ----- ---- ---------------- ---------------- ------------------- -------------- ----------- ------------------- ----- ---- --------------- ------------ ---------- --------- ----------- ------- -------------- ----------- ------------------- ----- ---- --------------- -------------- ---------- ---------- -------------- ------------------ ----------- ------------------- ----- ---- -------------- ---------------- ------------- --------------- ------------------ ----------- ------------------- ----- ---- -------------- --------------- ------------ ------------ ------- --------- ----------- ------------------- ----- -------- -------- ------- - ------------------------------------------------------------ -------- ------------------------------------------------------------------------------------展开代码
