disable filtering of one or multiple columns (select inputs)

puseidr

Hello, i want to use the Individual column searching (select inputs) Feature for datatables.

But i want to disable the filtering-option for one or more columns (some columns have to much information so the select input get a massive width and breaks the design).

what do i need to change in the js to disable the name-column and the start-date column from the examle (link above)

$(document).ready(function() {
    $('#example').DataTable( {
        initComplete: function () {
            this.api().columns().every( function () {
                var column = this;
                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>' )
                } );
            } );
        }
    } );
} );

puseidr

Got it!

i changed the js from

 this.api().columns().every( function () {

to:

this.api().columns('.select-filter').every( function () {

and added the class "select-filter" to the table-header

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th class="select-filter">Position</th>
                <th class="select-filter">Office</th>
                <th class="select-filter">Age</th>
                <th>Start date</th>
                <th class="select-filter">Salary</th>
            </tr>
        </thead>
...

now only the columns with the class will be filtered

hsnclk1985

Hi,

When I use,

this.api().columns().every( function () {

I can see only one dropbox not every columns have a dropbox ???

and than I changed the codes like yours for two columns but again I can see one :( Is there any problem in my codes?

this is for my first codes

<script>
    $(document).ready(function() {
        $.fn.dataTable.Responsive.breakpoints = [
            { name: 'desktop', width: Infinity },
            { name: 'tablet',  width: 1024 },
            { name: 'fablet',  width: 768 },
            { name: 'phone',   width: 480 }
        ];

        $('#example').DataTable({
            responsive: true,
            initComplete: function () {
                this.api().columns().every( function () {
                    var column = this;
                    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>' )
                    } );
                } );
            }
        });
    } );

</script>

this one is second..I 've added '.select-filter'

<script>
    $(document).ready(function() {
        $.fn.dataTable.Responsive.breakpoints = [
            { name: 'desktop', width: Infinity },
            { name: 'tablet',  width: 1024 },
            { name: 'fablet',  width: 768 },
            { name: 'phone',   width: 480 }
        ];

        $('#example').DataTable({
            responsive: true,
            initComplete: function () {
                this.api().columns('.select-filter').every( function () {
                    var column = this;
                    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>' )
                    } );
                } );
            }
        });
    } );

</script>

                           <thead>
                                <tr>
                                    <th class="all">No</th>
                                    <th></th>
                                    <th class="select-filter">Türü</th>
                                    <th>Proje No</th>
                                    <th class="all">Proje Sahibi Kurum</th>
                                    <th class="all">Projenin Adı</th>
                                    <th class="select-filter">İlgili Personel</th>
                                    <th>K.S</th>
                                    <th>Ref.S</th>
                                    <th>E.K.S</th>
                                    <th>Per.S</th>
                                    <th>Bit.Tar.</th>
                                    <th>Rap.Tar.</th>
                                    <th>Bütçe</th>
                                    <th>Sözleşme</th>
                                    <th></th>
                                </tr>
                            </thead>

hsnclk1985

And Also Can I change the dropbox position ??? for example I want to locate top not bottom side...

hsnclk1985

Hi, I solved my problem... but now I have another one... If you notice that, I've added extra <span ...></span>

<tbody>
           <c:forEach items="${projectsListt}" var="projectt">
                <tr>
                   <td>1</td>
                   <td><a href="#"><i class="fa fa-road text-navy"></i></a></td>
                   <td><span class="label label-primary">${projectt.faaliyetTuru}</span></td>
                   <td>${projectt.projeNumarasi}</td>
                   <td>${projectt.projeSahibiKurum}</td>
                   <td>${projectt.projeAdi}</td>
                   <td>${projectt.ilgiliPersonel}</td>
                   <td>${projectt.admin}</td>
                   <td>${projectt.admin}</td>
                   <td>${projectt.admin}</td>
                   <td>${projectt.admin}</td>
                   <td>${projectt.araciKisi}</td>
                   <td>${projectt.araciKisi}</td>
                   <td>${projectt.projeTuru}</td>
                   <td><a href="#"><i class="fa fa-trash text-navy"></i></a></td>
                   <td><a href="#"><i class="fa fa-trash text-navy"></i></a></td>
                </tr>
             </c:forEach>
</tbody>

but this tag effected the columns which have class="select-filter"

                            <thead>
                                <tr>
                                    <th class="all">No</th>
                                    <th></th>
                                    <th class="select-filter">Türü</th>
                                    <th>Proje No</th>
                                    <th class="all">Proje Sahibi Kurum</th>
                                    <th class="all">Projenin Adı</th>
                                    <th class="select-filter">İlgili Personel</th>
                                    <th>K.S</th>
                                    <th>Ref.S</th>
                                    <th>E.K.S</th>
                                    <th>Per.S</th>
                                    <th>Bit.Tar.</th>
                                    <th>Rap.Tar.</th>
                                    <th>Bütçe</th>
                                    <th>Sözleşme</th>
                                    <th></th>
                                </tr>
                                </thead>

these are the previews

https://yadi.sk/i/aM3biY9Ujy4L7

Although I have two "Personel Eğitimi" records, js codes not filter as in the image

https://yadi.sk/i/ju3eR9aRjy4f5

How can I edit js codes to solve this issue???

<script>
    $(document).ready(function() {
        $.fn.dataTable.Responsive.breakpoints = [
            { name: 'desktop', width: Infinity },
            { name: 'tablet',  width: 1024 },
            { name: 'fablet',  width: 768 },
            { name: 'phone',   width: 480 }
        ];

        $('#example').DataTable({
            responsive: true,
            initComplete: function () {
                this.api().columns('.select-filter').every( function () {
                    var column = this;
                    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>' )
                    } );
                } );
            }
        });
    } );

</script>

bhupeshbk

don't worry just put this line:

this.api().columns([1,2,3,5]).every( function ()......