用sorttable.js对表格进行排序

页面导航:首页 > 网络编程 > JavaScript > 用sorttable.js对表格进行排序

用sorttable.js对表格进行排序

来源: 作者: 时间:2016-02-04 09:15 【

对表 26684;进行排序的实现步骤:第一:下载sorttable js,链接:http: www kryogenix org code browser sorttable ,(不需要jquery js)第二:导入该sorttable js,(不需要jquery js)第导入:在 table

对表格进行排序的实现步骤:

第一:sorttable.js,链接:www.2cto.com,(不需要jquery.js)

第二:导入该sorttable.js,(不需要jquery.js)

第导入:在 table标签添加一个class="sortable"。

至此,即可实现正反序的排列

如果想不对某列排序,只要在此列的标签加上class="sorttable_nosort"即可。

注意:不支持分页

sorttable高级用法:

1)在页面加载后添加表排序

var newTableObject =document.getElementById(idOfTheTableIJustAdded) ;

sorttable.makeSortable(newTableObject);

 

2)总计行

总计行添加标签,如下图:

 

 

3)列头显示“图标”表示进行排序

table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after { 
    content: " \25B4\25BE" 
}

 

4)使用自定义排序键

在单元格加sorttable_customkey属性,如下图

 

5)手动指定列的类型

在列头标签添加class,值为列类型(sorttable_numeric、sorttable_alpha),如下图

 

6)使用自定义日期格式

添加自定义排序键值的格式为:YYYYMMDDHHMMSS,列如:

sorttable_customkey="20080211131900">February11th 2008, 1:19pm

具体如下图

 

7)稳定排序

row_array.sort(this.sorttable_sortfunction);
sorttable.shaker_sort(row_array, this.sorttable_sortfunction);

8)通过代码排序表

var myTH = document.getElementsByTagName("th")[0];
sorttable.innerSortFunction.apply(myTH, []);

9)使用自己的图表说明可排序的列

添加css如下:

table.sortable th::after, th.sorttable_sorted::after, th.sorttable_sorted_reverse::after {
  content: " ";
  display: inline-block;
  width: 24px;
  height: 24px;
}
th.sorttable_sorted::after {
  background: url(my-sorted-icon.png);
  background-size: contain;
}
th.sorttable_sorted_reverse::after {
  background: url(my-sorted-reversed-icon.png);
  background-size: cover;
}

 

10)使某些列不可排序

添加class="sorttable_nosort"到 列标签

11)在页面加载完成是排序表

sorttable无法实现,实现的方法只能通过查询sql的order by 语句实现。

另一种方法为:sorting a table from your own code

12)第一次排序为降序

需要编辑sorttable.js. 找到如下行:

row_array.sort(this.sorttable_sortfunction);

在这行后面添加如下新行:

row_array.reverse();

13)非敏感字符排序

需要编辑sorttable.js. 找到如下代码:

sort_alpha:function(a,b) {

if (a[0]==b[0]) return 0;

if (a[0]

return 1;

},

并改变为:

 

sort_alpha: function(a,b) {

if (a[0].toLowerCase()==b[0].toLowerCase())return 0;

if (a[0].toLowerCase()

return 1;

},

 

14)添加行号

需要添加如下css:

table.sortable tbody {
    counter-reset: sortabletablescope;
}
table.sortable thead tr::before {
    content: "";
    display: table-cell;
}
table.sortable tbody tr::before {
    content: counter(sortabletablescope);
    counter-increment: sortabletablescope;
    display: table-cell;
}

 

15)为表添加交替斑马线背景

添加如下css:

table.sortable tbody tr:nth-child(2n) td {
  background: #ffcccc;
}
table.sortable tbody tr:nth-child(2n+1) td {
  background: #ccfffff;
}

16)带滚动条的排序表

添加如下css:

/* Appearance */

body, table { font-family: sans-serif; }

table { border-collapse: collapse; }

td, th { padding: 6px; }

th { background: #333; color: white; }

tbody tr:nth-child(odd) { background:#dfdfdf; }

table { border: 1px solid red; }

 

/* Scrollability of table */

table { width: 500px; } /* fixed widthtable */

thead tr { display: block; } /* makes itsizeable */

tbody {

display: block; /* makes it sizeable */

height: 170px; /* height of scrollablearea */

overflow: auto; /* scroll rather thanoverflow */

width: 100%; /* fill the box */

}

thead th { width: 250px; } /* fixed widthfor THs */

tbody td { width: 242px; } /* fixed widthfor TDs */

/* the tbody needs to be 16px less than thethead, for the scrollbar */

 

 

实例如下图所示:

\

 

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<