Задача JQuery tablesorter

У меня возникает пара проблем с плагином JQuery tablesorter. Если вы нажмете на заголовок столбца, он должен отсортировать данные по этому столбцу, но есть несколько проблем:

  • Строки не сортируются правильно (1, 1, 2183, 236)
  • Общая строка включена в сортировку

Что касается (2), я не могу легко переместить общую строку в нижний колонтитул таблицы, потому что HTML генерируется displaytag, над которыми я ограниченным контролем.

Что касается (1), я не понимаю, почему сортировка не работает, поскольку я использовал точно такой же JavaScript, показанный в простейшем примере в tablesorter.

На самом деле существует только одна строка JS-кода, которая:

<body onload="jQuery('#communityStats').tablesorter();">

Спасибо заранее, Дон

Ответы

Ответ 1

Первая проблема связана с тем, что сортировщик таблицы автоматически определяет столбец в "текстовый столбец" (возможно, из-за пустых ячеек). Чтобы решить эту проблему, используйте этот код для инициализации tablesorter и установите все поле в любую цифру или валюту в зависимости от данных:

<script type="text/javascript" >
jQuery(document).ready(function() 
{ 
    jQuery("#communityStats").tablesorter({ 
        headers: { 2: { sorter:'digit' } , 
                   3: { sorter:'digit' } ,
                   4: { sorter:'digit' } ,
                   5: { sorter:'digit' } ,
                   6: { sorter:'digit' } ,
                   7: { sorter:'digit' } ,
                   8: { sorter:'currency' } ,
                   9: { sorter:'currency' } ,
                   10: { sorter:'currency' } ,
                   11: { sorter:'currency' } 
                 } 
    }); 
});
</script>

Ответ 2

Я бы предложил использовать Javascript для удаления последней строки из таблицы. Добавьте нижний колонтитул, а затем снова добавьте удаленную строку из таблицы. Чтобы решить проблему с пустыми данными в числовой ячейке, вам может потребоваться добавить собственный настраиваемый парсер.

   $(function() {
       $('#communityStats').append("<tfoot></tfoot>");
       $('#communityStats > tr:last').remove()
                                     .appendTo('#communityStats > tfoot');
       $('#communityStats').tablesorter();
   });

Ответ 3

Я думаю, что ответ на # 1 заключается в том, что у вас есть пустые поля для некоторых числовых столбцов, заставляя tablesorter обнаруживать этот столбец как столбец "строка".

Ответ 4

  • Пустые поля могут быть проблемой (например, они не являются 0), попробуйте использовать настраиваемый парсер, который удаляет любые нечисловые значения и присваивает значения целым числам (пример: http://paste.pocoo.org/show/90863/)

  • Поместите свою "общую" строку внутри <tfoot> </TFOOT> тег прямо перед концом таблицы

Ответ 5

Я обнаружил, что следующее будет работать с нераспознанными числовыми (цифрами) столбцами. Похоже, что 0 считается текстом текущей версии (2.0.3) tablesorter.

Включая образец из tvanfosson, этот script в нижней части вашей страницы переместит вашу последнюю строку из нижнего колонтитула, что предотвратит ее сортировку с данными внутри тела и заставит сортировщика использовать числовую сортировку, а не текст, который он использует, как описано.

$(document).ready(function() {
  $('#communityStats').append("<tfoot></tfoot>");
  $('#communityStats > tr:last').remove()
    .appendTo('#communityStats > tfoot');

  $("#communityStats").tablesorter({
     debug: true,
     headers: { 
       0:{sorter: 'digit'}
       ...
       10:{sorter: 'digit'}
     }
  });

});

Ответ 6

фиксированный заголовок для плагина tablesorter:

CSS

table.tablesorter thead {
position: fixed;
top: 35px; // 
}

JS

function tableFixedHeader() {
   var tdUnit = $('.tablesorter tbody tr:first').children('td').length;
   for(var i=0;i<tdUnit; i++) {
     $('.tablesorter thead th').eq(i).width($('.tablesorter tbody td').eq(i).width());
   }
   $('.tablesorter').css('margin-top',$('.tablesorter thead').height()); 
}

HTML

<div id="container">
   <div id="topmenu" style="height:35px;">some buttons</div>
   <div id="tablelist" style="width:100%;overflow:auto;">
      <table class="tablesorterw">.....</table>
   </div>
</div>