当前位置:主页 > JavsScript库 > 表格 >

简单的快速数据表JavaScript 库 - RdataTB
栏目分类:表格   发布日期:2021-09-11   浏览次数:

RdataTB 是一个简单的纯 JavaScript 库,可帮助您从常规 HTML 表生成用户友好的数据表。

特征:

  • 表格分页和导航。

  • 允许您选择每页显示的行数。

  • 实时表数据过滤器。

  • 将表导出为 JSON 或 CSV。

  • 通过单击表格标题对表格数据进行排序。

  • 兼容任何框架,如 Bootstrap 5。

使用:

1. 将 RdataTB 的主要 JavaScript 导入文档。

<script src=”./dist/index.js”></script>

2. 只需在现有 HTML 表上初始化 RdataTB 即可。

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Ext.</th>
      <th>City</th>
      <th is-type="date" data-format="YYYY/MM/DD">Start Date</th>
      <th>Completion</th>
    </tr>
  </thead>
  <tbody>
    ...
  </tbody>
</table>
let myDataTable = new RdataTB('myTable');

3. 将 HTML 数据下载为 CSV 文件。

myDataTable.DownloadCSV('fileName');

4. 将 HTML 数据下载为 JSON 文件。

myDataTable.DownloadJSON('fileName');

5. 对特定列进行排序。

myDataTable.sort('columnName');

6. 转到下一页或上一页。

myDataTable.nextItem();
myDataTable.prevItem();

7. 属性。

// 获取JSON格式的表数据
myDataTable.DataTableRaw
 
// 获取所有列名
myDataTable.HeaderDataTable
 
// 获取行中的数据
myDataTable.RowDataTable
 
// 获取数据
myDataTable.DataToRender

官方网站:https://github.com/Rakhmadi/RdataTB

相关热词: RdataTB数据表

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库