2008-11-19 4 views
16

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

  1. Строка не отсортирована (1, 1, 2183, 236)
  2. общая строка включена в то

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

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

В самом деле, есть только одна строка JS кода, который является:

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

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

ответ

2

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

+0

-1 не имеет решения, предназначенных для явного указания метода сортировки. см. мой ответ. – 2009-06-09 04:21:09

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

  2. Поместите «общие 'строка внутри <TFOOT> </TFOOT > тег непосредственно перед концом стола

8

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

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

-1 это очень kloodgy решение – 2009-06-09 04:19:59

+7

Но оно отвечает требованиям и не полагается на изменения на стороне сервера, которые OP указывает, что невозможно сделать. – tvanfosson 2009-06-09 11:59:30

+1

@tvanfosson true. голос удален – 2009-06-09 13:11:44

23

Первая проблема связана с тем, что таблица сортировщик автоматически определяет столбец в «text'-колонки (вероятно, потому что пустые клетки). Для того, чтобы решить эту использовать этот код для инициализации 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> 
0

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

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

$(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'} 
    } 
    }); 

}); 
0

фиксированный заголовок для 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>