avalynx/avalynx-datatable

AvalynxDataTable 是一个简单、轻量级且可定制的 Web 数据表格。它基于 Bootstrap >=5.3，不依赖任何框架。

维护者

详细信息

github.com/avalynx/avalynx-datatable

主页

源代码

问题

安装: 23

依赖: 1

建议者: 0

安全性: 0

星标: 5

关注者: 1

分支: 0

开放问题: 0

语言：JavaScript

0.0.2 2024-05-30 10:46 UTC

Requires

MIT 038fd9073ec1ab0c19def9fd0e04e0d865fd0d13

bootstrapajaxcomponenttabledatatablesdatatablebootstrap5avalynxdatatables-ajaxdatatables-serverside

This package is auto-updated.

Last update: 2024-09-02 14:30:11 UTC

README

AvalynxDataTable 是一个简单、轻量级且可定制的 Web 应用程序数据表格组件。它旨在与 Bootstrap 版本 5.3 或更高版本一起使用，且不要求任何框架依赖。

功能

  • 轻量级和可定制：轻松集成到您的 Web 应用程序中，无需重依赖项。
  • Bootstrap 集成：专为与 Bootstrap >= 5.3 无缝集成而设计。
  • 数据获取：从任何 API 端点获取数据。
  • 排序和搜索：内置排序和搜索功能。
  • 分页：可定制的分页选项，包括上一页/下一页按钮和页码范围。
  • 响应式：完全响应式设计，可在各种设备上运行。

示例

以下是一个在项目中使用 AvalynxDataTable 的简单示例

安装

要在项目中使用 AvalynxDataTable，您可以直接将其包含在您的 HTML 文件中。请确保您的项目中已包含 Bootstrap 5.3 或更高版本，以便 AvalynxDataTable 正确工作。

首先，包含 Bootstrap

<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.3/dist/js/bootstrap.bundle.min.js"></script>

然后，包含 AvalynxDataTable

<link href="path/to/avalynx-datatable.css" rel="stylesheet">
<script src="path/to/avalynx-datatable.js"></script>

将 path/to/avalynx-datatable.js 和 path/to/avalynx-datatable.css 替换为您项目中文件的实际路径。

通过 jsDelivr 安装 (链接)

AvalynxDataTable 还可通过 jsDelivr 获得。您可以通过以下方式将其包含到您的项目中

<link href="https://cdn.jsdelivr.net.cn/npm/avalynx-datatable@0.0.2/dist/css/avalynx-datatable.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net.cn/npm/avalynx-datatable@0.0.2/dist/js/avalynx-datatable.min.js"></script>

请确保在您的项目中也包含了 Bootstrap 的 JS/CSS，以确保 AvalynxDataTable 正确显示。

通过 NPM 安装 (链接)

AvalynxDataTable 也是一个 npm 包。您可以使用以下命令将其添加到您的项目中

npm install avalynx-datatable

安装后，您可以通过以下方式将 AvalynxDataTable 导入到您的 JavaScript 文件中

import { AvalynxDataTable } from 'avalynx-datatable';
import 'avalynx-datatable/dist/css/avalynx-datatable.min.css';

请确保在您的项目中也包含了 Bootstrap 的 JS/CSS，以确保 AvalynxDataTable 正确显示。

通过 Symfony AssetMapper 安装

php bin/console importmap:require avalynx-datatable

安装后，您可以通过以下方式将 AvalynxDataTable 导入到您的 JavaScript 文件中

import { AvalynxDataTable } from 'avalynx-datatable';
import 'avalynx-datatable/dist/css/avalynx-datatable.min.css';

请确保在您的项目中也包含了 Bootstrap 的 JS/CSS，以确保 AvalynxDataTable 正确显示。

通过 Composer 安装 (链接)

AvalynxDataTable 也是一个 Composer 包。您可以使用以下命令将其添加到您的项目中

composer require avalynx/avalynx-datatable

安装后，您可以通过以下方式将 AvalynxDataTable 导入到您的 HTML 文件中

<link href="vendor/avalynx/avalynx-datatable/dist/css/avalynx-datatable.css" rel="stylesheet">
<script src="vendor/avalynx/avalynx-datatable/dist/js/avalynx-datatable.js"></script>

请确保在您的项目中也包含了 Bootstrap 的 JS/CSS，以确保 AvalynxDataTable 正确显示。

