JQuery表格排序插件tableSort

来源：易助科技网浏览量：11收藏

简介

tableSort是一款JQuery表格排序插件，是专门针对表格<table>中的各列<td>以动画效果进行排序，排序形式包括正则匹配、按字母排序、ASCII或数值，无论选择哪种排序形式，在表格中，都以动画的形式展示排序过程，效果非常好。

（附件中下载的文件带DEMO）

参数说明：

onCol:0,
//表示排序列的索引号，该值初始值为0

keepRelationships:true,
//表示在选中列排序时，除该列之外的其余列的顺序是否要随之改变

sortDesc:true,
//表示排序的方式，如果为true,表示按降序排列，否则按升序排列

“regexp”:null,
//用于排序的正则表达式，其中用于排序部分由”regexpIndex”属性决定，默认值为null

“regexpIndex”:0,
//决定用于排序正则表达式的索引号，默认值为0

“child”:’#id’,
//用于排序的子元素内容，即按子元素中的<td>内容排序，而不是父元素中的<td>内容

“sortType”:numeric,
//排序时的类型，如”numeric”表示按照数字类型排序，默认按”ascii”类型排序

属性

tablesort.$table 			// The <table> being sorted.
tablesort.$th					// The <th> currently sorted by (null if unsorted).
tablesort.index				// The column index of tablesort.$th (or null).
tablesort.direction		// The direction of the current sort, either 'asc' or 'desc' (or null if unsorted).
tablesort.settings		// Settings for this instance (see below).

方法

// Sorts by the specified column and, optionally, direction ('asc' or 'desc').
// If direction is omitted, the reverse of the current direction is used.
tablesort.sort(th, direction);

tablesort.destroy();

使用

1. 引入 jquery.js 和 jquery.tableSort.js 文件

2. HTML

<div id="tip">默认无排列规则</div>
<table id="tbStudent" class="table">
  <tr>
    <th><a href="javascript:">编号</a></th>
    <th><a href="javascript:">姓名</a></th>
    <th><a href="javascript:">性别</a></th>
    <th><a href="javascript:">总分</a></th>
  </tr>
  
  <tr>
    <td>1031</td>
    <td>李渊</td>
    <td>男</td>
    <td>654</td>
  </tr>
  
  <tr>
    <td>1021</td>
    <td>张扬</td>
    <td>男</td>
    <td>624</td>
  </tr>
  
  <tr>
    <td>1011</td>
    <td>吴敏</td>
    <td>女</td>
    <td>632</td>
  </tr>
  
  <tr>
    <td>1026</td>
    <td>李小明</td>
    <td>男</td>
    <td>610</td>
  </tr>
  
  <tr>
    <td>1016</td>
    <td>周谨</td>
    <td>女</td>
    <td>690</td>
  </tr>
  
  <tr>
    <td>1041</td>
    <td>谢小敏</td>
    <td>女</td>
    <td>632</td>
  </tr>
  
  <tr>
    <td>1072</td>
    <td>刘明明</td>
    <td>男</td>
    <td>633</td>
  </tr>
  
  <tr>
    <td>1063</td>
    <td>蒋忠公</td>
    <td>男</td>
    <td>675</td>
  </tr>
  
</table>

[CSS]
<style>
#tip{border:solid 1px #ccc;	width:358px; margin:0 auto;height:21px;padding:2px 10px;background-color:#eee; font-size:12px;text-align:center;margin-bottom:10px;}
.table  {width:380px;margin:0 auto;border-collapse: collapse;text-align:center;}
.table tr td, .table tr th  {background: #fff; border: solid 1px #666;color: #666;height:30px;line-height:30px;}
.table tr th  {background: #ccc;color: #666;text-align: center;font-size:14px;}
.table a,.table a:visited {color:#666;text-decoration:none}
.table a:hover,.table a:active {color:#fff;	text-decoration:none}
</style>

3. 调用

1) 基本用法

在要进行排序的表上调用适当的方法，单击列标题时，将对表进行排序。

$('table').tablesort();

如果你想要一些无图像箭头来指示排序，只需将其添加到你的CSS中：

th.sorted.ascending:after {
	content: "  \2191";
}

th.sorted.descending:after {
	content: " \2193";
}

2) 定义自定义排序函数：如果您有特殊的要求（或者不想像上面的例子那样打乱标记），您可以很容易地挂接自己的函数，该函数确定给定单元格的排序值。自定义排序函数使用data（）附加到＜th＞元素，用于确定该列中所有单元格的排序值：

// Sort by dates in YYYY-MM-DD format
$('thead th.date').data('sortBy', function(th, td, tablesort) {
	return new Date(td.text());
});

// Sort hex values, ie: "FF0066":
$('thead th.hex').data('sortBy', function(th, td, tablesort) {
	return parseInt(td.text(), 16);
});

// Sort by an arbitrary object, ie: a Backbone model:
$('thead th.personID').data('sortBy', function(th, td, tablesort) {
	return App.People.get(td.text());
});

排序函数传递三个参数：

(1) 正在排序的<th>

(2) 需要当前排序值的<td>

(3) tablesort实例

3) 自定义比较函数。如果需要实现更高级的排序逻辑，可以使用compare设置指定一个比较函数。该函数的工作方式与Array.prototype.sort（）接受的compareFunction相同：

function compare(a, b) {
  if (a < b) {
    return -1;		// `a` is less than `b` by some ordering criterion
  }
  if (a > b) {
    return 1;			// `a` is greater than `b` by the ordering criterion
  }

  return 0;				// `a` is equal to `b`
}

4) 事件。正在排序的<table>元素“tablesort:start”和“tablesorp:complete”会触发以下事件。事件和表排序实例作为参数传递：

$('table').on('tablesort:start', function(event, tablesort) {
	console.log("Starting the sort...");
});

$('table').on('tablesort:complete', function(event, tablesort) {
	console.log("Sort finished!");
});

5) tablesort 实例。可以通过查询数据对象来检索表的tablesort实例：

$('table').tablesort();
// Make the table sortable.

var tablesort = $('table').data('tablesort'); 
// Get a reference to it's tablesort instance

6) 用法举例：

<script type="text/javascript">
  $(function() {
    var $tb = $("#tbStudent");
    var $tip = $("#tip");
    var $bln = true;
    var $str = "降";
    
    //遍历table标题中的a元素
    $(".table tr th a").each(function(i) {
      $(this).bind("click", function() {
        $bln = $bln ? false : true;
        $str = $bln ? "降" : "升";
        $tip.show().html("当前按 <b>" +
        $(this).html() + $str + "序</b> 排列");
        $tb.sortTable({
          onCol: i + 1,
          keepRelationships: true,
          sortDesc: $bln
        });
      });
    });
  });
</script>

建站资源下载详情

为您免费提供多种建站资源下载，包括网站模板下载、前端插件下载和字体下载！您只需注册为会员即可任意下载！

JQuery表格排序插件tableSort

简介

使用

1. 引入 jquery.js 和 jquery.tableSort.js 文件

2. HTML

3. 调用

相关链接