介绍
datatables.net-rowgroup-bs4是基于Bootstrap4的datatables.net插件提供了分组行的功能。在使用这个插件时，你可以将数据按某一列分组，同时支持自定义分组行的样式。
安装
你可以在项目文件夹中使用npm安装该插件。
npm install datatables.net-rowgroup-bs4
使用
在 HTML 中引入以下文件：
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.min.js"></script> <script src="https://cdn.datatables.net/rowgroup/1.1.3/js/dataTables.rowGroup.min.js"></script> <script src="https://cdn.datatables.net/rowgroup/1.1.3/css/rowGroup.bootstrap4.min.css"></script>
在JS中实例化datatable表格，并使用rowGroup插件调用。
-- -------------------- ---- ------- ---------------------------- - ------------------------ - ------------- - - ---------- ------ ---------- - - -- -------- -- -- ----- --- ----------- - ---------- - - - -- - --展开代码
示例
下面是一个使用datatables.net-rowgroup-bs4插件的示例。
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ---------------------------------- ------------ ----- ---------------- --------------- ---------------------------------------------------------------------------- ----- ---------------- --------------- --------------------------------------------------------------------------------- ------- ------------------------------------------------------- ------- ------------------------------------------------------------------------------ ------- ---------------------------------------------------------------------------------- ------- --------------------------------------------------------------------------------------- ------- ----------------------- ---------------------------- - ------------------------ - ------- --------------------------- ------------- - - ---------- ------ ---------- - - -- -------- -- -- ----- --- ---------------- --- --------------- -------- - -------- - - --- --- - ----------- --- ---- - --------- ---------------- ---------- --- ---------- ------------- ---------------- -------------- -------- - ------ - - - -- - ---- --- ----- - - ----------- - --------- ---- ----------------- -------------------------------- -- ---- - ------ - - -- - - -- - -- --------- ------- ------ ---- ------------------ ------ ------------ ------------ -------------- -------------- ------------------- ------- ---- ------------- ----------------- --------------- ------------ --------- --------- --------------- ----- -------- ------- ---- --------- ---------- ---------- -------------- ------------------ ----------- ------------------- ----------------- ----- ---- ----------- ------------ ------------------- -------------- ----------- ------------------- ----------------- ----- ---- ------------ ----------- ---------- ---------- -------------- ------------------ ----------- ------------------- ---------------- ----- ---- ------------ ----------- ------------ ------------- --------------- ----------- ------------------- ----------------- ----- ---- ----------- ---------- ---------- ------------ ------- --------- ----------- ------------------- ----------------- ----- -------- -------- ------ ------- -------展开代码
总结
datatables.net-rowgroup-bs4是一个非常方便和实用的插件，为datatable表格提供了分组行的功能。建议在使用分组行的时候，设计好分组行的样式，并使用合适的分组方式使得数据展示更加直观和便于查看。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/163711
