Jquery Tablesorter – сортировка по столбцу, имеющему элементы <input>

Question

У меня есть такая таблица:

|   Update   |   Name  |  Code      | modification date |
|            |   name1 | code1      | 2009-12-09        |
|            |   name2 | otehercode | 2007-09-30        | 

Если столбец «Обновление» содержит флажки <input type='checkbox' />.

Исходное состояние флажка определяется перед визуализацией таблицы, но после извлечения строк из базы данных (оно основано на наборе условий на стороне сервера).

Флажок можно установить по умолчанию, снять по умолчанию или отключить (disabled='disabled' как input атрибут).

я использую Сортировщик таблиц JQuery сортировать мои таблицы.И я хотел бы иметь возможность сортировки по столбцу, содержащему флажки.Как это возможно (я мог бы передать некоторые дополнительные атрибуты в свой input элемент, может быть, если это поможет...)?
Должен ли я написать свой собственный парсер, чтобы справиться с этим?

Answer 1

Добавьте скрытый диапазон непосредственно перед входными данными и включите в него текст (который будет использоваться для сортировки столбца).Что-то вроде:

<td>
    <span class="hidden">1</span>
    <input type="checkbox" name="x" value="y">
</td>

При необходимости вы можете прикрепить событие к флажку, чтобы оно изменяло содержимое предыдущего одноуровневого элемента (диапазона), когда он установлен или снят:

$(document).ready(function() {

    $('#tableid input').click(function() {
         var order = this.checked ? '1' : '0';
         $(this).prev().html(order);
    })

})

Примечание:Я не проверял код, поэтому могут быть ошибки.

Answer 2

Это более полная/правильная версия ответа Хаарта.

$(document).ready(function() {
    $.tablesorter.addParser({ 
        id: "input", 
        is: function(s) { 
            return false; 
        }, 
        format: function(s, t, node) {
            return $(node).children("input[type=checkbox]").is(':checked') ? 1 : 0;
        }, 
        type: "numeric" 
    });

    sorter = $("#table").tablesorter({"headers":{"0":{"sorter":"input"}}});
// The next makes it respond to changes in checkbox values 
    sorter.bind("sortStart", function(sorter){$("#table").trigger("update");});

}); 

Answer 3

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

http://mottie.github.io/tablesorter/docs/

Вот пример:http://mottie.github.io/tablesorter/docs/example-widget-grouping.htmlи это делается путем включения библиотеки анализатора ввода/выбора «parser-input-select.js», добавления объекта заголовков и объявления столбцов и типа анализа.

headers: {
  0: { sorter: 'checkbox' },
  3: { sorter: 'select' },
  6: { sorter: 'inputs' }
}

Включены дополнительные парсеры:анализ даты (с Sugar и DateJS), даты ISO8601, месяцы, двухзначные годы, дни недели, расстояние (футы/дюймы и метрические единицы) и формат заголовка (удаляется «A» и «The»).

Answer 4

Вы можете использовать плагин jQuery tablesorter и добавить собственный синтаксический анализатор, который сможет сортировать все столбцы флажков:

$.tablesorter.addParser({
        id: 'checkbox',
        is: function (s, table, cell) {
            return $(cell).find('input[type=checkbox]').length > 0;
        },
        format: function (s, table, cell) {
            return $(cell).find('input:checked').length > 0 ? 0 : 1;
        },
        type: "numeric"
    });

Answer 5

Вы можете добавить собственный парсер в TableSorter, примерно так:

 $.tablesorter.addParser({ 
    // set a unique id 
    id: 'input', 
    is: function(s) { 
        // return false so this parser is not auto detected 
        return false; 
    }, 
    format: function(s) { 
        // Here we write custom function for processing our custum column type 
        return $("input",$(s)).val() ? 1 : 0; 
    }, 
    // set type, either numeric or text 
    type: 'numeric' 
}); 

А затем используйте его в своей таблице

$("table").tablesorter(headers:{0:{sorter:input}});

Answer 6

Всего один последний штрих, чтобы сделать ответ Аарона полным и избежать ошибок переполнения стека.Таким образом, помимо использования $.tablesorter.parser() функциональность, как описано выше, мне пришлось добавить на свою страницу следующее, чтобы она работала с обновленными значениями флажков во время выполнения.

    var checkboxCahnged = false;

    $('input[type="checkbox"]').change(function(){
        checkboxChanged = true;
    });

    // sorterOptions is a variables that uses the parser and disables
    // sorting when needed
    $('#myTable').tablesorter(sorterOptions);
    // assign the sortStart event
    $('#myTable')..bind("sortStart",function() {
        if (checkboxChanged) {
            checkboxChanged = false;
            // force an update event for the table
            // so the sorter works with the updated check box values
            $('#myTable')..trigger('update');
        }
    });

Answer 7

    <td align="center">
    <p class="checkBoxSorting">YOUR DATA BASE VALUE</p>
    <input type="checkbox" value="YOUR DATA BASE VALUE"/>
    </td>

//javascript
$(document).ready(function() {
$(".checkBoxSorting").hide();
});

Answer 8

Я попробовал несколько подходов в других ответах, но в итоге использовал принятый ответ от Salgiza с комментарием Мартина об обновлении модели таблицы.Однако, когда я впервые реализовал это, я установил строку обновления внутри триггера изменения флажка, как предложено в формулировке.Это изменило порядок моих строк при установке/снятии флажка, что меня очень сбивало с толку.Линии просто отскакивали от щелчка.Поэтому вместо этого я привязал функцию обновления к фактическому заголовку столбца флажка, чтобы строки менялись только при нажатии, чтобы обновить сортировку.Он работает так, как я хочу:

// checkbox-sorter is the assigned id of the th element of the checbox column
$("#checkbox-sorter").click(function(){ 
    $(this).parents("table").trigger("update");
});