LastChar23
Reputation: 529
Datatable with column filtering but same width as without
I currently have a datatable with a specific width.
Now I wanted to add column filtering like the official example but when I add the code to the table, the table gets to big that the width of the area is too small.
What do I need to do to have the text Inputs at the same size as the original header? (So I want exactly a table like in example #1 but with a column filtering row.)
Example with column filtering code
Plain Code from codepen:
HTML:
<div style="width: 1370px; font-size:14px;">
<table id="example" class="table table-striped table-bordered">
<thead>
<tr>
<th>Hostname</th>
<th>Film</th>
<th>AktlHelewafe Version</th>
<th>BntlNiJus Version</th>
<th>NntjGpuwllre Version</th>
<th>AA</th>
<th>RR</th>
<th>Letzter Keickvcen</th>
<th>Letzter Hujlsken</th>
<th>Ausstehende Vorgänge</th>
<th>Besnakmefojlen</th>
<th>Stand</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>Systemt</td>
<td>4.18.1902.5</td>
<td>1.303.522.0</td>
<td>1.303.522.0</td>
<td>X</td>
<td>X</td>
<td>7 Days</td>
<td>7 Days</td>
<td></td>
<td>XXXXXXXXXX</td>
<td>30.09.2019 15:31:41</td>
<td>XX</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>Systemt</td>
<td>4.18.1902.5</td>
<td>1.303.522.0</td>
<td>1.303.522.0</td>
<td>X</td>
<td>X</td>
<td>7 Days</td>
<td>7 Days</td>
<td></td>
<td>XXXXXXXXXX</td>
<td>30.09.2019 15:31:41</td>
<td>XX</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>Systemt</td>
<td>4.13.17134.619</td>
<td>1.303.522.0</td>
<td>1.303.522.0</td>
<td>X</td>
<td>X</td>
<td>7 Days</td>
<td>7 Days</td>
<td></td>
<td>XXXXXXXXXX</td>
<td>30.09.2019 15:31:41</td>
<td>XX</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>Systemt</td>
<td>4.18.1902.5</td>
<td>1.303.522.0</td>
<td>1.303.522.0</td>
<td>X</td>
<td>X</td>
<td>7 Days</td>
<td>7 Days</td>
<td></td>
<td>XXXXXXXXXX</td>
<td>30.09.2019 15:31:41</td>
<td>XX</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>Systemt</td>
<td>4.18.1902.5</td>
<td>1.303.522.0</td>
<td>1.303.522.0</td>
<td>X</td>
<td>X</td>
<td>7 Days</td>
<td>7 Days</td>
<td></td>
<td>XXXXXXXXXX</td>
<td>30.09.2019 15:31:41</td>
<td>XX</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>Systemt</td>
<td>4.18.1902.5</td>
<td>1.303.522.0</td>
<td>1.303.522.0</td>
<td>X</td>
<td>X</td>
<td>7 Days</td>
<td>7 Days</td>
<td></td>
<td>XXXXXXXXXX</td>
<td>30.09.2019 15:31:41</td>
<td>XX</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>Systemt</td>
<td>4.18.1902.5</td>
<td>1.303.522.0</td>
<td>1.303.522.0</td>
<td>X</td>
<td>X</td>
<td>7 Days</td>
<td>7 Days</td>
<td></td>
<td>XXXXXXXXXX</td>
<td>30.09.2019 15:31:41</td>
<td>XX</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>Systemt</td>
<td>4.18.1902.5</td>
<td>1.303.522.0</td>
<td>1.303.522.0</td>
<td>X</td>
<td>X</td>
<td>7 Days</td>
<td>7 Days</td>
<td></td>
<td>XXXXXXXXXX</td>
<td>30.09.2019 15:31:41</td>
<td>XX</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>Systemt</td>
<td>4.18.1902.5</td>
<td>1.303.522.0</td>
<td>1.303.522.0</td>
<td>X</td>
<td>X</td>
<td>7 Days</td>
<td>7 Days</td>
<td></td>
<td>XXXXXXXXXX</td>
<td>30.09.2019 15:31:41</td>
<td>XX</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>Systemt</td>
<td>4.18.1902.5</td>
<td>1.303.522.0</td>
<td>1.303.522.0</td>
<td>X</td>
<td>X</td>
<td>7 Days</td>
<td>7 Days</td>
<td></td>
<td>XXXXXXXXXX</td>
<td>30.09.2019 15:31:41</td>
<td>XX</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>Systemt</td>
<td>4.18.1902.5</td>
<td>1.303.522.0</td>
<td>1.303.522.0</td>
<td>X</td>
<td>X</td>
<td>7 Days</td>
<td>7 Days</td>
<td></td>
<td>XXXXXXXXXX</td>
<td>30.09.2019 15:31:41</td>
<td>XX</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>Systemt</td>
<td>4.18.1902.5</td>
<td>1.303.522.0</td>
<td>1.303.522.0</td>
<td>X</td>
<td>X</td>
<td>7 Days</td>
<td>7 Days</td>
<td></td>
<td>XXXXXXXXXX</td>
<td>30.09.2019 15:31:41</td>
<td>XX</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>Systemt</td>
<td>4.18.1902.5</td>
<td>1.303.522.0</td>
<td>1.303.522.0</td>
<td>X</td>
<td>X</td>
<td>7 Days</td>
<td>7 Days</td>
<td></td>
<td>XXXXXXXXXX</td>
<td>30.09.2019 15:31:41</td>
<td>XX</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>Systemt</td>
<td>4.18.1902.5</td>
<td>1.303.522.0</td>
<td>1.303.522.0</td>
<td>X</td>
<td>X</td>
<td>7 Days</td>
<td>7 Days</td>
<td></td>
<td>XXXXXXXXXX</td>
<td>30.09.2019 15:31:41</td>
<td>XX</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>Systemt</td>
<td>4.18.1902.5</td>
<td>1.303.522.0</td>
<td>1.303.522.0</td>
<td>X</td>
<td>X</td>
<td>7 Days</td>
<td>7 Days</td>
<td></td>
<td>XXXXXXXXXX</td>
<td>30.09.2019 15:31:41</td>
<td>XX</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>Systemt</td>
<td>4.18.1902.5</td>
<td>1.303.522.0</td>
<td>1.303.522.0</td>
<td>X</td>
<td>X</td>
<td>7 Days</td>
<td>7 Days</td>
<td></td>
<td>XXXXXXXXXX</td>
<td>30.09.2019 15:31:41</td>
<td>XX</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>Systemt</td>
<td>4.18.1902.5</td>
<td>1.303.522.0</td>
<td>1.303.522.0</td>
<td>X</td>
<td>X</td>
<td>7 Days</td>
<td>7 Days</td>
<td></td>
<td>XXXXXXXXXX</td>
<td>30.09.2019 15:31:41</td>
<td>XX</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>Systemt</td>
<td>4.18.1902.5</td>
<td>1.303.522.0</td>
<td>1.303.522.0</td>
<td>X</td>
<td>X</td>
<td>7 Days</td>
<td>7 Days</td>
<td></td>
<td>XXXXXXXXXX</td>
<td>30.09.2019 15:31:41</td>
<td>XX</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>Systemt</td>
<td>4.18.1902.5</td>
<td>1.303.522.0</td>
<td>1.303.522.0</td>
<td>X</td>
<td>X</td>
<td>7 Days</td>
<td>7 Days</td>
<td></td>
<td>XXXXXXXXXX</td>
<td>30.09.2019 15:31:41</td>
<td>XX</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>Systemt</td>
<td>4.18.1902.5</td>
<td>1.303.522.0</td>
<td>1.303.522.0</td>
<td>X</td>
<td>X</td>
<td>7 Days</td>
<td>7 Days</td>
<td></td>
<td>XXXXXXXXXX</td>
<td>30.09.2019 15:31:41</td>
<td>XX</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>Systemt</td>
<td>4.18.1902.5</td>
<td>1.303.522.0</td>
<td>1.303.522.0</td>
<td>X</td>
<td>X</td>
<td>7 Days</td>
<td>7 Days</td>
<td></td>
<td>XXXXXXXXXX</td>
<td>30.09.2019 15:31:41</td>
<td>XX</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>Systemt</td>
<td>4.18.1902.5</td>
<td>1.303.522.0</td>
<td>1.303.522.0</td>
<td>X</td>
<td>X</td>
<td>7 Days</td>
<td>7 Days</td>
<td></td>
<td>XXXXXXXXXX</td>
<td>30.09.2019 15:31:41</td>
<td>XX</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>Systemt</td>
<td>4.18.1902.5</td>
<td>1.303.522.0</td>
<td>1.303.522.0</td>
<td>X</td>
<td>X</td>
<td>7 Days</td>
<td>7 Days</td>
<td></td>
<td>XXXXXXXXXX</td>
<td>30.09.2019 15:31:41</td>
<td>XX</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>Systemt</td>
<td>4.18.1902.5</td>
<td>1.303.522.0</td>
<td>1.303.522.0</td>
<td>X</td>
<td>X</td>
<td>7 Days</td>
<td>7 Days</td>
<td></td>
<td>XXXXXXXXXX</td>
<td>30.09.2019 15:31:41</td>
<td>XX</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>Systemt</td>
<td>4.18.1902.5</td>
<td>1.303.522.0</td>
<td>1.303.522.0</td>
<td>X</td>
<td>X</td>
<td>7 Days</td>
<td>7 Days</td>
<td></td>
<td>XXXXXXXXXX</td>
<td>30.09.2019 15:31:41</td>
<td>XX</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>Systemt</td>
<td>4.18.1902.5</td>
<td>1.303.522.0</td>
<td>1.303.522.0</td>
<td>X</td>
<td>X</td>
<td>7 Days</td>
<td>7 Days</td>
<td></td>
<td>XXXXXXXXXX</td>
<td>30.09.2019 15:31:41</td>
<td>XX</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>Systemt</td>
<td>4.18.1902.5</td>
<td>1.303.522.0</td>
<td>1.303.522.0</td>
<td>X</td>
<td>X</td>
<td>7 Days</td>
<td>7 Days</td>
<td></td>
<td>XXXXXXXXXX</td>
<td>30.09.2019 15:31:41</td>
<td>XX</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>Systemt</td>
<td>4.18.1902.5</td>
<td>1.303.522.0</td>
<td>1.303.522.0</td>
<td>X</td>
<td>X</td>
<td>7 Days</td>
<td>7 Days</td>
<td></td>
<td>XXXXXXXXXX</td>
<td>30.09.2019 15:31:41</td>
<td>XX</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>Systemt</td>
<td>4.18.1902.5</td>
<td>1.303.522.0</td>
<td>1.303.522.0</td>
<td>X</td>
<td>X</td>
<td>7 Days</td>
<td>7 Days</td>
<td></td>
<td>XXXXXXXXXX</td>
<td>30.09.2019 15:31:41</td>
<td>XX</td>
</tr>
</tbody>
</table>
</div>
CSS:
body{
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
font-weight: 400;
line-height: 1.5;
text-align: left;
}
Javascript #1:
$(document).ready(function() {
var table = $("#example").DataTable({
orderCellsTop: true,
fixedHeader: true,
scrollingCollapse: true,
paging: false,
searching: false,
info: false,
scrollCollapse: true,
scrollY: "35vh",
'createdRow': function(row, data, dataIndex){
$('td:eq(11)', row).css('min-width', '126px');
}
});
} );
Javascript #2:
$(document).ready(function() {
$('#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" />' );
$( '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,
fixedHeader: true,
scrollingCollapse: true,
paging: false,
searching: false,
info: false,
scrollCollapse: true,
scrollY: "35vh",
'createdRow': function(row, data, dataIndex){
$('td:eq(11)', row).css('min-width', '126px');
}
});
} );
Upvotes: 0
Views: 564
Answers (1)
Imthath
Reputation: 85
Just I've added
style="width:100%"
in the following line of your javascript code
'<input style="width:100%" type="text" />'
It has worked
Upvotes: 1
Related Questions
- Jquery data table column filter header responsive
- Custom filter to Datatable
- Column width not working in DataTables bootstrap
- DataTables is changing the width of columns with ajax sourced data in a Bootstrap 3.3.7 application
- Fit datatables to screen
- How can I filter the Bootstrap DataTables without removing the row headlines?
- Set the column width of jQuery DataTables Column Filter
- DataTables bootstrap grid width. Can we style tables inline?
- Multi column filter in DataTables(bootstrap)
- Styling bootstrap data table search filter