tablesorter 页面不需要刷新情况下的js 神器

来源：互联网发布：中国二手房房价数据库编辑：程序博客网时间：2024/06/06 00:33

参考链接 https://mottie.github.io/tablesorter/docs/example-css-highlighting.html

https://mottie.github.io/tablesorter/docs/

备注:

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 并且在页面引入

常用的设置

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>

阅读全文

0 0