Блог

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

1) Одна из ячеек столбца содержит знаки доллара спереди (например: $20, $10, $5). Сортировка не работает должным образом; она сортируется по алфавиту (и поскольку все содержимое ячеек начинается с $, все они неправильно объединяются). Какой код заставил бы сортировщик начинать со второго символа, таким образом игнорируя знаки доллара?

2) В другом столбце есть динамические выпадающие списки (по 1 тегу ВЫБОРА в каждой ячейке), и я бы хотел, чтобы столбец сортировался в алфавитном порядке по текущим выбранным значениям внутри каждого тега ВЫБОРА. Есть идеи?

Если вы можете хотя бы указать мне правильное направление и дать представление о том, как настроить сортировку в каждом из двух сценариев, я был бы очень признателен.

Заранее спасибо!!

У меня это сработало. может потребоваться некоторая настройка, если ни один параметр не выбран…

 $(document).ready(function(){
    // Sortable tables
    $('table').tablesorter ({
        cancelSelection: true,
        sortList: [[0,0]],
        textExtraction: function(node) {
            // Check if option selected is set
            if ($(node).find('option:selected').text() != "") {
                return $(node).find('option:selected').text();
            }
            // Otherwise return text
            else return $(node).text();
        }
    });
});
  

Эта библиотека использует кэш в более новых версиях. Для обновления выпадающего списка требуется обновление кэша средства сортировки таблиц. Если кэш не обновляется, столбец будет отсортирован по исходному выбору выпадающего списка, а не по текущему.

 // hook into the select element's onchange event
$("td > select").change(function() {
        const config = $("table")[0].config;
        //refresh the cache so the newly selected element is used to sort with
        $.tablesorter.updateCache(config);
});
  

2) В другом столбце есть динамические выпадающие списки (по 1 тегу ВЫБОРА в каждой ячейке), и я бы хотел, чтобы столбец сортировался в алфавитном порядке по текущим выбранным значениям внутри каждого тега ВЫБОРА. Есть идеи?

Я только что пытался достичь этого, и это невозможно простым способом. Строка, которую функция синтаксического анализа получает в качестве параметра (..format: функция (ы) {..), уже удалена из тегов. Таким образом, невозможно определить, какое значение выбрано. Для этого пришлось бы модифицировать tablesorter.

Что я сделал сейчас, так это добавил скрытую опцию впереди с выбранным значением в ней. Это обходной путь. Но в таком случае даже не обязательно писать свой собственный анализатор, и tablesorter правильно сортирует.

 <option style="display:none">B</option>
<option value="A">A</option>
<option value="B" selected="selected">B</option>
<option value="C">C</option>
...
<option style="display:none">A</option>
<option value="A"  selected="selected">A</option>
<option value="B">B</option>
<option value="C">C</option>
  

Строки, после которых сортируется tablesorter, теперь являются:

• BABC
• AABC

На случай, если это поможет кому-то, пытающемуся сделать это в будущем, я нашел решение для:

 2) Another column has dynamic drop-downs (1 SELECT tag in each cell), and I would like it to
alphabetically sort the column by the currently selected values inside each SELECT tag. Any ideas?
  

использование форка tablesorter от Mottie. Это позволяет выполнять пользовательские функции извлечения текста на уровне столбцов (см. документацию Мотти). Для столбца, который я хотел отсортировать (в данном случае первого, следовательно, с индексом 0), я инициализировал с помощью:

 textExtraction: {
    0: function(node) {
        return $(node).find('option:selected').text();
    }
}
  

К сожалению, я не смог найти элегантного способа заставить его работать с оригиналом.

Для нестандартных данных (любых, кроме простого текста или цифр) вам нужно написать анализатор и добавить его через их API. Смотрите здесь: http://tablesorter.com/docs/example-parsers.html

Мне пришлось сделать это для ячеек таблицы, которые имели числовое значение (процент) и изображение в одной ячейке. Вы могли бы попробовать это для простого «$ 1.58», который будет отсортирован под номером 1.58

 // add parser through the tablesorter addParser method 
$.tablesorter.addParser({ 
    // set a unique id 
    id: 'money', 
    is: function(s) { 
        // return false so this parser is not auto detected 
        return false; 
    }, 
    format: function(s) { 
        // format your data for normalization 
        var str = s.replace('$', '').replace(',','') ;
        return parseFloat(str);
    }, 
    // set type, either numeric or text 
    type: 'numeric' 
});