备注:
tablesorter 将bootstrap的 .table-hover类 导致鼠标触发hover事件 却没有相应的样式被匹配
解决方案 :
在table 加上类 .focus-highlight 并且设置样式
/* bootstrap highlight works */
table.focus-highlight, table.focus-highlight tbody > tr > td,
/* override zebra styling */
table.hover-highlight tbody tr.even > th,
table.hover-highlight tbody tr.even > td,
table.hover-highlight tbody tr.odd > th,
table.hover-highlight tbody tr.odd > td,
table.focus-highlight tbody tr.even > th,
table.focus-highlight tbody tr.even > td,
table.focus-highlight tbody tr.odd > th,
table.focus-highlight tbody tr.odd > td {
background: transparent;
}
实际操作:
a. 下载 jquery.tablesorter.min.js, tablesorter-theme/style.css 并且在页面引入
b.
常用的设置
var setting = {
headers : {0:{ sorter: false}}, // 频闭第1列
1 : {sorter:"integer"}, // 索引从0开始
2 : {sorter:"integer"}, // 第3列按照整数排列
3 : {sorter:"integer"},
4 : {sorter:"integer"},
sortList : [[1,1],[3,0]] // 设置默认排序 第2列倒序,第4列正序
};
eg:
<!DOCTYPE html> <html> <head> <include file="Common@Public/head" /> <script type="text/javascript" src="__JS__jquery.tablesorter.min.js"></script> <link rel="stylesheet" href="__CSS__tablesorter-theme/style.css"> </head> <body> <include file="Common@Public/dhb_info" /> <include file="Common@Public/header" /> <div class="container"> <div id="breadcrumb_box"> <include file="Common@Public/nav" /> </div> </div> <div class="container"> <div class="panel panel-default"> <table class="table table-hover table-bordered tablesorter focus-highlight" id="table_show"> <thead> <tr> <th>field1</th> <th>field2</th> <th>field3</th> <th>field4</th> <th>field5</th> </tr> </thead> <tbody> <?php foreach($show_list as $crawler=>$show) {?> <tr> <td><?= $crawler; ?></td> <td><?= $show['total']; ?></td> <td><?= $show['login_status']; ?></td> <td><?= $show['status']; ?></td> <td><?= $show['status_report']; ?></td> </tr> <?php }?> </tbody> </table> </div> </div> <script type="text/javascript"> $(function () { var setting = { headers : {0:{ sorter: false}}, // 频闭第1列 1 : {sorter:"integer"}, // 索引从0开始 2 : {sorter:"integer"}, // 第3列按照整数排列 3 : {sorter:"integer"}, 4 : {sorter:"integer"}, sortList : [[1,1],[3,0]] // 设置默认排序 第2列倒序,第4列正序 }; $("#table_show").tablesorter(setting); }) </script> </body> </html>
