一实用的实现table排序的Javascript类库

我们来讲解一下如何实现table排序的Javascript类库。

概述

在网页中经常会用到表格（table），而对于一大堆数据，我们需要以某种特定的方式来进行排序，这时候就需要一个table排序的Javascript类库。下面，我们将通过一个简单的示例来讲解如何使用该类库实现排序功能。

准备工作

我们需要在HTML页面中引入jQuery框架以及js库文件sorttable.js，引入方法为：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="./sorttable.js"></script>

使用方法

在HTML文件中，我们需要定义一个table，并给它附加一个id，如下所示：

<table class="table table-striped" id="mytable">
      <thead>
        <tr>
          <th scope="col">ID</th>
          <th scope="col">Name</th>
          <th scope="col">Age</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>3</td>
          <td>John</td>
          <td>32</td>
        </tr>
        <tr>
          <td>1</td>
          <td>Bob</td>
          <td>25</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Kate</td>
          <td>40</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Lisa</td>
          <td>28</td>
        </tr>
      </tbody>
 </table>

在我们想要进行排序的列上加上 class="sorttable" 属性，这表明该列可以被排序。例如，我们想要以姓名为关键字进行排序，则该列会形如：

<th scope="col" class="sorttable">Name</th>

接着，在表格的最后一行新增一行，作为排序的按钮：

<tr class="sorter">
    <td><button class="btn btn-primary active" onclick="sortTable()">Sort</button></td>
    <td><select onchange="sortTable()"><option value="1">升序</option><option value="-1">降序</option></select></td>
    <td colspan="4"> </td>
</tr>

其中，第一个 <td> 中是排序的按钮，点击按钮，表格将会按照点击的列进行排序，如果是相同的列，则进行升序或降序；第二个 <td> 是升序和降序的选择；后面两个 <td> 用于让表格看上去整洁一些。

在JavaScript中，我们需要定义一个排序函数，用于对表格进行排序，函数如下所示：

function sortTable(){
  var table = $('#mytable');
  var tbody = table.find('tbody');
  var rows = tbody.find('tr');
  rows.sort(function(a, b) {
      var sortableElements = [parseInt($(a).find('.sorttable').text()),$(a).find('.sorttable').text(),parseInt($(a).find('.sorttable').text())];
      var bSortableElements = [parseInt($(b).find('.sorttable').text()),$(b).find('.sorttable').text(),parseInt($(b).find('.sorttable').text())];
      var index = $(a).parent().find('.sorttable').index($(a).find('.sorttable'));

      if (sortableElements[index] < bSortableElements[index]) {
          return -1 * $('select').val();    // 降序
      } else {
          return 1 * $('select').val();    // 升序
      }
  });

  rows.each(function(i, tr) {
      tbody.append(tr);
  });
}

这个函数通过表格的id获取表格元素，然后获取表格中每一个可以被排序的行元素（即 class="sorttable"），对这些行元素进行排序。这里使用了一个排序算法，其核心便是通过比较获取到的行元素中与排序列对应的内容进行排序。

示例

我们通过两个示例，来演示一下table排序的Javascript类库的使用（还是以上面的表格为例）：

示例一

首先，我们只需要在HTML页面中引入jQuery框架以及sorttable.js：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="./sorttable.js"></script>

接着，我们定义一个table，并给它加上一个id：

<table class="table table-striped" id="mytable">
      <thead>
        <tr>
          <th scope="col">ID</th>
          <th scope="col" class="sorttable">Name</th>
          <th scope="col">Age</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>3</td>
          <td>John</td>
          <td>32</td>
        </tr>
        <tr>
          <td>1</td>
          <td>Bob</td>
          <td>25</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Kate</td>
          <td>40</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Lisa</td>
          <td>28</td>
        </tr>
      </tbody>
 </table>

接着，在表格的最后一行新增一行，作为排序的按钮：

