Блог

Я использую библиотеку jquery DataTables для приведения в порядок таблицы, и у меня возникли некоторые проблемы с выбором фильтра, отображаемым в неправильном месте.

Проблема в том, что я использую 'filter' класс для th элементов, чтобы указать, следует ли фильтровать столбец. однако, если я пропущу один столбец, остальные выйдут из строя.

Итак, в приведенном ниже (с использованием данных примера DataTables) и в этом jsFiddle позиция не фильтруется, в то время как имя, должность и возраст, однако, в select указанном выше офисе есть должности, а в select указанном выше возрасте есть офисы.

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

 var table = $('#nhpaCompare').DataTable({
    "paging": false,
    "columnDefs": [ {
        "targets": noOrdering ,
        "orderable": false // defined elsewhere
    } ]

});

$("#nhpaCompare thead tr th.filter").each( function ( i ) {

    var select = $('<select><option value=""></option></select>')
        .appendTo( $(this).empty() )
        .on( 'change', function () {
            table.column( i )
                .search( '' $(this).val() '')
                .draw();
        } );

    table.column( i ).data().unique().sort().each( function ( d, j ) {
        select.append( '<option value="' d '">' d '</option>' )
    } );

} );
  

Вам нужно добавить одно условие if, чтобы проверить, есть ли у него фильтр классов, и jQuery будет выглядеть так

 $("#nhpaCompare thead tr:first th").each( function ( i ) {

    if ($(this).hasClass("filter")) {       
        var select = $('<select><option value=""></option></select>')
            .appendTo( $(this).empty() )
            .on( 'change', function () {
                table.column( i )
                    .search( '' $(this).val() '')
                    .draw();
            } );

        table.column( i ).data().unique().sort().each( function ( d, j ) {
            select.append( '<option value="' d '">' d '</option>' )
        } );
    }
    } );
  

ДЕМОНСТРАЦИЯ

Разве вы не знали, что я пошел на все эти проблемы и попробовал последнее…

i В .each() вызове — это просто номер итерации, а не число, соответствующее фактическому столбцу. Итак, где я думал 0,2,3 , что это было бы актуально 0,1,2 .

Итак, это:

 $("#nhpaCompare thead tr th.filter").each( function ( i ) {
    ...
} );
  

Должно быть это вместо:

 $("#nhpaCompare thead tr:first th").each( function ( i ) {
    if ($(this).hasClass("filter")) {
        ...
    }
} );
  

Теперь он отлично работает в jsFiddle.