使用 DataTable.js 在 asp.net gridview 中使用下拉列表按列过滤

Posted 2023-04-13

【中文标题】使用 DataTable.js 在 asp.net gridview 中使用下拉列表按列过滤

【英文标题】：Columnwise filter with dropdown in asp.net gridview using DataTable.js

【发布时间】：2016-05-10 20:18:27

【问题描述】：

DataTable.js 提供Columnwise Search with Dropdown，如下所示。

我在这里做了精确的演示 using html,CSS,JS only 也可以正常工作。

现在，在我的 asp.net webforms 项目中，我已经集成了 DataTable.js，它工作得非常好。

我是怎么做到的？在这里，

gridview.aspx

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">

    <link href="Content/DataTables/css/dataTables.jqueryui.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
</asp:Content>

    <asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" runat="server">
   </asp:Content>


<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">

<asp:GridView ID="GridView1" runat="server" CssClass="gvdatatable" AutoGenerateColumns="true" OnPreRender="GridView1_PreRender"></asp:GridView>


<script>
         $(document).ready(function () 
             $('#<%=GridView1.ClientID%>').DataTable(
                 initComplete: function () 
                     this.api().columns().every(function () 
                         var column = this;
                         var select = $('<select><option value=""></option></select>')
                             .appendTo($(column.footer()).empty())
                             .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>')
                         );
                     );
                 
             );
         );
        </script>
</asp:Content>

gridview.aspx.cs

protected void GridView1_PreRender(object sender, EventArgs e)
        
            if (GridView1.Rows.Count > 0)
            
                GridView1.UseAccessibleHeader = true;
                GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
                GridView1.FooterRow.TableSection = TableRowSection.TableFooter;
            

        

一切正常。只是问题是它没有在底部显示带有值的下拉列表。我有什么遗漏吗？

怎么做？

我们将不胜感激。

额外说明：

最近发现，在DataTable示例中，它有

  <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>

当我检查控制台时，gridview 的<tfoot> 是空的。我认为需要一些魔法。

【参考方案1】：

里面

<asp:GridView /> 

你需要

showfooter="true"