CODEWITHSUNDEEP
javascriptjquerydatatablebootstrapping
KuldeeP ChoudharY
KuldeeP ChoudharY

Reputation: 428

How to search Individual column (text inputs,select drop-down) in a same table using Datatable jquery?

Image1 2 [ 3

I want to replace (input type) into (select drop-down), so what should i do?

I have to change Black square into Drop-down in Data tables

Reference : - Click Here

Upvotes: 1

Views: 3084

Answers (1)

BlackBurn027
BlackBurn027

Reputation: 642

Hi i tried to work out a solution for this issue take a look, 

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

// Apply the search in normal text input way
table.columns().every( function () {
    var that = this;

    $( 'input', this.footer() ).on( 'keyup change', function () {
        if ( that.search() !== this.value ) {
            that
                .search( this.value )
                .draw();
        }
    } );
} );

filter using select input for column no 2 which is to be substituted for column of your choice 

 table.column(2).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>')
    });

});

Also created a fiddle let me know if matches your requirement. https://jsfiddle.net/daddzt6n/2/

Upvotes: 4

Related Questions