How to move Datatable Select to the Another Header?

How to move Datatable Select to the Another Header?

aice09aice09 Posts: 2Questions: 1Answers: 0

I have a datatable and I clone the header and used the second header to put search bar and select option. But the select goes to the top area not in the area I want to put it. I try to change the script but it never change position.

The following image below show the my output during my development.

How to move and align the select to the input search?

enter image description here

        $("#example tfoot th").each(function() {
            var title = $(this).text();
            $(this).html('<input class="form-control" type="text" placeholder="Search ' + title + '" style="width:100%" />');
        });

        $("#example thead tr").clone(true).appendTo( "#example thead" );
        $("#example thead tr:eq(1) th").each( function (i) {
            var title = $(this).text();   
            $(this).html( '<input class="form-control" type="text" placeholder="Search '+title+'" style="width:100%" />' );

            $( "input", this ).on( "keyup change", function () {
                if ( table.column(i).search() !== this.value ) {
                    table
                        .column(i)
                        .search( this.value )
                        .draw();
                }
            } );
        } );

        // DataTable
        var table = $('#example').DataTable({
            "columnDefs": [{
                "targets": [0, 6],
                "orderable": false,
            }, ],
            "responsive": true,
            "orderCellsTop": true,
            "fixedHeader": true
        });

        // Apply the search
        table.columns().every(function() {
            var that = this;
            $('input', this.footer()).on('keyup change', function() {
                if (that.search() !== this.value) {
                    that
                        .search(this.value)
                        .draw();
                }
            });
        });

        //Header
        table.column(1).every(function() {
            var column = this;
            var select = $('<select class="form-control" style="width:100%"><option value=""></option></select>')
                .appendTo($(column.header()).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>')
            });

        });

        table.column(2).every(function() {
            var column = this;
            var select = $('<select class="form-control" style="width:100%"><option value=""></option></select>')
                .appendTo($(column.header()).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>')
            });

        });

        table.column(5).every(function() {
            var column = this;
            var select = $('<select class="form-control" style="width:100%"><option value=""></option></select>')
                .appendTo($(column.header()).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>')
            });

        });

        //Footer
        table.column(1).every(function() {
            var column = this;
            var select = $('<select class="form-control" style="width:100%"><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>')
            });

        });

        table.column(2).every(function() {
            var column = this;
            var select = $('<select class="form-control" style="width:100%"><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>')
            });

        });

        table.column(5).every(function() {
            var column = this;
            var select = $('<select class="form-control" style="width:100%"><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 src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/fixedheader/3.1.9/js/dataTables.fixedHeader.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/fixedheader/3.1.9/css/fixedHeader.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/fixedheader/3.1.9/css/fixedHeader.dataTables.min.css" rel="stylesheet"/>
<table class="table table-bordered responsive nowrap" id="example" width="100%">    
    <thead> 
        <tr>
            <th width="3%">No</th>
            <th width="30%">Machine</th>
            <th width="15%">Spec1</th>
            <th width="15%">Spec2</th>
            <th width="6%">Spec3</th>
            <th width="6%">Spec4</th>
            <th width="6%">Spec5</th>
            <th width="6%">Spec6</th>
            <th width="6%">Qty</th>
            <th></th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th width="3%">No</th>
            <th width="30%">Machine</th>
            <th width="15%">Spec1</th>
            <th width="15%">Spec2</th>
            <th width="6%">Spec3</th>
            <th width="6%">Spec4</th>
            <th width="6%">Spec5</th>
            <th width="6%">Spec6</th>
            <th width="6%">Qty</th>
            <th></th>
        </tr>
    </tfoot>
</table>

Answers

Sign In or Register to comment.