$(document).ready( function () {

    // Search1

    $('#example thead tr').clone(true).appendTo( '#example thead' );

    $('#example thead tr:eq(1) th').each( function (i) {

        var title = $(this).text(); 

        $(this).html( '<input type="text" placeholder="Search" style="width: 100%" />' );

​

​

        $( 'input', this ).on( 'keyup change', function () {

            if ( table.column(i).search() !== this.value ) {

                table

                    .column(i)

                    .search( this.value )

                    .draw();

            }

        } );

    } );

    // Search2

     $('#example thead tr:eq(0)').clone(true).appendTo( '#example thead' );

    $('#example thead tr:eq(2) th').each( function (i) {

        var title = $(this).text();

        $(this).html( '<input type="text" placeholder="Search" style="width: 100%" />' );

​

        $( 'input', this ).on( 'keyup change', function () {

            if ( table.column(i).search() !== this.value ) {

                table

                    .column(i)

                    .search( this.value )

                    .draw();

            }

        } );

    } );

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

        orderCellsTop: true,

        scrollX: true,

            initComplete: function () {

            $('body').find('.dataTables_scrollBody').addClass("scrollbar");

            count = 0;

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

                var title = this.header();

                //replace spaces with dashes

                title = $(title).html().replace(/[\W]/g, '-');

                var column = this;

                var TEST = $(column.header()).closest('tr').next().children().eq( column.index() );

                var select = $('<select class="select2" style="width: 100%"  ></select>')

                    .appendTo( $(column.header()).closest('tr').next().children().eq( column.index() ).empty() )                    

                    .on( 'change', function () {

                      //Get the "text" property from each selected data 

                      //regex escape the value and store in array

                      var data = $.map( $(this).select2('data'), function( value, key ) {

                        return value.text ? '^' + $.fn.dataTable.util.escapeRegex(value.text) + '$' : null;

                                 });

                      //if no data selected use ""

                      if (data.length === 0) {

                        data = [""];

                      }

                      //join array into string with regex or (|)

                      var val = data.join('|');

                      //search for the option(s) selected

                      column

                            .search( val ? val : '', true, false )

                            .draw();

                    } );

                column.data().unique().sort().each( function ( d, j ) {

                    select.append( '<option value="'+d+'">'+d+'</option>' );

                } );

              //use column title as selector and placeholder

              select.select2({

                multiple: true,

                closeOnSelect: true,

                placeholder: "Choose"

              });

              //initially clear select otherwise first option is selected

              select.val(null).trigger('change');

            } );

        } 

  });

} );

​