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

JavaScript中的简易表格分页器和过滤器 - ECJSTable
栏目分类:表格   发布日期:2021-09-22   浏览次数:

一个简单快速的 JavaScript 库,用于对 HTML 表格中的表格数据进行分页和过滤。

使用:

1. 在表格底部添加一个pager 元素。

<table id="easy-table">
  您的表格数据
</table>
<div id="paginator"></div>

2. 创建一个文本字段来过滤表格数据。

<input type="text" onkeyup="filter(event)" />

3. 在 JS 对象数组中准备表格数据。

[
    {
        "id": 0,
        "name": "Carl",
        "last_name": "Morrison",
        "country": "England",
        "age": 13
    },
    {
        "id": 1,
        "name": "Peter",
        "last_name": "Kane",
        "country": "Canada",
        "age": 22
    },
    {
        "id": 2,
        "name": "Anne",
        "last_name": "Thompson",
        "country": "Spain",
        "age": 89
    },
    // ...
]

4. 在页面上包含主脚本。

<script src="js/script.js"></script>

5. 初始化 ECJSTable 并用您刚刚定义的数据填充表。

const options = {
      // table ID
      tableId:'easy-table',
      // Initial Page
      currentPage:1,
      // Number of pages
      perPage:10,
      // Auto show headers
      autoHeaders:true,
      // Custom text
      arrowUp:'⇑',
      arrowDown:'⇓',
      previousText:'&#10094',
      nextText:'&#10095',
  }
setTable(data, options);

6. 自定义分页链接。

.paginator-button {
  margin: 5px;
}

官方网站:https://github.com/freddy-cn/ecjstable

相关热词: ecjstable表格

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