4

My datatable has 5 columns and I need to disable filtering for the 3rd, 4th and last column.

please help!!!

this is the 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>
Ivar
  • 6,138
  • 12
  • 49
  • 61
user3818592
  • 163
  • 1
  • 3
  • 9

2 Answers2

7

You can use .not to exclude the columns you want to add input text too. 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/

Stryner
  • 7,288
  • 3
  • 18
  • 18
  • hi @ninsly using this javascript how can I sort only one column? Like the second column is the only thing that I want to sort. – user3818592 Sep 19 '14 at 01:20
  • 1
    @cumberbitch Yes, you can change `$('#example tfoot th').not(":eq(2),:eq(3),:eq(4)")` to `$('#example tfoot th').eq("1")` to specify that you only want the 2nd column. Also you can change `if (colIdx == 2 || colIdx == 3 || colIdx == 4) return;` to `if (colIdx != 1) return;` – Stryner Sep 19 '14 at 01:31
  • hello @Ninsly thanks for the reply.. What I actually asked is "SORT" not the search anymore. It totally worked but now I want know how to sort the second column only using this javascript. – user3818592 Sep 19 '14 at 01:41
  • Ah yes, I misread that. And yes you can. You can specify that certain columns are not sortable when you create the table by using `aoColumns` and specifying `"bSortable": false` for all the other columns. A working fiddle is here: http://jsfiddle.net/30phqqqg/2/ – Stryner Sep 19 '14 at 01:58
  • hi @Ninsly.. i have another question. Is it possible if the search/filter box will be on the top and not on the bottom or the ? Like it is just below the .. – user3818592 Sep 19 '14 at 04:46
  • @cumberbitch Yes. You can change `$('#example tfoot th')` to `$('#example thead th')` and also `table.column( colIdx ).footer()` to `table.column( colIdx ).header()`. Fiddle here: http://jsfiddle.net/30phqqqg/3/ – Stryner Sep 19 '14 at 12:31
  • hi @Ninsly. can i make my datatable responsive? – user3818592 Oct 13 '14 at 11:18
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>' )
                } );
            } );
        }})
};
Ulee
  • 47
  • 5