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

JQuery表格排序插件tableSort

来源:易助科技网浏览量:15收藏

简介


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>



相关链接


在线演示 :https://www.jq22.com/yanshi7356

GitHub 地址 :https://github.com/kylefox/jquery-tablesort