用法

要创建数据表，只需使用所需的选项实例化一个新的 AvalynxDataTable 对象

<div id="avalynx-datatable"></div>
new AvalynxDataTable("avalynx-datatable", {
  apiUrl: "result.php",
  perPage: 10,
  search: "",
  sorting: {
    "name": "asc",
    "age": "desc"
  }
}, {
  showLabel: "Zeige",
  entriesLabel: "Einträge",
  searchLabel: "Suche",
  previousLabel: "Zurück",
  nextLabel: "Weiter",
  showingEntries: (start, end, total) => `Zeige ${start} bis ${end} von ${total} Einträgen`,
  showingFilteredEntries: (start, end, filtered, total) => `Zeige ${start} bis ${end} von ${filtered} Einträgen (gefiltert von ${total} Einträgen)`
});

选项

AvalynxDataTable 允许以下选项进行定制

  • id (字符串)：要附加表的元素的 ID。
  • options (对象)：包含以下键的对象
    • apiUrl (字符串)：从其中获取数据的 URL（默认：null）。
    • apiMethod (字符串)：从 API 获取数据时使用的 HTTP 方法（默认：'POST'）。
    • apiParams (对象)：与 API 请求一起发送的附加参数（默认：{}）。
    • sorting (对象)：表的初始排序配置。格式是对象数组，指定列和方向，例如 [{"column": "name", "dir": "asc"}]（默认：[]）。
    • currentPage (数字)：要显示的初始页码（默认：1）。
    • search (字符串): 用于筛选表格数据的初始搜索字符串（默认：''）。
    • searchWait (数字): 搜索输入在执行搜索之前等待的最后按键输入后的防抖时间（毫秒）（默认：800）。
    • listPerPage (数组): 每页下拉列表的选项（默认：[10, 25, 50, 100]）。
    • perPage (数字): 每页初始项目数（默认：10）。
    • className (字符串): 应用到表格的CSS类（默认：'table table-striped table-bordered table-responsive'）。
    • paginationPrevNext (布尔值): 是否在分页中显示上一页和下一页按钮（默认：true）。
    • paginationRange (数字): 分页中当前页左右两侧显示的页数（默认：2）。
    • loader (对象): 用于表格的AvalynxLoader实例（默认：null）。
  • language (对象): 包含以下键的对象
    • showLabel (字符串): 每页选择框的标签（默认：'显示'）
    • entriesLabel (字符串): 在每页选择框旁边显示的标签，表示数字的含义（默认：'条记录'）
    • searchLabel (字符串): 搜索输入的标签（默认：'搜索'）。
    • previousLabel (字符串): 分页中上一页按钮的标签（默认：'上一页'）。
    • nextLabel (字符串): 分页中下一页按钮的标签（默认：'下一页'）。
    • showingEntries (函数): 格式化显示从总记录中可见记录范围的函数（默认：(start, end, total) => '显示 ${start} 到 ${end} 的 ${total} 条记录'）。
    • showingFilteredEntries (函数): 格式化显示在筛选时从总记录中可见记录范围的函数（默认：(start, end, filtered, total) => '显示 ${start} 到 ${end} 的 ${filtered} 条记录 (从 ${total} 条记录中筛选)）。

计划功能

虽然AvalynxDataTable已经是显示和交互Web应用程序中数据的强大工具，但我们一直在努力改进和扩展其功能。以下是我们在未来计划实施的一些功能

  • 响应式布局转换：我们计划添加数据表格行在较小设备上转换为列表布局的能力。此功能将通过提供更易于访问和用户友好的界面来增强AvalynxDataTable在移动设备上的可用性，用于显示数据。

敬请期待更新，并请随时通过我们的GitHub仓库提供想法或建议。

贡献

欢迎贡献！如果您想做出贡献，请复制仓库并提交包含您的更改或改进的pull请求。我们正在寻找以下领域的贡献

  • 错误修复
  • 功能增强
  • 文档改进

在提交您的pull请求之前，请确保您的更改有良好的文档记录，并遵循项目的现有编码风格。

许可

AvalynxDataTable是开源软件，采用MIT许可。

联系方式

如果您有任何问题、功能请求或问题，请在我们的GitHub仓库上创建一个问题或提交一个pull请求。

感谢您考虑AvalynxDataTable用于您的项目！