ASP.Net: Search multiple individual columns in jQuery DataTable with Export options

Hi firasataries,

Refer the below example.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

HTML

<div style="width: 500px">
    Name:<asp:TextBox ID="txtName" runat="server" placeholder="name"></asp:TextBox>
    <br />
    City:<asp:TextBox ID="txtCity" runat="server" placeholder="city"></asp:TextBox>
    <br />
    Country:<asp:TextBox ID="txtCountry" runat="server" placeholder="country"></asp:TextBox>
    <hr />
    <asp:GridView ID="GridView1" runat="server" CssClass="display compact" AutoGenerateColumns="false">
        <Columns>
            <asp:BoundField DataField="CustomerID" HeaderText="Customer Id" />
            <asp:BoundField DataField="ContactName" HeaderText="Name" />
            <asp:BoundField DataField="City" HeaderText="City" />
            <asp:BoundField DataField="Country" HeaderText="Country" />
        </Columns>
    </asp:GridView>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
<script type="text/javascript">
    $(function () {
        var table = $("[id*=GridView1]").DataTable({
            bLengthChange: true,
            lengthMenu: [[5, 10, -1], [5, 10, "All"]],
            bFilter: true,
            bSort: true,
            bPaginate: true,
            dom: 'Blrtip',
            buttons: [
                {
                    extend: 'excel', text: 'Excel', className: 'exportExcel',
                    filename: 'Customers', exportOptions: { modifier: { page: 'all' } }
                },
                {
                    extend: 'pdf', text: 'PDF', className: 'exportExcel', filename: 'Customers',
                    exportOptions: { modifier: { page: 'all' }, columns: ':visible' }, orientation: 'landscape', pageSize: 'LEGAL'
                }
            ]
        });
        $('[id*=txtName]').keyup(function () {
            // Search only in Name column i.e. Column 1.
            table.column(1).search($(this).val()).draw();
        });
        $('[id*=txtCity]').keyup(function () {
            // Search only in Name column i.e. Column 2.
            table.column(2).search($(this).val()).draw();
        });
        $('[id*=txtCountry]').keyup(function () {
            // Search only in Name column i.e. Column 3.
            table.column(3).search($(this).val()).draw();
        });
    });
</script>

Namespaces

C#

using System.Data;
using System.Data.SqlClient;
using System.Configuration;

VB.Net

Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        this.BindGrid();
    }
}

private void BindGrid()
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlDataAdapter sda = new SqlDataAdapter("SELECT CustomerID, ContactName, City, Country FROM Customers", con))
        {
            using (DataTable dt = new DataTable())
            {
                sda.Fill(dt);
                GridView1.DataSource = dt;
                GridView1.DataBind();
            }
        }
    }

    //Required for jQuery DataTables to work.
    GridView1.UseAccessibleHeader = true;
    GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
}protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        this.BindGrid();
    }
}

private void BindGrid()
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlDataAdapter sda = new SqlDataAdapter("SELECT CustomerID, ContactName, City, Country FROM Customers", con))
        {
            using (DataTable dt = new DataTable())
            {
                sda.Fill(dt);
                GridView1.DataSource = dt;
                GridView1.DataBind();
            }
        }
    }

    //Required for jQuery DataTables to work.
    GridView1.UseAccessibleHeader = true;
    GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Me.BindGrid()
    End If
End Sub

Private Sub BindGrid()
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(constr)
        Using sda As SqlDataAdapter = New SqlDataAdapter("SELECT CustomerID, ContactName, City, Country FROM Customers", con)
            Using dt As DataTable = New DataTable()
                sda.Fill(dt)
                GridView1.DataSource = dt
                GridView1.DataBind()
            End Using
        End Using
    End Using

    GridView1.UseAccessibleHeader = True
    GridView1.HeaderRow.TableSection = TableRowSection.TableHeader
End Sub

Screenshot