jQuery TableSorter добавить заголовок / всплывающую подсказку, чтобы показать возрастание / убывание - PullRequest
Новая
       20

jQuery TableSorter добавить заголовок / всплывающую подсказку, чтобы показать возрастание / убывание

2 голосов
/ 27 января 2012

Я использую JQuery TableSorter.У меня есть таблица, подобная приведенной ниже:

http://tablesorter.com/docs/

За исключением того, что я хочу, чтобы заголовки столбцов имели заголовок / всплывающую подсказку при наведении курсора мышиНапример, заголовок по умолчанию для имени будет «сортировать по имени», а затем он будет меняться на «сортировать по возрастанию имени» или «сортировать по убыванию имени» и так далее для каждого элемента.Как я могу это сделать, так как изображение находится в css для изображения заголовка и не установлено на каждом 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 Ответ

1 голос
/ 27 января 2012

Вот как я бы это сделал ... установить заголовок данных для каждой ячейки заголовка с текстом, который вы хотите добавить. Но вместо того, чтобы говорить «по», «по возрастанию» или «по убыванию», мы будем использовать заменяемую переменную с именем «{dir}» для направления: 

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

Затем мы добавляем функцию, которая просматривает каждую ячейку заголовка таблицы и обновляет заголовок в зависимости от того, какое имя класса он находит. Вызовите его, а также убедитесь, что он вызывается после каждой сортировки таблицы. 

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

Вот демоверсия .

...