无法更改DataTable的搜索框宽度或位置
无法更改DataTable的搜索框宽度或位置
提问于 2019-02-21 10:53:52
我有一个DataTable，我一直在设计/设置它，我已经快到了，但我只是想不出我为search input所追求的最后几样造型。
- 左对齐输入
- 使视野变宽
- 将焦点放在负载上
- 使字段与现场其他字段相同大小
我有下面的代码
JQuery
$('#dialPlanListTable').dataTable({
"ordering": true, // Allows ordering
"searching": true, // Searchbox
"paging": true, // Pagination
"info": false, // Shows 'Showing X of X' information
"pagingType": 'simple_numbers', // Shows Previous, page numbers & next buttons only
"pageLength": 10, // Defaults number of rows to display in table
"columnDefs": [
{
"targets": 'dialPlanButtons',
"searchable": false, // Stops search in the fields
"sorting": false, // Stops sorting
"orderable": false // Stops ordering
}
],
"dom": '<"top"f>rt<"bottom"lp><"clear">', // Positions table elements
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]], // Sets up the amount of records to display
"language": {
"search": "_INPUT_", // Removes the 'Search' field label
"searchPlaceholder": "Search" // Placeholder for the search box
}
});电流看
返回/呈现的
<div class="top">
<div id="dialPlanListTable_filter" class="dataTables_filter">
<label>
<input type="search" class="form-control input-sm" placeholder="Search" aria-controls="dialPlanListTable">
</label>
</div>
</div>如您所见，搜索框比上面的搜索框要小(一旦此框被样式化，搜索框将被移除)，而不是留给表。我看了https://datatables.net/网站，找不到我需要的最后几样东西。
我不想更新我的.css，因为我不想影响网站的重置，只是这个页面，所以不要介意使用JQuery添加样式。此外，input位于label中，如上面的HTML所示
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-02-21 11:54:07
不是我所希望的，而是通过做下面的事情来解决的
$('#dialPlanListTable').dataTable({
"ordering": true, // Allows ordering
"searching": true, // Searchbox
"paging": true, // Pagination
"info": false, // Shows 'Showing X of X' information
"pagingType": 'simple_numbers', // Shows Previous, page numbers & next buttons only
"pageLength": 10, // Defaults number of rows to display in table
"columnDefs": [
{
"targets": 'dialPlanButtons',
"searchable": false, // Stops search in the fields
"sorting": false, // Stops sorting
"orderable": false // Stops ordering
}
],
"dom": '<"top"f>rt<"bottom"lp><"clear">', // Positions table elements
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]], // Sets up the amount of records to display
"language": {
"search": "_INPUT_", // Removes the 'Search' field label
"searchPlaceholder": "Search" // Placeholder for the search box
},
"search": {
"addClass": 'form-control input-lg col-xs-12'
},
"fnDrawCallback":function(){
$("input[type='search']").attr("id", "searchBox");
$('#dialPlanListTable').css('cssText', "margin-top: 0px !important;");
$("select[name='dialPlanListTable_length'], #searchBox").removeClass("input-sm");
$('#searchBox').css("width", "300px").focus();
$('#dialPlanListTable_filter').removeClass('dataTables_filter');
}
});所以我想要的样子
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54805366
复制相关文章
相似问题
腾讯云开发者
