title: It is possible to use DataTables Column Filter Add-on with a Gridview
body: <p>I am trying to use the DataTables Column Filter Add-on on a gridview table using an sql datasource but i am not coming up with any luck. I have the gridview render a header and footer but i can not add anything to the footer. </p>
  
  <pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="Glossary.aspx.cs" Inherits="Home.Glossary" %&gt;
  
  &lt;!DOCTYPE html&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
      &lt;title spellcheck="true"&gt;Glossary&lt;/title&gt;
      &lt;style type="text/css" media="all"&gt;
          @import "DataTables-1.9.4/DataTables-1.9.4/media/css/jquery.dataTables_themeroller.css";
          #form1 {
              width: 100%;
          }
      &lt;/style&gt;        
  
          &lt;script src="DataTables-1.9.4/DataTables-1.9.4/media/js/jquery.js"&gt;&lt;/script&gt;
          &lt;script src="DataTables-1.9.4/DataTables-1.9.4/media/js/jquery.dataTables.js"&gt;&lt;/script&gt;
          &lt;script src="JQuery-DataTables-ColumnFilter/media/js/jquery.dataTables.columnFilter.js"&gt;&lt;/script&gt;
           &lt;script&gt;
      $(document).ready(function () {
          $('#&lt;%=GridView1.ClientID%&gt;').dataTable().columnFilter();
           });
  &lt;/script&gt;
      &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
  
      &lt;div style="background: #A0A0A0"&gt;
  
          &lt;/div&gt;
  
          &lt;asp:GridView ID="GridView1" runat="server" DataKeyNames="TermText,DefNbr,DefVerNbr" DataSourceID="TedGlossary" 
              EnableSortingAndPagingCallbacks="True" OnSelectedIndexChanged="GridView1_SelectedIndexChanged" ShowFooter="true"
               AutoGenerateColumns="False" AutoGenerateEditButton="False" style="margin-right: 0px" Width="100%" Height="382px"&gt;               
  
              &lt;Columns&gt;
                  &lt;asp:BoundField DataField="TermText" HeaderText="Term" ReadOnly="True" SortExpression="Term" /&gt;
                  &lt;asp:BoundField DataField="DefNbr" HeaderText="Number" ReadOnly="True" SortExpression="DefinitionNumber" /&gt;
                  &lt;asp:BoundField DataField="DefVerNbr" HeaderText="Version" ReadOnly="True" SortExpression="DefinitinonVersionNumber" /&gt;
                  &lt;asp:BoundField DataField="DefText" HeaderText="Definition" SortExpression="Definition" /&gt;
                  &lt;asp:BoundField DataField="AmplifyingExplanationText" HeaderText="Amplifying Explanation" SortExpression="AmplifyingExplanationText" /&gt;
                  &lt;asp:BoundField DataField="SeeAlsoText" HeaderText="See Also" SortExpression="See Also" /&gt;
                  &lt;asp:BoundField DataField="AuthoritativeSrcText" HeaderText="Authoritative Source" SortExpression="AuthoritativeSrcText" /&gt;
                  &lt;asp:BoundField DataField="ScopeName" HeaderText="Scope" SortExpression="Scope" /&gt;
                  &lt;asp:BoundField DataField="DomnName" HeaderText="Domain" SortExpression="Domain" /&gt;
                  &lt;asp:BoundField DataField="GovernanceStateName" HeaderText="Governance State" SortExpression="GovernanceStateName" /&gt;
                  &lt;asp:BoundField DataField="LastUpdtTimestamp" HeaderText="Last Updated" SortExpression="LastUpdtTimestamp" /&gt;
  
              &lt;/Columns&gt;
  
  
          &lt;/asp:GridView&gt;
          &lt;asp:SqlDataSource ID="TedGlossary" runat="server" ConnectionString="&lt;%$ ConnectionStrings:Glsry_Taylor %&gt;" SelectCommand="SELECT * FROM [Glossary] ORDER BY [TermText]"&gt;&lt;/asp:SqlDataSource&gt;
  
           &lt;/form&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the CS for the rendering </p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using System.Web.UI;
  using System.Web.UI.WebControls;
  
  namespace Home
  {
      public partial class Glossary : System.Web.UI.Page
      {
          protected void Page_Load(object sender, EventArgs e)
          {
              GridView1.PreRender += new EventHandler(GridView1_PreRender);
          }
          protected void GridView1_PreRender(object sender, EventArgs e)
          {
             if (GridView1.Rows.Count &gt; 0)
             {
               //forces grid to render thead/tbody/tfoot elements 
               GridView1.UseAccessibleHeader = true; 
               GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
               GridView1.FooterRow.TableSection = TableRowSection.TableFooter;
  
             }
  }
          protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
          {
  
          }
  }
  }
  </code></pre>
  
  <p>Here is the HTML output, there is too much for the site to handle i put in pastebin the link is included</p>
  
  <p><a href="http://pastebin.com/2qh2eXWY" rel="nofollow">http://pastebin.com/2qh2eXWY</a></p>