jquery tablesorter add title/tooltip to show ascending/descending

后端 未结 1 529
隐瞒了意图╮
隐瞒了意图╮ 2021-01-21 18:58

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

相关标签:
1条回答
  • 2021-01-21 19:36

    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.

    0 讨论(0)
提交回复
热议问题