<tr class="sorter">
    <td><button class="btn btn-primary active" onclick="sortTable()">Sort</button></td>
    <td><select onchange="sortTable()"><option value="1">升序</option><option value="-1">降序</option></select></td>
    <td colspan="4"> </td>
</tr>

最后，在JavaScript中，我们定义一个排序函数，如下所示：

function sortTable(){
  var table = $('#mytable');
  var tbody = table.find('tbody');
  var rows = tbody.find('tr');
  rows.sort(function(a, b) {
      var sortableElements = [parseInt($(a).find('.sorttable').text()),$(a).find('.sorttable').text(),parseInt($(a).find('.sorttable').text())];
      var bSortableElements = [parseInt($(b).find('.sorttable').text()),$(b).find('.sorttable').text(),parseInt($(b).find('.sorttable').text())];
      var index = $(a).parent().find('.sorttable').index($(a).find('.sorttable'));

      if (sortableElements[index] < bSortableElements[index]) {
          return -1 * $('select').val();    // 降序
      } else {
          return 1 * $('select').val();    // 升序
      }
  });

  rows.each(function(i, tr) {
      tbody.append(tr);
  });
}

此时，我们就可以对表格进行排序了。

示例二

接着，在HTML页面中继续引入sorttable_pagination.js：

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

接着，我们需要在HTML文件中定义一个div，用作分页控件：

<div class="sorttable-pager">
    <a href="javascript:void(0)" onclick="currentPage=1;showPage(currentPage)">1</a> 
    <a href="javascript:void(0)" onclick="currentPage=2;showPage(currentPage)">2</a> 
    <a href="javascript:void(0)" onclick="currentPage=3;showPage(currentPage)">3</a> 
    <a href="javascript:void(0)" onclick="currentPage=4;showPage(currentPage)">4</a>
</div>

在JavaScript中，新增一个方法，用于分页显示：

var itemPerPage = 2; 
var currentPage = 1; 

function showPage(page){ 
    if(typeof page != "number"){
        page = 1;
    }else if(page < 1){
        page = 1;
    }
    var startIndex = (page -1) * itemPerPage;
    var endIndex = startIndex + itemPerPage;
    var $rows = $('#mytable tbody tr');
    $rows.hide();
    $rows.slice(startIndex,endIndex).show();
    $('div.sorttable-pager a').removeClass('active');
    $('div.sorttable-pager a').eq(page-1).addClass('active');
}

其中，itemPerPage 表示每页显示的条目数，currentPage表示当前页编号，showPage(page) 方法是分页显示的核心方法。

最后，我们在排序函数中加入分页控制代码：

function sortTable(){
  var table = $('#mytable');
  var tbody = table.find('tbody');
  var rows = tbody.find('tr');
  rows.sort(function(a, b) {
      var sortableElements = [parseInt($(a).find('.sorttable').text()),$(a).find('.sorttable').text(),parseInt($(a).find('.sorttable').text())];
      var bSortableElements = [parseInt($(b).find('.sorttable').text()),$(b).find('.sorttable').text(),parseInt($(b).find('.sorttable').text())];
      var index = $(a).parent().find('.sorttable').index($(a).find('.sorttable'));

      if (sortableElements[index] < bSortableElements[index]) {
          return -1 * $('select').val();    // 降序
      } else {
          return 1 * $('select').val();    // 升序
      }
  });

  rows.each(function(i, tr) {
      tbody.append(tr);
  });

  showPage(1);
  $('div.sorttable-pager a').removeClass('active');
  $('div.sorttable-pager a').eq(0).addClass('active'); 
}

此时，在我们对表格进行排序后，就可以自动进行分页显示了。

以上就是一实用的实现table排序的Javascript类库的完整攻略，希望对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：一实用的实现table排序的Javascript类库 - Python技术站

一实用的实现table排序的Javascript类库

概述

准备工作

使用方法

示例

示例一

示例二

相关文章