UI组件前端【免费下载链接】flowbiteOpen-source UI component library and front-end development framework based on Tailwind CSS项目地址https://gitcode.com/gh_mirrors/fl/flowbite点击查看免费下载本指南以 Flowbite 官方文档中的 Datatables 插件页面content/plugins/datatables.md为蓝本系统讲解如何在基于 Tailwind CSS 的项目中集成simple-datatables库实现面向数千条数据的搜索、排序、逐列筛选、分页、行选中与 CSV/TXT/JSON/SQL 导出能力。读完本文你将掌握从 NPM/CDN 安装、初始化DataTable实例到逐一配置各项行为选项与调用实例方法的完整实战链路并能直接复用文中给出的可运行代码。Flowbite 的 Datatables 组件示例基于开源库 simple-datatables 中。快速开始安装依赖在继续之前请确保你的项目中已具备以下三样东西Tailwind CSS、Flowbite、Simple Datatables。安装 Tailwind CSS 并完成 Flowbite 接入请先按照快速上手指南安装 Tailwind CSS 与 Flowbite并在 CSS 中通过plugin flowbite/plugin引入官方插件。flowbite/plugin默认会启用datatables true从而注入.datatable-wrapper、.datatable-container、.datatable-pagination等一系列专属样式类详见 plugin.js 中的addComponents定义包括表格边框、圆角、搜索框、下拉选择器与分页按钮的完整样式。通过 NPM 安装simple-datatables库npm install simple-datatables --save或者使用 CDN 方式引入script srchttps://cdn.jsdelivr.net/npm/simple-datatables9.0.3/script说明仓库文档站点的示例短代码layouts/_shortcodes/example.html在渲染 datatables 示例时正是通过 CDN 加载simple-datatables9.0.4随后在window.onload中执行示例自身的初始化脚本这与你手动引入的流程完全一致。完成上述安装后就可以从 Flowbite 文档中复制 Datatables 组件了。需要注意除了 HTML 标记外务必同时复制用于初始化组件的 JavaScript 代码二者缺一不可。默认数据表格开箱即用的排序与分页下面的示例演示如何用最少的配置展示带默认排序和分页功能的表格数据。HTML 部分就是一个带iddefault-table的普通table列头内通过data-type/data-format属性声明日期列的解析规则JavaScript 部分则创建DataTable实例并关闭搜索与每页条数选择器if (document.getElementById(default-table) typeof simpleDatatables.DataTable ! undefined) { const dataTable new simpleDatatables.DataTable(#default-table, { searchable: false, perPageSelect: false }); }table iddefault-table thead tr th span classflex items-center Name !-- 上下箭头 SVGw-4 h-4 ms-1可省略 -- /span /th th>if (document.getElementById(search-table) typeof simpleDatatables.DataTable ! undefined) { const dataTable new simpleDatatables.DataTable(#search-table, { searchable: true, sortable: false }); }table idsearch-table thead tr thspan classflex items-centerCompany Name/span/th thspan classflex items-centerTicker/span/th thspan classflex items-centerStock Price/span/th thspan classflex items-centerMarket Capitalization/span/th /tr /thead tbody tr td classfont-medium text-heading whitespace-nowrapApple Inc./td tdAAPL/td td$192.58/td td$3.04T/td /tr tr td classfont-medium text-heading whitespace-nowrapMicrosoft Corporation/td tdMSFT/td td$340.54/td td$2.56T/td /tr !-- 其余约 30 行数据见 content/plugins/datatables.md -- /tbody /table逐列过滤在表头为每一列注入搜索框当数据列较多、字段含义各异时按列筛选比全局搜索更高效。要实现这一点需要把 JavaScript 标签页中的自定义代码与表格 HTML 结构一起复制通过tableRender回调在每次渲染打印预览除外时为每个表头列动态插入一个input typesearch并用data-columns属性声明该输入框作用的列索引if (document.getElementById(filter-table) typeof simpleDatatables.DataTable ! undefined) { const dataTable new simpleDatatables.DataTable(#filter-table, { tableRender: (_data, table, type) { if (type print) { return table } const tHead table.childNodes[0] const filterHeaders { nodeName: TR, attributes: { class: search-filtering-row }, childNodes: tHead.childNodes[0].childNodes.map( (_th, index) ({nodeName: TH, childNodes: [ { nodeName: INPUT, attributes: { class: datatable-input, type: search, data-columns: [ index ] } } ]}) ) } tHead.childNodes.push(filterHeaders) return table } }); }table idfilter-table thead tr thspan classflex items-centerName/span/th thspan classflex items-centerCategory/span/th thspan classflex items-centerBrand/span/th thspan classflex items-centerPrice/span/th thspan classflex items-centerStock/span/th thspan classflex items-centerTotal Sales/span/th thspan classflex items-centerStatus/span/th /tr /thead tbody tr td classfont-medium text-heading whitespace-nowrapApple iMac/td tdComputers/td tdApple/td td$1,299/td td50/td td200/td tdIn Stock/td /tr tr td classfont-medium text-heading whitespace-nowrapApple iPhone/td tdMobile Phones/td tdApple/td td$999/td td120/td td300/td tdIn Stock/td /tr !-- 其余产品行见 content/plugins/datatables.md -- /tbody /table实现原理tableRender是 simple-datatables 提供的渲染钩子这里借助它向thead追加一行 class 为search-filtering-row的TR每列一个搜索输入框。Flowbite 插件在 plugin.js 中针对该行做了专门的样式适配.datatable-wrapper .datatable-container thead tr.search-filtering-row th { padding-top: 0 }使筛选行紧贴列头同时输入框复用.datatable-input类plugin.js在暗色模式下同样生效。数据排序点击列头升降序把sortable设为true所有数据行即可通过点击表头按列升序/降序排列设为false则关闭该能力。GDP 统计示例中还同时关闭了搜索与每页条数选择器聚焦纯粹的排序体验if (document.getElementById(sorting-table) typeof simpleDatatables.DataTable ! undefined) { const dataTable new simpleDatatables.DataTable(#sorting-table, { searchable: false, perPageSelect: false, sortable: true }); }table idsorting-table thead tr thspan classflex items-centerCountry/span/th thspan classflex items-centerGDP/span/th thspan classflex items-centerPopulation/span/th thspan classflex items-centerGDP per Capita/span/th /tr /thead tbody tr td classfont-medium text-heading whitespace-nowrapUnited States/td td$21433 billion/td td331 million/td td$64763/td /tr tr td classfont-medium text-heading whitespace-nowrapChina/td td$14342 billion/td td1441 million/td td$9957/td /tr !-- 其余国家行见 content/plugins/datatables.md -- /tbody /table关于排序的视觉反馈Flowbite 插件定义了.datatable-sorter:hover以及.datatable-ascending .datatable-sorter、.datatable-descending .datatable-sorter的着色规则见 plugin.js因此表头中的箭头图标会在排序状态变化时自动高亮为标题色。分页控制每页条数与页码选项分页对所有 Flowbite Datatables默认开启如需关闭可设置paging: false。通过perPage指定默认每页展示的数据行数通过perPageSelect自定义每页条数的下拉选项if (document.getElementById(pagination-table) typeof simpleDatatables.DataTable ! undefined) { const dataTable new simpleDatatables.DataTable(#pagination-table, { paging: true, perPage: 5, perPageSelect: [5, 10, 15, 20, 25], sortable: false }); }table idpagination-table thead tr thspan classflex items-centerModel Name/span/th thspan classflex items-centerDeveloper/span/th th>if (document.getElementById(selection-table) typeof simpleDatatables.DataTable ! undefined) { let multiSelect true; let rowNavigation false; let table null; const resetTable function() { if (table) { table.destroy(); } const options { rowRender: (row, tr, _index) { if (!tr.attributes) { tr.attributes {}; } if (!tr.attributes.class) { tr.attributes.class ; } if (row.selected) { tr.attributes.class selected; } else { tr.attributes.class tr.attributes.class.replace( selected, ); } return tr; } }; if (rowNavigation) { options.rowNavigation true; options.tabIndex 1; } table new simpleDatatables.DataTable(#selection-table, options); // Mark all rows as unselected table.data.data.forEach(data { data.selected false; }); table.on(datatable.selectrow, (rowIndex, event) { event.preventDefault(); const row table.data.data[rowIndex]; if (row.selected) { row.selected false; } else { if (!multiSelect) { table.data.data.forEach(data { data.selected false; }); } row.selected true; } table.update(); }); }; // Row navigation makes no sense on mobile, so we deactivate it and hide the checkbox. const isMobile window.matchMedia((any-pointer:coarse)).matches; if (isMobile) { rowNavigation false; } resetTable(); }table idselection-table thead tr thspan classflex items-centerName/span/th th>if (document.getElementById(export-table) typeof simpleDatatables.DataTable ! undefined) { const exportCustomCSV function(dataTable, userOptions {}) { // A modified CSV export that includes a row of minuses at the start and end. const clonedUserOptions { ...userOptions } clonedUserOptions.download false const csv simpleDatatables.exportCSV(dataTable, clonedUserOptions) // If CSV didnt work, exit. if (!csv) { return false } const defaults { download: true, lineDelimiter: \n, columnDelimiter: ; } const options { ...defaults, ...clonedUserOptions } const separatorRow Array(dataTable.data.headings.filter((_heading, index) !dataTable.columns.settings[index]?.hidden).length) .fill() .join(); // Use as the delimiter const str separatorRow options.lineDelimiter csv options.lineDelimiter separatorRow; if (userOptions.download) { // Create a link to trigger the download const link document.createElement(a); link.href encodeURI(data:text/csv;charsetutf-8, str); link.download (options.filename || datatable_export) .txt; // Append the link document.body.appendChild(link); // Trigger the download link.click(); // Remove the link document.body.removeChild(link); } return str } const table new simpleDatatables.DataTable(#export-table, { template: (options, dom) div class options.classes.top div classflex flex-col sm:flex-row sm:items-center space-y-4 sm:space-y-0 sm:space-x-3 rtl:space-x-reverse w-full sm:w-auto (options.paging options.perPageSelect ? div class options.classes.dropdown label select class options.classes.selector /select options.labels.perPage /label /div : ) button idexportDropdownButton typebutton classflex w-full sm:w-auto text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-4 focus:ring-neutral-tertiary shadow-xs font-medium leading-5 rounded-base text-sm px-3 py-2 focus:outline-none Export as svg class-me-0.5 ms-1.5 h-4 w-4 aria-hiddentrue xmlnshttp://www.w3.org/2000/svg width24 height24 fillnone viewBox0 0 24 24 path strokecurrentColor stroke-linecapround stroke-linejoinround stroke-width2 dm19 9-7 7-7-7 / /svg /button div idexportDropdown classz-10 hidden w-52 divide-y divide-gray-100 rounded-lg bg-white shadow-sm dark:bg-gray-700>table idexport-table thead tr thspan classflex items-centerName/span/th th>// 通过 CDN 安装时的写法 const dataTable new simpleDatatables.DataTable(#default-table); // 通过 NPM 安装时的写法 import { DataTable } from simple-datatables; const dataTable DataTable(#default-table);第二个参数可以传入一个选项对象用于自定义表格外观与行为const dataTable new simpleDatatables.DataTable(#default-table, options);初始化完成后即可访问实例暴露的方法与属性如dataTable.search()、dataTable.insert()、dataTable.update()、dataTable.on()、dataTable.destroy()等simple-datatables 官方文档提供了完整的公开方法与属性列表本文不再赘述。常用选项详解以下按功能分组梳理文档中推荐的常用选项。注入数据data使用data选项可通过 JavaScript 以数组的数组形式向表格注入数据——相比硬编码 HTML更适合从 API 或 JSON 文件动态加载const customData { headings: [ Name, Company, Date, ], data: [ [ Flowbite, Bergside, 05/23/2023, ], [ Next.js, Vercel, 03/12/2024, ], }; const dataTable new DataTable(#default-table, { data: customData });外观定制Appearance以下选项用于定制表格外观标题caption、自定义类classes、表尾footer、表头header、HTML 渲染模板template以及纵向滚动scrollYconst dataTable new DataTable(#default-table, { caption: Flowbite is an open-source library, classes: { // 自定义 HTML 类完整列表见 simple-datatables 文档 // 建议在默认类之外追加因为 Flowbite 依赖默认类来套用样式 }, footer: true, // 启用或禁用表尾 header: true, // 启用或禁用表头 labels: { // 自定义标签文案完整列表见 simple-datatables 文档 }, template: (options, dom) { // 自定义表格 HTML 模板完整列表见 simple-datatables 文档 }, scrollY: 300px, // 启用纵向滚动超出后内部滚动 });这些选项非常适用于向动态生成的表头或表尾中注入自定义 HTML 元素——上文导出文件示例就是在template中挂载导出菜单的。分页Paginationconst dataTable new DataTable(#default-table, { paging: true, // 启用或禁用分页 perPage: 10, // 每页展示的数据行数 perPageSelect: [5, 10, 20, 50], // 每页行数的下拉选项 firstLast: true, // 启用或禁用首页/末页按钮 nextPrev: true, // 启用或禁用上一页/下一页按钮 });当数据集较大时分页是将其拆分为多页展示的有效手段。搜索Searchingconst dataTable new DataTable(#default-table, { searchable: true, // 启用或禁用搜索 sensitivity: base, // 搜索敏感度base、accent、case、variant searchQuerySeparator: , // 搜索查询的分隔符 });注意原文档代码中sensitivity与searchQuerySeparator行之间缺少逗号实际使用时请补全为如上格式。当数据集较大时搜索功能帮助用户快速定位目标行。排序Sortingconst dataTable new DataTable(#default-table, { sortable: true, // 启用或禁用排序 locale: en-US, // 排序所用区域设置 numeric: true, // 启用或禁用数值排序 caseFirst: false, // 大小写优先级upper、lower ignorePunctuation: true, // 排序时是否忽略标点 });当用户需要按指定列重排行序时排序功能非常实用。常用实例方法以下是在初始化之后与 DataTable 实例交互的常见方法// 以编程方式搜索表格其中 term 为查询字符串 dataTable.search(term, columns); // 向表格追加一行数据假设表格有四个列 dataTable.insert({ Heading 1: Cell 1, Heading 2: Cell 2, Heading 3: Cell 3, Heading 4: Cell 4, }); // 更新表格的 DOM dataTable.update();除此之外simple-datatables 还暴露了on事件监听、destroy销毁实例等方法完整列表可参考其官方文档中的 Methods 章节。许可证说明Flowbite 在上述示例中构建的所有代码均开源并遵循MIT 许可simple-datatables 仓库同样开源但其遵循GNU 许可。集成到商业项目前请分别确认两份许可证的条款。小结Flowbite Datatables 插件将 simple-datatables 的完整能力搜索、排序、逐列过滤、分页、行选中与多格式导出与 Tailwind CSS 的样式体系无缝衔接只需安装依赖、复制 HTML 标记与配套 JavaScript即可获得支持响应式、暗色模式与 RTL 的高性能数据表格足以承载数千条数据的浏览与操作场景。若需在渲染层面进一步定制例如注入自定义工具栏或动态加载数据template、tableRender、data等选项以及search、insert、update、on等方法提供了充足的扩展空间上述全部完整示例与数据行源码均可直接参考仓库中的 content/plugins/datatables.md 文件。赞分享UI组件前端【免费下载链接】flowbiteOpen-source UI component library and front-end development framework based on Tailwind CSS项目地址https://gitcode.com/gh_mirrors/fl/flowbite点击查看免费下载相关推荐Flowbite 表格组件完全指南基于 Tailwind CSS 的数据表构建与进阶实战Flowbite 表格组件完全指南基于 Tailwind CSS 的数据表构建与进阶实战 表格组件是一组由行 tr 与列 th / td 单元格UI组件前端Refine v3 useTable 使用指南构建支持分页、排序、筛选与搜索的 Ant Design 数据表格Refine v3 useTable 使用指南构建支持分页、排序、筛选与搜索的 Ant Design 数据表格 useTable 是 Refine 在 Ant前端企业应用10分钟跑通 ok-ww 鸣潮自动战斗脚本自动刷声骸、一键清日常完整教程10分钟跑通 ok ww 鸣潮自动战斗脚本自动刷声骸、一键清日常完整教程 打开《鸣潮》只剩半小时日常却还要两小时ok ww 是一款开源的鸣潮自动化脚本靠GUI 自动化计算机视觉RPA人工智能上一篇如何永久保存微信聊天记录完整指南与智能分析方案下一篇jsPDF事件总线实现PDF生成过程的解耦设计创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
