Флажок сортировать в DataTables с помощью jQuery

Я пытался отсортировать поле флажка в DataTables плагин jQuery для проверки и снятия флажка.

Я создаю вход (флажок) внутри таблицы следующим образом:

'<input type="checkbox" '+ check +' />'

check содержит текст "checked " или"".

до сих пор я пытался просто добавить тип флажка DOM, например:

{ "sSortDataType": "dom-checkbox" }

когда я использую весь код из плагина документация API, Я получаю следующее ошибка:

Uncaught TypeError: не удается прочитать свойство "afnSortData" неопределенного в моей консоли.


6
checkbox datatable jquery sorting

9 ответов

что я сделал: создания буль ВАР в скрытом П так и будет в sameplace как флажок.чем я отключил опцию Изменить значение в флажке, и сортировка теперь работает.

6

нашел этот пример:

$.fn.dataTableExt.afnSortData['dom-checkbox'] = function  ( oSettings, iColumn )
{
    var aData = [];
    $( 'td:eq('+iColumn+') input', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
        aData.push( this.checked==true ? "1" : "0" );
    } );
    return aData;
}

инициализируется следующим образом:

$(document).ready(function() {
    $('#example').dataTable( {
        "aoColumns": [
            null,
            null,
            null,
            null,
            null,
            { "sSortDataType": "dom-checkbox" }
        ]
    } );
} );

здесь:http://www.datatables.net/examples/plug-ins/dom_sort.html

3

мне пришлось слегка подправить ответ, предоставленный Moby's Stunt Double. Дополнительный сортировочный плагин не требуется! Просто немного пользовательского кодирования.

Спасибо за все идеи, все! По какой-то причине мне пришлось делать специальную обработку для моего стола, что не было общим решением. Что меня вполне устраивало.

мой флажок был отключен и проверен программно, поэтому я не мог назвать .checked. Вызов на основе iColumn также сбросил вещи; вероятно, потому, что у меня был скрытый 0th колонна.

вот что сработало для меня:

$.fn.dataTableExt.afnSortData['dom-checkbox'] = function  ( oSettings, iColumn ) {
    var aData = [];
    $(oSettings.oApi._fnGetTrNodes(oSettings)).each( function () {
        var checker = $(this).find('.classOnSurroundingSpan input');
        aData.push( checker.prop("checked")==true ? "1" : "0" );
    } );
    return aData;
}

моя наценка выглядела так (окружающий промежуток был частью решения для включения отслеживания клик на checkbox инвалидов):

<span class='classOnSurroundingSpan'><input type='checkbox' disabled='disabled'/></span>

мое определение таблицы (в части):

"aoColumnDefs": [
    {"sSortDataType": "dom-checkbox",
    "aTargets":[1],
    "asSorting": ["desc"]}
]
3

это работает для меня:

$(document).ready(function() {
    $('#example').dataTable( {
        "aoColumns": [
            null,
            null,
            null,
            null,
            null,
            { "orderDataType": "dom-text", type: 'string' },
        ]
    } );
} );
2

нашел этот пример:

  $.fn.dataTable.ext.order['dom-checkbox'] = function (settings, col) {
    return this.api().column(col, { order: 'index' }).nodes().map(function (td, i) {
        return $('input', td)[1].checked ? '1' : '0';
    });
}

инициализируется следующим образом:

$(document).ready(function() {
    $('#example').dataTable( {
        "columnDefs": [
                        {
            "targets": 10,
                            "orderDataType": "dom-checkbox"
                        });
} );
2

Это решение сработало для меня, поэтому я написал на нем сообщение в блоге.

http://blog.josephmisiti.com/sorting-booleans-in-jquery-datatables

2

если у вас есть какой-то уникальный идентификатор на элементе checkbox, вы можете сделать что-то довольно чистое, как в этом примере ниже (обратите внимание, что это datatables плагин сортировки синтаксис)

если ваши входы выглядят так:

<input data-app-id="1" class="migrateCheck" type="checkbox">

плагин будет выглядеть так:

function checkboxCompare(a, b) {
    var aId = $(a).data('app-id'),
        bId = $(b).data('app-id'),
        aChecked = $('.migrateCheck[data-app-id=' + aId + ']:checked').length,
        bChecked = $('.migrateCheck[data-app-id=' + bId + ']:checked').length;

    if (aChecked && !bChecked) return -1;
    else if (!aChecked && bChecked) return 1;

    return 0;
}

jQuery.extend(jQuery.fn.dataTableExt.oSort, {
    "checkbox-pre": function (a) {
        return a;
    },

    "checkbox-asc": function (a, b) {
        return checkboxCompare(a, b);
    },

    "checkbox-desc": function (a, b) {
        return checkboxCompare(b, a);
    }
});

потом просто указать sType: "checkbox" на aoColumnDefs attr для col, который содержит флажок.

0

это работает для меня 

$(document).ready(function () {
    $('#Table').DataTable({
        "language": datatableLanguaje,
        "aoColumnDefs": [ 
            { "aTargets": [8], "orderDataType": "dom-text", type:'string' },
        ]
    });
});
0

все может быть Отсортировано по простому html. 

$('#table input[type=checkbox]').each(function () {
    var text = $(this).prop('checked');
    var ele = $('<span>' + text + '</span>').hide();
    $(this).after(ele);
});
0