2016-04-06 2 views
1

Я пытаюсь использовать tablesorter-plugin для сортировки таблицы, состоящей из строк, где последняя ячейка охватывает несколько столбцов.tablesorter td-colspan in tbody

В разделительной колонке есть внутренняя таблица, в которой хранятся несколько ячеек и скрытые строки (строки). При ответе таблицы сортировки таблицы 1 на столбец 1, ответ заголовка таблицы 2 на столбец 2 и заголовок таблицы 3 откликают остовную колонку, а textExtraction сортирует остовную колонку. Но есть больше заголовков таблиц, и они должны сортироваться по внутреннему столу, а не по следующему столбцу.

Я сделал небольшой пример здесь: http://jsfiddle.net/frankmyhre/aoLgu7f9/

$('table').tablesorter({ 
    textExtraction: { 
     1: function(node){ return $(node).find('.cell1').eq(0).text(); }, 
     2: function(node){ return $(node).find('.cell2').eq(0).text(); } 
    } 
}); 

Чтобы упростить его, это то, что я пытаюсь получить (от скрипки):

«Имя» -header сортирует имя-столбец (столбец 0)
«Телефон» -header сортирует остовную колонку (столбец 1), оценивая значение первого появления класса cell1
Тип «Тип» остовная колонка (столбец 1) b у, глядя на значение первого совпадения CELL2 класса

+0

В настоящее время, если в 'tbody' встречается' colspan', tablesorter использует параметр ['duplicateSpan'] (http://mottie.github.io/tablesorter/docs/#duplicatespan), чтобы установить эту ячейку значение равно для всех охватываемых ячеек или пустую строку. Мне нужно будет обновить функцию, чтобы вместо этого вызвать функцию textExtraction. – Mottie

ответ

0

развилка TableSorter было обновление, чтобы использовать функцию textExtraction если установить вместо установки значения ячейки в пустую строку, если параметр duplicateSpan установлен в false (docs), но это изменение доступно только в основной ветке репозитория и должно быть выпущено с версией 2.25.8.

Таким образом, вы можете сделать это (demo, используя this file):

$('table').tablesorter({ 
    debug: true, 
    duplicateSpan: false, 
    textExtraction: function(node, table, cellIndex) { 
    if (cellIndex > 0) { 
     // this works because cell1 and cell2 match the table 
     // column zero-based index 
     return $(node).find('.cell' + cellIndex).eq(0).text(); 
    } 
    return node.textContent; 
    } 
}); 

Примечания: этот метод использует функцию textExtraction, чтобы захватить данные с первым CELL1 или CELL2, поэтому клетка с «домами» является игнорируя содержание «клуба» и «офиса». Если вы хотите включить что то изменить функцию следующим образом (demo):

$('table').tablesorter({ 
    duplicateSpan: false, 
    textExtraction: function(node, table, cellIndex) { 
    if (cellIndex > 0) { 
     // this works because cell1 and cell2 match the table 
     // column zero-based index 
     var txt = ''; 
     $(node).find('.cell' + cellIndex).each(function(){ 
     txt += this.textContent + ' '; 
     }); 
     return txt; 
    } 
    return node.textContent; 
    } 
}); 

Примечание 2: опция debug в демоса true, так что вы можете посмотреть на консоли и увидеть разницу в этих двух функций.

+0

Эй, мотик, спасибо за отличный ответ, он отлично работал. Я попробовал добавить дополнительный столбец в таблицу (не во вложенной) и думал, что это сработает, если я изменил индекс с 0 на 1, но он сортирует только первый (ID) и третий (столбец), см. Http://jsfiddle.net/frankmyhre/aoLgu7f9/. В отладке я могу видеть, что если я добавлю ID-столбец, столбца типа нет. – frankmyhre

+0

Названия классов «cell1» и «cell2» должны соответствовать столбцу, в котором они находятся, поэтому измените эти классы на «cell2» и «cell3» соответственно - [demo] (http://jsfiddle.net/Mottie/aoLgu7f9/ 23 /). – Mottie

+0

Фантастическая Мотти, спасибо. И спасибо вам за отличные примеры, которые вы сделали для плагина tablesorter-plugin – frankmyhre

Смежные вопросы