How to move Datatable Select to the Another Header?
How to move Datatable Select to the Another Header?
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?
$("#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
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
The test case of the following questions is located
https://jsfiddle.net/aice09/fusod0g3/1/
See if this example helps:
http://live.datatables.net/saqozowe/3/edit
Kevin