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

最新推荐文章于 2023-03-30 17:41:05 发布

cominglately

最新推荐文章于 2023-03-30 17:41:05 发布

阅读量347

点赞数

分类专栏： web 文章标签： web javascript

本文链接：https://blog.csdn.net/cominglately/article/details/78366389

版权

web 专栏收录该内容

135 篇文章 1 订阅

订阅专栏

参考链接 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>

cominglately

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
tablesorter 页面不需要刷新情况下的js 神器

参考链接 https://mottie.github.io/tablesorter/docs/example-css-highlighting.html https://mottie.github.io/tablesorter/docs/备注:tablesorter 将bootstrap的 .table-hover类导致鼠标触发hover事件
复制链接

扫一扫

专栏目录