2016-11-26 2 views
0

Я использую этот JQuery код для добавления сортировки (изменение порядка на основе значений в столбце) функциональности таблиц:Как сортировать строки таблицы, когда ячейки содержат вложенные таблицы?

$('th.sortBy').click(function(){ 
    var table = $(this).parents('table').eq(0); 
    var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index())); 
    this.asc = !this.asc; 
    if (!this.asc){rows = rows.reverse()}; 
    for (var i = 0; i < rows.length; i++){table.append(rows[i])}; 
}); 

function comparer(index) { 
    return function(a, b) { 
     var valA = getCellValue(a, index), valB = getCellValue(b, index); 
     return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB); 
    }; 
}; 

function getCellValue(row, index){ return $(row).children('td').eq(index).html(); }; 

Однако, на столе, где клетки содержат еще одну таблицу, сортировки перерывов все - требуется все строки таблицы, включая вложенные и переупорядочивающие их все. Мне, конечно, нужно, чтобы вложенные строки оставались внутри своих таблиц и не сортировались на другом, несвязаном уровне.

Что мне делать, чтобы исправить это поведение?

Я попытался изменить

var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index())); 

в

var rows = table.children('tr:gt(0)').toArray().sort(comparer($(this).index())); 

, но он по-прежнему выбирает и приказывает все строки, в том числе вложенных друг в друга из них.

ответ

2

Проблема заключается в том, что .find получает ВСЕtr в rows вар (кроме самого первого, из-за :gt(0)), даже те, вложенной таблицы.

Единственное, что я могу предложить, основываясь на этом examble, чтобы использовать класс на втором уровне tr сек ...
Таким образом, вы можете фильтровать их с помощью .not().

$('th.sortByOK').click(function(){ 
    var table = $(this).parents('table').eq(0); 
    var rows = table.find("tr:gt(0)").not(".secondLevel").toArray().sort(comparer($(this).index())); 
    this.asc = !this.asc; 
    if (!this.asc){rows = rows.reverse()}; 
    for (var i = 0; i < rows.length; i++){table.append(rows[i])}; 
}); 

CodePen
Надеясь это помогает.

+0

Спасибо! Да, это помогает. Я также нашел, что 'table.find ('tr: gt (0): first'). Parent(). Children()' работает, но будет работать неправильно, если строка заголовка находится в 'tbody' ... –

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