jQuery 数据表过滤器位置

Question

我正在使用 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>  

Funding Summary 是表头，我希望过滤框排在它的右侧，与表格的右侧齐平。

Answer 1

您可以简单地创建自己的过滤器并将它们添加到页面中的任何元素中

$(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>')
        });
      });
    }
  });
});

演示：https://jsfiddle.net/4ruvq6dr/

Answer 2

在这里找到了解决方法：

https://datatables.net/examples/advanced_init/dom_toolbar.html

我添加了这个样式：

.filterPad{
padding-top:15px;
}

然后在函数中添加以下内容：

dom: '<"toolbar"><"filterPad"f>rti<"floatRight"B><"clear">',