Datatables 如何更改数据表中搜索字段的宽度
我可以更改数据表中搜索文本字段的宽度吗 我现在正在写下面的代码,但它不起作用Datatables 如何更改数据表中搜索字段的宽度,datatables,jquery-datatables,Datatables,Jquery Datatables,我可以更改数据表中搜索文本字段的宽度吗 我现在正在写下面的代码,但它不起作用 $('#example').dataTable() .columnFilter({ sPlaceHolder: "head:before", aoColumns: [ { type: "text",width:"10px" }, { type: "date-range" },
$('#example').dataTable()
.columnFilter({ sPlaceHolder: "head:before",
aoColumns: [ { type: "text",width:"10px" },
{ type: "date-range" },
{ type: "date-range" }
]
});
如果我的数据表是动态生成的,如下所示:
$('#example').dataTable({
"aaData": aDataSet,
"aoColumns": [
{ "sTitle": "#","sWidth": "10px" },
{ "sTitle": "ID" },
{ "sTitle": "Staff Name" },
{ "sTitle": "Rig Days" },
{ "sTitle": "Manager"},
{ "sTitle": "Grade"},
{ "sTitle": "Tools"},
{ "sTitle": "Vacations"},
{ "sTitle": "Presently On"},
]
});
}
如何在这个动态创建的数据表中添加搜索字段以按每列进行搜索?尝试使用css更改宽度 范例
.text_filter{
width:45%;
min-width:200px;
}
要更改搜索框的宽度,我只需进入我的
.css
文件并输入以下内容:
.dataTables_filter input { width: 300px }
我在我的环境中应用了此解决方案(Laravel 5.2、yajra/Laravel DataTables 6.0、Bootstrap 3.x): 我的桌子:
<table id="my-table" class="table table-striped table-hover" style="font-size: 80%">
<thead>
<tr>
<th class="input-filter" style="text-align:center;width: 5%">ID</th>
...
</tr>
</thead>
<tbody></tbody>
<tfoot>
<tr>
<th style="text-align:center;width: 5%">ID</th>
...
</tr>
</tfoot>
身份证件
...
身份证件
...
我的剧本:
<script type="text/javascript">
var dt = $('#my-table').DataTable({
stateSave: true,
responsive: true,
processing: true,
serverSide: true,
order: [[ 0, "desc" ]],
lengthMenu: [[5, 10, -1], [5, 10, "All"]],
ajax: {
url: '...',
},
columns: [
{data: 'id', name: 'id',orderable:true,searchable:true},
...
],
language: {
url: '....'
},
initComplete: function () {
this.api().columns('.input-filter').every(function () {
var column = this;
var input = document.createElement("input");
// start - this is the code inserted by me
$(input).attr( 'style', 'text-align: center;width: 100%');
// end - this is the code inserted by me
$(input).appendTo($(column.footer()).empty())
.on('keyup', function () {
var val = $.fn.dataTable.util.escapeRegex($(this).val());
column.search(val ? val : '', true, true).draw();
});
});
}
});
</script>
var dt=$(“#我的表”).DataTable({
stateSave:没错,
回答:是的,
处理:对,
服务器端:是的,
订单:[[0,“描述”],
长度菜单:[[5,10,-1],[5,10,“全部”],
阿贾克斯:{
url:“…”,
},
栏目:[
{data:'id',name:'id',orderable:true,searchable:true},
...
],
语言:{
网址:‘……’
},
initComplete:函数(){
this.api().columns('.input filter').every(函数(){
var列=此;
var输入=document.createElement(“输入”);
//开始-这是我插入的代码
$(输入).attr('style','text align:center;width:100%);
//结束-这是我插入的代码
$(输入).appendTo($(column.footer()).empty())
.on('keyup',函数(){
var val=$.fn.dataTable.util.escapeRegex($(this.val());
search(val?val:“”,true,true).draw();
});
});
}
});
这是中继器
<asp:Repeater ID="rptClients" runat="server">
<HeaderTemplate>
<table id="example" class="display">
<thead>
<tr style="color:#fff;">
<th>Edit</th>
<th>Client Name</th>
<th>Address</th>
<th>City</th>
<th>State</th>
<th>Zip</th>
<th>Phone</th>
<th>Fax</th>
<th>Client Type</th>
<th>Active</th>
</tr>
<tr id="filterRow">
<td>Edit</td>
<td>Client Name</td>
<td>Address</td>
<td>City</td>
<td>State</td>
<td>Zip</td>
<td>Phone</td>
<td>Fax</td>
<td>Client Type</td>
<td>Active</td>
</tr>
</thead>
<tfoot style="display:none;">
<tr>
<td> </td>
</tr>
</tfoot>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><div class="padBtm-05 padTop-10"><asp:Button runat="server" ID="btnEdit" Text="Edit" /></div></td>
<td>
<%# Container.DataItem("ClientName")%>
</td>
<td>
<%# Container.DataItem("ClientAddress")%>
</td>
<td>
<%# Container.DataItem("ClientCity")%>
</td>
<td>
<%# Container.DataItem("State")%>
</td>
<td>
<%# Container.DataItem("ClientZip")%>
</td>
<td>
<%# Container.DataItem("ClientPhone")%>
</td>
<td>
<%# Container.DataItem("ClientFax")%>
</td>
<td>
<%# Container.DataItem("ClientType")%>
</td>
<td>
<%# Container.DataItem("Active")%>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
编辑
客户名称
地址
城市
陈述
拉链
电话
传真
客户端类型
活跃的
编辑
客户名称
地址
城市
陈述
拉链
电话
传真
客户端类型
活跃的
所有列上都有筛选器。这里我实际上隐藏了编辑列过滤器,因为它不需要。如果我没有为此列渲染筛选器,则我的筛选将关闭1列。在javascript中,我的目标是我的表行,它最终将成为我的标题占位符。根据占位符名称,您可以运行if语句,该语句允许您以输入元素为目标并设置项的宽度。我发现设置过滤器的宽度会设置表上的列宽
// apply the input styling
$('#example thead td').each(function (i) {
var title = $('#example thead th').eq($(this).index()).text();
if (title == "Edit") {
var serach = '<input type="text" style="display:none;" placeholder="' + title + '" />';
} else if (title == "Client Name") {
var serach = '<input type="text" style="width:370px;" placeholder="' + title + '" />';
} else if (title == "Zip") {
var serach = '<input type="text" style="width:50px;" placeholder="' + title + '" />';
} else {
var serach = '<input type="text" placeholder="' + title + '" />';
}
$(this).html('');
$(serach).appendTo(this).keyup(function () { table.fnFilter($(this).val(), i) })
});
// 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();
}
});
});
//应用输入样式
$(#示例thead td')。每个(函数(i){
var title=$('#示例thead th').eq($(this.index()).text();
如果(标题=“编辑”){
var serach=“”;
}else if(标题=“客户名称”){
var serach=“”;
}else if(标题=“Zip”){
var serach=“”;
}否则{
var serach=“”;
}
$(this.html(“”);
$(serach).appendTo(this.keyup)(函数(){table.fnFilter($(this.val(),i)})
});
//应用搜索
table.columns().every(函数(){
var=这个;
$('input',this.footer()).on('keyup change',function(){
if(that.search()!==此.value){
那个
.search(此.value)
.draw();
}
});
});
上述解决方案都不适合我;然后我得到了这个:
$(document).ready(function () {
$('.dataTables_filter input[type="search"]').css(
{'width':'350px','display':'inline-block'}
);
});
而且它工作得很好
如果要将占位符也放置在搜索框内,请使用此
$('.dataTables_filter input[type="search"]').
attr('placeholder','Search in this blog ....').
css({'width':'350px','display':'inline-block'});
这肯定会奏效。我在使用dataTables时使用了下面的代码 JS<
<script>
var datatable = $('#table').DataTable({
...<datatables properties>,
initComplete: function () {
$('.dataTables_filter input[type="search"]').css({ 'width': '350px', 'display': 'inline-block' });
}
</script>
$(document).ready(function() {
$('#yourTableId').DataTable();
var addressTableFilter = document.getElementById('addressTable_filter');
addressTableFilter.firstChild.getElementsByTagName('input')[0].style.width = "400px";
addressTableFilter.firstChild.getElementsByTagName('input')[0].setAttribute('placeholder', 'Search');
addressTableFilter.firstChild.removeChild(document.getElementById('addressTable_filter').firstChild.firstChild);
});
$(document).ready(function(){
$('#datatable-buttons_filter').css({"position":"relative","left":"-100px"});
});