本文介绍了具有列过滤的数据表，但宽度与不带列过滤时相同的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我目前有一个具有特定宽度的数据表。
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.
我需要怎么做才能使文本输入与原始标题的大小相同？ （因此，我确实想要一个与示例＃1类似的表，但具有列过滤行。）
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.)
普通代码来自codepen：
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：
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：
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');
}
});
} );
推荐答案
我已添加
style="width:100%"
在您的JavaScript代码的以下行中
in the following line of your javascript code
'<input style="width:100%" type="text" />'
已成功
这篇关于具有列过滤的数据表，但宽度与不带列过滤时相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！