jQuery数据表筛选器位置
jQuery数据表筛选器位置
提问于 2016-08-09 00:52:47
我正在处理jQuery数据表，并尝试将过滤器/搜索框定位在与保存数据表的div标题相同的行上。
以下是该页面的截图：
下面是标记：
<div
style="box-shadow: 2px 2px 10px 0px rgba(163,153,163,1); padding-top:5px; padding-left: 15px; padding-right: 15px; padding-bottom: 15px; ">
<h2>Funding Summary</h2>
<asp:ListView
ID="lvFundingSummary"
OnItemDataBound="lvFundingSummary_ItemDataBound"
runat="server" >
<ItemTemplate>
<tr>
<td style="width: 65%; text-align:left; padding-top: 5px; padding-bottom:5px;">
<asp:Label ID="lblResearchArea" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "PlName")%>' />
</td>
<td style="width: 15%; text-align:right; padding-top: 5px; padding-bottom:5px;">
<asp:Label ID="lblFundingGross" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "FundingGross", "{0:c}")%>' />
</td>
<td style="text-align:right; padding-top: 5px; padding-bottom:5px;">
<asp:Label ID="lblGross" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "AllGross", "{0:c}")%>' />
</td>
</tr>
</ItemTemplate>
<LayoutTemplate>
<table
ID="itemPlaceholderContainer"
style="width: 100%">
<thead>
<tr>
<th style="width: 65%; text-align:left; padding-bottom:10px;">Research Area</th>
<th style="width: 15%; text-align:right; padding-bottom:10px;">Gross</th>
<th style="text-align:right; padding-bottom:10px;">All EPRI Gross</th>
</tr>
</thead>
<tfoot>
<tr>
<td style="width: 65%; text-align:left; padding-bottom:10px;"><b>Total(s)</b></td>
<td style="width: 15%; text-align:right; padding-bottom:10px;"><b><asp:Label ID="lblTotalFunding" runat="server" /></b></td>
<td style="text-align:right; padding-bottom:10px;"><b><asp:Label ID="lblTotalEpriGross" runat="server" /></b></td>
</tr>
</tfoot>
<tbody runat="server">
<asp:PlaceHolder ID="itemPlaceholder" runat="server" />
</tbody>
</table>
</LayoutTemplate>
</asp:ListView>
</div>
<script type="text/javascript">
$(document).ready(function () {
var table = $('#itemPlaceholderContainer').dataTable(
{
"scrollY": "300px",
"scrollX": true,
"scrollCollapse": true,
"paging": false,
"autowidth": true,
dom: 'frti<"floatRight"B><"clear">',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
});
});
</script> 资金摘要是标题，我希望过滤器框排在它的右边，对齐对表的右边。
回答 2
Stack Overflow用户
发布于 2016-08-09 01:24:20
您只需创建自己的过滤器，并将其添加到页面中的任何元素中
$(document).ready(function() {
$('#example').DataTable({
initComplete: function() {
this.api().columns().every(function() {
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo($('#filters-area'))
.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>')
});
});
}
});
});Stack Overflow用户
发布于 2016-08-09 01:40:19
在这里找到了一个解决方法：
https://datatables.net/examples/advanced_init/dom_toolbar.html
我添加了这样的样式：
.filterPad{
padding-top:15px;
}然后将以下内容添加到函数中：
dom: '<"toolbar"><"filterPad"f>rti<"floatRight"B><"clear">',页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38834671
复制相关文章
相似问题
腾讯云开发者
