jQuery Datatables filter position

Question

Я работаю с jQuery datatables, и я пытаюсь разместить поле фильтра/поиска в той же строке, что и заголовок div, который держит datatable.

Вот скриншот страницы:

А вот разметка:

<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> 

Финансирование Резюме является заголовок, я хочу коробку фильтра выстраиваться вправо от него, заподлицо с правой стороной стола.

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">',