jquery tablesorter添加标题/工具提示以显示升序/降序 [英] jquery tablesorter add title/tooltip to show ascending/descending

问题描述

我正在使用jquery tablesorter。我有一个像这样的表：

I am using jquery tablesorter. I have a table like the one here:

http：// tablesorter.com/docs/

除非我希望每个列标题在用鼠标悬停时都有标题/工具提示。例如，名字的默认标题是按名字排序，然后它将变为按升序排序或按降序排序，依此类推。我怎么能这样做，因为图像是在头部图像的CSS中而不是在每一个上设置？

Except I want the column headers to each have a title/tooltip when they are hovered over with the mouse. For example the default title for first name would be "sort by first name" and then it would change to either "sort ascending first name" or "sort descending first name" and so on for each th. How can I do this since the image is in the css for header image and not set on each th?

table.tablesorter thead tr .headerSortDown {          background-image: url(desc.gif);  } 
table.tablesorter thead tr .headerSortUp {          background-image: url(asc.gif);  } 
table.tablesorter thead tr .header {          background-image: url(bg.gif);          background-    repeat: no-repeat;          background-position: center right;          cursor: pointer;  } 

推荐答案

这就是我要做的...使用要添加的文本为每个标题单元格设置数据标题。但是，我们不会说by，ascending或descending，而是使用名为{dir}的可替换变量作为方向：

This is how I would do it... set up a data-title for each header cell with the text you want to add. But instead of saying "by", "ascending" or "descending", we'll use a replacable variable named "{dir}" for direction:

<table class="tablesorter">
     <thead>
         <tr>
             <th data-title="sort {dir} last name">Last</th>
             <th data-title="sort {dir} first name">First</th>
         </tr>
     </thead>
     <tbody>
         <tr><td>Smith</td><td>John</td></tr>
         <tr><td>Jones</td><td>Timothy</td></tr>
         <tr><td>Wong</td><td>Jin</td></tr>
         <tr><td>O'Brien</td><td>Shaun</td></tr>
         <tr><td>Parker</td><td>Peter</td></tr>        
     </tbody>
 </table>

然后我们添加一个函数来遍历每个表头单元格并根据类名更新标题它找到了。调用它，并确保在每个表格排序完成后调用它。

Then we add a function to go through each table header cell and update the title based on what class name it finds. Call it, and also make sure it is called after each table sort has completed.

var table = $('table'),

    updateTitles = function(){
        var t, $this;
        table.find('thead th').each(function(){
            $this = $(this);
            t = "by";
            if ($this.hasClass('headerSortUp')) {
                t = "ascending";
            } else if ($this.hasClass('headerSortDown')) {
                t = "descending";
            }
            $this.attr('title', $this.attr('data-title').replace(/\{dir\}/, t) );
        });
    };

table.tablesorter();

// bind to sort events 
table.bind("sortEnd",function() { 
    updateTitles(); 
});
// set up titles
updateTitles();

这是工作演示。

这篇关于jquery tablesorter添加标题/工具提示以显示升序/降序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！