Filtering DataTable using JQuery DataTable Column Filter

using JQuery DataTable in visual webpart sharepoint

ascx page

<script src="/_layouts/1033/JQueryDataTableUsing/complete.js" type="text/javascript"></script>
<script src="/_layouts/1033/JQueryDataTableUsing/Jquery.js" type="text/javascript"></script>
<script src="/_layouts/1033/JQueryDataTableUsing/jquery.dataTables.min.js"
    type="text/javascript"></script>
<script src="/_layouts/1033/JQueryDataTableUsing/jquery.dataTables.columnFilter.js"
    type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".gvv").dataTable();
        });

</script>    <asp:GridView ID="dtGridView" runat="server" CssClass="gvv" OnPreRender="dtGridView_PreRender">

    </asp:GridView>


ascx.cs page

protected void dtGridView_PreRender(object sender, EventArgs e)
        {
            SPSecurity.RunWithElevatedPrivileges(delegate()
            {
                using (SPSite site = new SPSite("site url"))
                {
                    using (SPWeb web = site.OpenWeb())
                    {
                        SPList list = web.Lists["DataTable"];
                        SPListItemCollection coll = list.Items;
                        DataTable dt = coll.GetDataTable();
                        dtGridView.DataSource = dt;
                        dtGridView.DataBind();

                        if (dtGridView.Rows.Count > 0)
                        {
                            //This replaces <td> with <th> and adds the scope attribute
                            dtGridView.UseAccessibleHeader = true;

                            //This will add the <thead> and <tbody> elements
                            dtGridView.HeaderRow.TableSection = TableRowSection.TableHeader;

                            //This adds the <tfoot> element.
                            //Remove if you don't have a footer row
                            dtGridView.FooterRow.TableSection = TableRowSection.TableFooter;
                        }
                    }
                }
            });


        }

Reference url's
Reference url 1
Refererence url 2
Reference url 3
Reference url 4
Reference url 5
Reference url 6

Download Query DataTable url
jquery-datatables-column-filter