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).

Я использую Tablesorter 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 и добавить собственный анализатор, который может сортировать все столбцы флажков:

$.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 4

Я добавляю этот ответ, потому что я использую поддерживаемую / разветвленную библиотеку 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 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

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

// checkbox-sorter is the assigned id of the th element of the checbox column
$("#checkbox-sorter").click(function(){ 
    $(this).parents("table").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

Всего один последний штрих, чтобы завершить ответ Аарона и избежать ошибок переполнения стека. Поэтому, в дополнение к использованию функции $.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');
        }
    });