前言
在前端开发中，表格是非常常见的组件。而 jQuery Datatables 是一个功能强大、灵活的插件，可以方便地实现各种复杂的表格展示和交互。但在使用 jQuery Datatables 时，需要编写大量的初始化代码，这给开发带来了不小的困扰。为此，本文介绍了一个 npm 包 jquery.datatables-init，该包可以简化 jQuery Datatables 的初始化过程，使得代码更加简单、优雅。
jquery.datatables-init 模块介绍
jquery.datatables-init 模块是一个 jQuery Datatables 的初始化工具。它封装了 DataTables 的初始化过程，提供了一些常用的选项和配置，可以大幅度简化代码，提高开发效率。
安装 jquery.datatables-init
通过 npm 直接安装该模块，方法如下：
npm install jquery.datatables-init --save
这将会把 jquery.datatables-init 模块添加到项目的依赖中。
使用 jquery.datatables-init
使用 jquery.datatables-init 模块初始化 Datatables，只需要简单几步：
1、在页面中引入必要的脚本和样式文件
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.13/datatables.min.css"/> <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.13/datatables.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/colreorder/1.3.3/js/dataTables.colReorder.min.js"></script>
2、编写 HTML 代码
-- -------------------- ---- -------
------ ------------ --------------- --------------- -------------
-------
----
-------------
-----------------
---------------
------------
--------- ---------
---------------
-----
--------
-------
----
-------------
-----------------
---------------
------------
--------- ---------
---------------
-----
--------
-------
----
--------- ----------
---------- --------------
------------------
-----------
-------------------
-----------------
-----
----
----------- ------------
-------------------
--------------
-----------
-------------------
-----------------
-----
---
--------
--------3、在 JavaScript 中初始化 Datatables
var table = $('#example').dataTable({
colReorder: true
});以上 JavaScript 代码会初始化一个 Datatables 表格，自动添加分页、排序、搜索等功能，并启用列重排（colReorder）功能。如果需要更多的配置选项，可以参考插件的文档。
示例代码
下面是一个完整的示例代码，具体使用可自行修改：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------------- ----------
----- ---------------- --------------- ----------------------------------------------------------------------
------- ---------------------- ----------------------------------------------------------------------------
------- ---------------------- ----------------------------------------------------------------------------
------- ---------------------- -------------------------------------------------------------------------------------------
------- ---------------------- -------------------------------------------------------------------------------------------------------
------ ----------------
----- ----- -
------ -----
-------- ----
----------- -----------
-
--------
-------
------
------ ------------ ------------ ------------- --------------- --------------- -------------
-------
----
-------------
-----------------
---------------
------------
--------- ---------
---------------
-----
--------
-------
----
-------------
-----------------
---------------
------------
--------- ---------
---------------
-----
--------
-------
----
--------- ----------
---------- --------------
------------------
-----------
-------------------
-----------------
-----
----
----------- ------------
-------------------
--------------
-----------
-------------------
-----------------
-----
----
---------- --------
---------- --------- -----------
------- --------------
-----------
-------------------
----------------
-----
---
--------
--------
------- -----------------------
---------------------------- -
--- ----- - -------------------------
----------- ----
---
---
---------
-------
-------总结
jquery.datatables-init 模块简化了 Datatables 的初始化过程，更加方便和快捷。在实际项目开发中，该模块可以大幅提升前端开发效率和代码质量，非常值得推荐使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056e9881e8991b448e7578