JQuery TableSorter-排序箭头不显示

JQuery TableSorter- sorting arrows don't show

本文关键字：显示 TableSorter- 排序 JQuery      更新时间：2023-09-26

我知道这个问题之前已经回答过几次了，但是没有一个解决方案适合我。我花了几天时间试图让箭头显示没有成功。我想显示排序箭头和列在排序时的高亮显示。我的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的图像显示，但它不会改变，当我点击排序它。这是相当重要的，我得到这个作为一个项目，所以任何帮助你可以给将非常感激!!

我只是觉得你的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;
}
相关文章：