简介
datatables.net-bs4 是一个基于 jQuery 的表格插件，可实现排序、过滤、搜索、分页等功能。它提供了完全的自定义性，可以通过插件的配置选项、回调函数以及扩展插件来满足各种需求。
本文将介绍如何通过 npm 包管理工具进行 datatables.net-bs4 的安装和使用，以及一些常用的配置选项和回调函数。
安装
在终端执行以下命令进行安装：
npm install datatables.net-bs4
使用
引入 CSS 和 JavaScript 文件
在 HTML 文件中引入 datatables.net-bs4 的 CSS 和 JavaScript 文件：
<link rel="stylesheet" type="text/css" href="node_modules/datatables.net-bs4/css/dataTables.bootstrap4.min.css"> <script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script> <script type="text/javascript" src="node_modules/datatables.net/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="node_modules/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script>
初始化表格
-- -------------------- ---- ------- ------ ------------ ------------ -------------- --------------------- -------- -------------------------- -- - ------------------------- ----- - ------ ------- ------------- -------- ----- ------------- ------------ ---------- ------- ------ --------- ------- ------- --------- ----- ------------- -------------- -------- ----- ------- --------- -------- ---- ----------- ----- ------------- ----------- --------- ------- --------- ---------- --------- ----- ------------- ------------ --------- -------- --------- ---------- ---- ----------- ----- ------------- ----------- -- -------- - - ------ ------ -- - ------ ---------- -- - ------ -------- -- - ------ ----- -- - ------ ------ ----- -- - ------ -------- - - --- --- ---------展开代码
配置选项
下面介绍几个常用的配置选项。
serverSide
$('#myTable').DataTable({ serverSide: true, ajax: '/api/data' });
当 serverSide 为 true 时，datatables.net-bs4 将从服务器端获取数据，而不是从本地获取。通过设置 ajax 选项指定数据来源。
注意，服务器端返回的数据格式必须符合 datatables.net-bs4 的规范。具体规范可参考官方文档：Server-side processing
columns
-- -------------------- ---- ------- ------------------------- -------- - - ------ ------ -- - ------ ---------- -- - ------ -------- -- - ------ ----- -- - ------ ------ ----- -- - ------ -------- -- - ----- ----- ------- -------------- ----- ---- - ------ -------- ------------- ---------- ---------------------------- - - - ---展开代码
columns 选项用于定义表格的列。每一列都是一个对象，包含以下属性：
- title：列的标题。
- data：可选，指定列对应的数据源。
- render：可选，指定如何渲染列中的数据。其类型为 function，接收三个参数：当前行的数据、要渲染的类型（display 或者 filter）以及当前行的数据源。
在上面的例子中，datatable 渲染出的表格最后一列是一个按钮，当点击该按钮时，可以执行一些操作，比如弹出模态框，编辑当前行数据等。
searching
$('#myTable').DataTable({ searching: false });
searching 选项用于开启或关闭搜索功能，默认值为 true。
回调函数
下面介绍几个常用的回调函数。
initComplete
$('#myTable').DataTable({ initComplete: function() { alert('datatable 初始化完毕！'); } });
initComplete 回调函数在 datatable 初始化完毕后执行，可以用于自定义一些操作。比如，在 datatable 初始化完毕后弹出一个提示框。
drawCallback
-- -------------------- ---- ------- ------------------------- ------------- ---------- - -------------------------- ---------- - -- ----------- --- -- -------- - - ----- ----- ------- -------------- ----- ---- - ------ -------- ------------- ---------- ----------- ------------------------- - - - ---展开代码
drawCallback 回调函数在每次 datatable 重新绘制时执行，可以用于动态渲染、绑定事件等。在上面的例子中，通过在 drawCallback 回调函数中绑定按钮的点击事件，实现了在每次 datatable 重新绘制时，都能响应按钮的点击事件。
总结
本文介绍了如何通过 npm 包管理工具安装和使用 datatables.net-bs4，以及一些配置选项和回调函数。datatables.net-bs4 可以大大提高表格的可读性和可操作性，如果您在项目中需要使用表格，datatables.net-bs4 是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/162827
