jQuery实现任意列表或表格的排序

本篇文章介绍了jquery实现表格的排序方法与主要思路，相信会对大家有所帮助，下面就跟小编一起来看看吧

主要思路：

因为JS有SORT的方法，对数组进行排序，那么通过个方法，我们就会想到数组了。

1.点标表格标头的时候，取出点击的是那一列。即列的索引值。因为下面要进行排序的就是该列。所以我要知道是点的那一列。

2.对表格的数据部分，也就是tbody部分，进行点击的列的取值，把这些值存入到一个数组当中。

3.将存入数据的数组，通过SORT方法进行排序。（这里写了两种，升，或降，因为是点击时要切换排序的方式。第一次降，第二次升，第三降，第四升，依次进行）

4.将排序好的数组的值进行遍历，在遍历过程中，和每一行TR的点击列的那个TD当中的数据进行一个比较。如果相等，就插入到tbody的最后去.（最先插入的，将是在第一行。）

代码如下

<table>
  <thead>
    <tr>
      <th>head1</th>
      <th>head2</th>
      <th>head3</th>
      <th>head4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>b</td>
      <td>300</td>
      <td>你好</td>
    </tr>
    <tr>
      <td>3</td>
      <td>a</td>
      <td>100</td>
      <td>第一弹</td>
    </tr>
    <tr>
      <td>2</td>
      <td>c</td>
      <td>300</td>
      <td>斯干</td>
    </tr>
  </tbody>
</table>


$(document).on('click', 'th', function() {  //监视表头点击
  var table = $(this).parents('table');   //点击表头时，取得表格的<table>元素
  var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()));  //找到<tbody>中所有<tr>，并排序;（$(this).index()获取点击列的列序号）
  this.asc = !this.asc; //每次点击反向排序
  if (this.asc) {   //默认首次点击逆序排列
    rows = rows.reverse();  //排序后<tr>替换原始<tr>
  }
  table.children('tbody').empty().html(rows);
});
function comparer(index) {
  return function(a, b) {
    var valA = getCellValue(a, index),  //得到本<tr>的第index列的值
      valB = getCellValue(b, index);
    return $.isNumeric(valA) && $.isNumeric(valB) ?
      valA - valB : valA.localeCompare(valB);   //可对数字和字符串进行排序，以相减的值进行排序；（数字以数值大小排序，字符串先转为数值型再按数值型排序）
  };
}
function getCellValue(row, index) {
    //取得row行index列的值
    return $(row).children('td').eq(index).text();    //从row行find第index列的值
}

以上这篇jquery实现任意列表或表格的排序就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持芦苇派。