简体   繁体   中英

jQuery-Datatables dropdowns ONLY for some columns

Using this code, and all examples i've seen, i can add dropdowns to ALL columns like in the picture:

在此处输入图片说明

var table = $('#myTable').DataTable({
        dom: 'lfBrtip',

        initComplete: function () {
        this.api().columns().every( function () {
            var column = this;
            var select = $('<select><option value=""></option></select>')
                .appendTo( $(column.header()))
                .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>' )
            } );
        } );
.......
    }

How can i add dropdowns ONLY for column 2 and 3 for example?

You should use each for getting index of columns to set drop down list.

var table = $('#myTable').DataTable({
        dom: 'lfBrtip',

        initComplete: function () {
        var api = this.api();
         this.api().columns().eq(0).each( function ( index ) {
           if(index == 1 || index == 2)
           {
            var column = this;
            var select = $('<select><option value=""></option></select>')
                .appendTo( $(api.column(index).header()))
                .on( 'change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );

                    column
                        .search( val ? '^'+val+'$' : '', true, false )
                        .draw();
                } );
              var i = 0;
              api.column(index).data().unique().sort().each( function ( d, j ) {
                select.append( '<option value="'+d+'">'+d+'</option>' );
              } );
           }
        } );
.......
    }

all you have to do is add the following two lines

var table = $('#myTable').DataTable({
    dom: 'lfBrtip',

    initComplete: function () {
    this.api().columns().every( function () {
        if(this[0] == 2 || this[0] == 3){//add
        var column = this;
        var select = $('<select><option value=""></option></select>')
            .appendTo( $(column.header()))
            .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>' )
        } );
    } // add
    } );
    // ...
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

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