JQuery Tablesorter-сортировка по столбцам, имеющим элементы

у меня есть такой стол:

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

где столбец Update содержит флажки <input type='checkbox' />.

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

флажок может быть установлен по умолчанию, по умолчанию выключено или отключен (disabled='disabled' as ).

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

8
input-field jquery parsing tablesorter

8 ответов

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

<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);
    })

})

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

16

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

$(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");});

});
11

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

$.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"
    });
4

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

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

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

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

дополнительные Парсеры включены: разбор даты (w / Sugar & DateJS), даты ISO8601, месяцы, 2-значные годы, будни, расстояние (футы/дюймы и Метрика) и формат заголовка (удаляет "A" & "The").

3

вы можете добавить пользовательский парсер в TableSorter, smth следующим образом:

 $.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}});
1

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

    <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();
});
0

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

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