简体   繁体   English

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

[英]How to disable a search/filter on a specific column on a datatable?

My datatable has 5 columns and I need to disable filtering for the 3rd, 4th and last column. 我的数据表有5列,我需要对第三,第四和最后一列禁用过滤。

please help!!! 请帮忙!!!

this is the javascript: 这是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>

You can use .not to exclude the columns you want to add input text too. 您也可以使用.not排除要添加输入文本的列。 Furthermore, you can also add code to avoid adding event handlers to any input boxes in the excluded columns (although if no input boxes exist in those cells it doesn't matter): 此外,您还可以添加代码以避免将事件处理程序添加到排除列中的任何输入框(尽管如果这些单元格中不存在任何输入框也没关系):

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

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

The same story for columns with filtering. 对于具有过滤功能的列也是如此。 2nd column filtering disable: 第二列过滤禁用:

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM