title: Columnwise filter with dropdown in asp.net gridview using DataTable.js
body: <p>DataTable.js provides <a href="http://www.datatables.net/release-datatables/examples/api/multi_filter_select.html" rel="nofollow">Columnwise Search with Dropdown</a> as shown here.</p>
  
  <p>I have made exact demo here <a href="https://plnkr.co/edit/a0kpcm41OOL79VHuPSIK?p=info" rel="nofollow">using HTML,CSS,JS only</a> which also works fine.</p>
  
  <p>Now, In my asp.net webforms project I have integrated <code>DataTable.js</code> that works perfectly fine.</p>
  
  <p>How have I done it? here it is,</p>
  
  <p><strong><em>gridview.aspx</em></strong></p>
  
  <pre><code>&lt;asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server"&gt;
  
      &lt;link href="Content/DataTables/css/dataTables.jqueryui.css" rel="stylesheet" /&gt;
      &lt;script src="https://code.jquery.com/jquery-1.12.0.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  &lt;/asp:Content&gt;
  
      &lt;asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" runat="server"&gt;
     &lt;/asp:Content&gt;
  
  
  &lt;asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server"&gt;
  
  &lt;asp:GridView ID="GridView1" runat="server" CssClass="gvdatatable" AutoGenerateColumns="true" OnPreRender="GridView1_PreRender"&gt;&lt;/asp:GridView&gt;
  
  
  &lt;script&gt;
           $(document).ready(function () {
               $('#&lt;%=GridView1.ClientID%&gt;').DataTable({
                   initComplete: function () {
                       this.api().columns().every(function () {
                           var column = this;
                           var select = $('&lt;select&gt;&lt;option value=""&gt;&lt;/option&gt;&lt;/select&gt;')
                               .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('&lt;option value="' + d + '"&gt;' + d + '&lt;/option&gt;')
                           });
                       });
                   }
               });
           });
          &lt;/script&gt;
  &lt;/asp:Content&gt;
  </code></pre>
  
  <p><strong><em>gridview.aspx.cs</em></strong></p>
  
  <pre><code>protected void GridView1_PreRender(object sender, EventArgs e)
          {
              if (GridView1.Rows.Count &gt; 0)
              {
                  GridView1.UseAccessibleHeader = true;
                  GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
                  GridView1.FooterRow.TableSection = TableRowSection.TableFooter;
              }
  
          }
  </code></pre>
  
  <p>Everything works fine. Just the problem is it doesn't show dropdown with values at bottom. Is there something I'm missing?</p>
  
  <p>How to do it? </p>
  
  <p>Help would be greatly appreciated.</p>
  
  <p><strong><em>Extra Notes:</em></strong></p>
  
  <p>Recently figure out that, in DataTable example, it has </p>
  
  <pre><code>  &lt;tfoot&gt;
          &lt;tr&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Position&lt;/th&gt;
              &lt;th&gt;Office&lt;/th&gt;
              &lt;th&gt;Age&lt;/th&gt;
              &lt;th&gt;Start date&lt;/th&gt;
              &lt;th&gt;Salary&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/tfoot&gt;
  </code></pre>
  
  <p>when I check console, gridview's <code>&lt;tfoot&gt;</code> is empty. I think there some magic is needed.</p>