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

将常规的HTML表格转换为数据表 – js-datatable
栏目分类:表格   发布日期:2021-09-15   浏览次数:

js-datatable 是一个简单易用的 JavaScript 库,可将普通的静态 HTML 表格转换为具有排序、搜索和分页功能的用户友好表格视图。

使用:

1. 将样式表 datatable.css 和 JavaScript datatable.js 插入到文档中。

<!-- 核心 -->
<link rel="stylesheet" href="css/datatable.css" />
<script src="js/datatable.js"></script>
<!-- 本地文件 -->
<script src="js/locales.js"></script>

2. 将data-component="datatable"属性添加到您的 HTML 表并确定您要使用的语言。

<table data-component="datatable" id="example" data-locale="en">
  <thead>
    <tr>
      <th>User code</th>
      <th>Name</th>
      <th>Surname</th>
      <th>Country</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    ...
  </tbody>
</table>

3. 在数据表上启用实时搜索功能。

<table data-component="datatable" id="example" data-locale="en" data-search="true">
  ....
</table>

4. 将您的翻译字符串添加到 locales.js

window.DT_LOCALES["en"] =
{
  SEARCH: "search",
  PER_PAGE: "{NUM} per page",
  SHOWING_TO: "rows {FROM} to {TO} of {SIZE}",
  GOTO_FIRST: "go to page 1",
  GOTO_PREV: "go to previous page",
  GOTO_PAGE: "go to page {NUM}",
  GOTO_NEXT: "go to next page",
  GOTO_LAST: "go to last page",
  ASC_ACTIVE: "ascending order active",
  DESC_ACTIVE: "descending order active",
  NOT_ACTIVE: "not active"
}

官方网站:https://github.com/luverolla/js-datatable

相关热词: js-datatable数据表格

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