jquery tablesorter add title/tooltip to show ascending/descending

问题

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

http://tablesorter.com/docs/

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;  }

回答1:

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();

Here is aworking demo.

来源：https://stackoverflow.com/questions/9027508/jquery-tablesorter-add-title-tooltip-to-show-ascending-descending

标签

jquery

image

sorting

html-table

tablesorter