Question

我知道这已经回答了几次，但没有一个解决方案适合我。我花了几天试图让箭头显示没有成功。我想在排序时显示排序箭头和列高亮显示。我的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是来自以下网站的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图片时，我发现当我点击进行排序时它不会改变。这是非常重要的，我把它作为一个项目完成，所以任何帮助你都会非常感谢!!

Answer 1

我认为你的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;
}

JQuery TableSorter-排序箭头不显示

1 个答案: