分享一个自己写的table表格排序js插件(高效简洁)

以下是“分享一个自己写的table表格排序js插件(高效简洁)”的完整攻略。

简介

这个table表格排序js插件是基于原生JS编写的，能够高效、简洁地为网页中的table表格添加排序功能。插件使用方便，只需要在HTML中添加相应的class和data-属性即可，不需要引入其他框架或库。

使用方法

引入插件

首先，需要在HTML中引入插件的JS文件：

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

编写table表格

然后，需要在HTML中定义相应的table表格。在table标签中添加class="sortable"和data-sortable属性，data-sortable属性的值为排序的列（从0开始计数），如下所示：

<table class="sortable">
  <tr>
    <th data-sortable="0">ID</th>
    <th data-sortable="1">Name</th>
    <th data-sortable="2">Age</th>
  </tr>
  <tr>
    <td>1</td>
    <td>John</td>
    <td>25</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Jane</td>
    <td>30</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Bob</td>
    <td>20</td>
  </tr>
</table>

这个表格中，每个th标签都增加了data-sortable属性，data-sortable的值代表可以根据哪个列进行排序。

初始化插件

最后，在JS中初始化插件，使用以下代码：

var table = new tableSort('.sortable');

以上代码中，tableSort()函数的参数是表格的class。

示例说明

下面是两个示例说明，以更好地展示这个插件的使用方法和效果。

示例1：按ID排序

下面是一个按ID排序的示例。当点击ID这一列的表头时，表格中的行将按照ID从小到大排列。

<table class="sortable">
  <tr>
    <th data-sortable="0">ID</th>
    <th data-sortable="1">Name</th>
    <th data-sortable="2">Age</th>
  </tr>
  <tr>
    <td>2</td>
    <td>Jane</td>
    <td>30</td>
  </tr>
  <tr>
    <td>1</td>
    <td>John</td>
    <td>25</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Bob</td>
    <td>20</td>
  </tr>
</table>

示例2：按Age排序

下面是一个按Age排序的示例。当点击Age这一列的表头时，表格中的行将按照Age从小到大排列。

<table class="sortable">
  <tr>
    <th data-sortable="0">ID</th>
    <th data-sortable="1">Name</th>
    <th data-sortable="2">Age</th>
  </tr>
  <tr>
    <td>3</td>
    <td>Bob</td>
    <td>20</td>
  </tr>
  <tr>
    <td>1</td>
    <td>John</td>
    <td>25</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Jane</td>
    <td>30</td>
  </tr>
</table>

总结

通过这个table表格排序js插件，可以方便地对table表格进行排序，使其更加易于阅读和理解。插件代码高效、简洁，易于使用和维护。希望本攻略对大家有所帮助。