前端开发中，数据表格是经常使用到的一种展示方式，而datatables是一个十分优秀的表格插件。在datatables的基础上，datatables.net-colreorder-bs是一个功能更加强大的插件，能够支持列的排序和可视化，提升用户体验。
安装
使用npm安装datatables.net-colreorder-bs:
npm install datatables.net-colreorder-bs --save
使用
可以通过以下代码引入datatables.net-colreorder-bs：
var $ = require( 'jquery' ); require( 'datatables.net-colreorder-bs' )( window, $ );
或者，你可以作为AMD或CommonJS模块导入datatables.net-colreorder-bs。
基本示例
下面是datatables.net-colreorder-bs的基本示例，假设有一个简单的html表格：
-- -------------------- ---- -------
------ ------------ --------------- --------------- -------------
-------
----
-------------
-----------------
---------------
------------
--------- ---------
---------------
-----
--------
-------
----
-------------
-----------------
---------------
------------
--------- ---------
---------------
-----
--------
-------
----
--------- ----------
---------- --------------
------------------
-----------
-------------------
-----------------
-----
----
----------- ------------
-------------------
--------------
-----------
-------------------
-----------------
-----
--------
--------使用以下JavaScript代码初始化datatables.net-colreorder-bs：
$( document ).ready(function() {
$('#myTable').DataTable({
"colReorder": true
});
});效果如下：
配置选项
可以通过配置选项来更进一步地控制datatables.net-colreorder-bs的行为。以下是一些常见的选项：
colReorder- 这是datatables.net-colreorder-bs的主要选项，允许用户通过拖动列来重新排序表格。默认值为false。fixedHeader- 当表格非常大时，用户可能需要锁定表格的标题，以便在滚动时标题始终可见。默认值为false。responsive- 如果表格的宽度小于屏幕宽度，则可以使用此选项以响应式方式调整表格。默认值为false;
$( document ).ready(function() {
$('#myTable').DataTable({
"colReorder": true,
"fixedHeader": true,
"responsive": true
});
});事件
datatables.net-colreorder-bs也提供了一些事件，允许我们在表格中添加自己的逻辑。
col_reorder
每当表格列被重新排序时触发。
-- -------------------- ---- -------
-- -------- ------------------ -
-------------------------
------------- -----
-------------- -----
------------- -----
--------------------- ---------- -
------------------ ------- ---- ---- -------------
-
---
---preXhr
在将请求发送到服务器之前触发，可以用来修改AJAX请求。
-- -------------------- ---- -------
-- -------- ------------------ -
-------------------------
------------- -----
-------------- -----
------------- -----
------- -
------ -----------
------- -------
------- -------- - - - -
--------- - ----------
--
--------- ------------- -
------------------------------------ ----------------------------------------------
--
--
---
---总结
在这篇文章中，我们学习了如何使用npm包 datatables.net-colreorder-bs，详细介绍了如何安装、使用、配置datatables.net-colreorder-bs，并提供了基本示例和常用的配置选项和事件。希望读者可以通过本文，快速掌握datatables.net-colreorder-bs，并将其应用到实际项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/185714