文章/答案/技术大牛

发布

社区首页 >问答首页 >JQuery TableSorter-排序箭头不显示

问JQuery TableSorter-排序箭头不显示
EN

Stack Overflow用户

提问于 2014-08-03 13:34:29

回答 1查看 3.7K关注 0票数 0

我知道以前已经回答过几次了，但是没有一个解决方案对我有用。我花了几天的时间试图把箭展示出来，但没有成功。我希望在排序时显示排序箭头和列高亮显示。我的html代码如下：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="theme/style.css" media="print, projection, screen" />
        <script type="text/javascript" src="jquery-2.1.1.min.js"></script> 
        <script type="text/javascript" src="tablesorter/js/jquery.tablesorter.js">    </script>
        <script type="text/javascript" id="js" >
            $(document).ready(function()
                    // call the tablesorter plugin 
                { 
                    $("#myTable").tablesorter({ 
                        // sort on the first column and third column, order asc 
                        sortList: [[0,0],[2,0]] 
                    });  
                }); 

        </script>

    </head>
    <body>
        <table id="myTable" class="tablesorter"> 
            <thead > 
            <tr> 
                <th>Last Name</th> 
                <th>First Name</th> 
                <th>Email</th> 
                <th>Due</th> 
                <th>Web Site</th> 
            </tr> 
            </thead> 
            <tbody> ...

我所链接到的CSS来自以下网站：

/* tables */
table.tablesorter {
font-family:arial;
background-color: #CDCDCD;
margin:10px 0pt 15px;
font-size: 12pt;
width: 100%;
text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
background-color: #e6EEEE;
border: 1px solid #FFF;
font-size: 12pt;
padding: 4px;
}
table.tablesorter th.header {
background-image: url(bg.gif);
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
table.tablesorter tbody td {
color: #3D3D3D;
padding: 4px;
background-color: #FFF;
vertical-align: top;
}
table.tablesorter tbody tr.odd td {
background-color:#F0F0F6;
}
table.tablesorter th.headerSortUp {
background-image: url(asc.gif);
}
table.tablesorter th.headerSortDown {
background-image: url(desc.gif);
}
table.tablesorter th.headerSortDown, table.tablesorter th.headerSortUp {
background-color: #8dbdd8;
}

CSS中引用的所有gif都与它位于同一个文件夹中。我发现当我删除图像显示的.header时，它不会改变，当我点击排序它。这是相当重要的，我把它作为一个项目完成，所以任何帮助你可以给予将非常感谢！

javascript

jquery

html

css

sorting

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-08-03 13:46:28

我只是认为您的CSS类是不正确的，至少这些类不是由tablesorter生成的。

http://jsfiddle.net/thmd6/

table.tablesorter th.tablesorter-headerUnSorted {
    background-image: url('http://tablesorter.com/themes/blue/bg.gif');
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/25105172

复制

相似问题

问JQuery TableSorter-排序箭头不显示
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JQuery TableSorter-排序箭头不显示EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JQuery TableSorter-排序箭头不显示
EN