如何禁用数据表上特定列的搜索/过滤器?

时间:2014-09-17 15:29:43

标签: javascript jquery filter datatables

我的数据表有5列,我需要禁用第3,第4和最后一列的过滤。

请帮助!!!

这是javascript:

<script type="text/javascript" language="javascript" class="init">
        $(document).ready(function() {

            // Setup - add a text input to each footer cell
            $('#example tfoot th').each( function () {
                var title = $('#example thead th').eq( $(this).index() ).text();
                $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
            } );

            // DataTable
            var table = $('#example').DataTable();

            // Apply the search
            table.columns().eq( 0 ).each( function ( colIdx ) {
                $( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () {
                    table
                        .column( colIdx )
                        .search( this.value )
                        .draw();
                } );
            } );
        } );
</script>

2 个答案:

答案 0 :(得分:2)

您也可以使用.not排除要添加输入文本的列。此外,您还可以添加代码以避免将事件处理程序添加到排除列中的任何输入框中(尽管如果这些单元格中不存在输入框,则无关紧要):

$(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#example tfoot th').not(":eq(2),:eq(3),:eq(4)") //Exclude columns 3, 4, and 5
                          .each( function () {
        var title = $('#example thead th').eq( $(this).index() ).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );

    // DataTable
    var table = $('#example').DataTable();

    // Apply the search
    table.columns().eq( 0 ).each( function ( colIdx ) {
        if (colIdx == 2 || colIdx == 3 || colIdx == 4) return; //Do not add event handlers for these columns

        $( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () {
            table
                .column( colIdx )
                .search( this.value )
                .draw();
        } );
    } );
} );

请参阅小提琴:http://jsfiddle.net/30phqqqg/1/

答案 1 :(得分:0)

带过滤的列的相同故事。第二列过滤禁用:

$(document).ready(function() {

$('#example').DataTable( {
           initComplete: function () {
            this.api().columns().every( function () {

                var column = this;
                var some = column.index();
                if (column.index() == 1) return;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );

                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );

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