Apply bootstrap Datatable plugin to GridView using jQuery in ASP.Net

Hi Fresher,

I have created sample code which full-fill your requirement. So please refer the below code.

HTML

<form id="form1" runat="server">
<div>
    <br />
    <div class="row">
        <div class="col-md-12">
            <div class="col-md-6">
                <asp:GridView ID="gvCustomers" runat="server" />
            </div>
        </div>
    </div>
</div>
<div>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
        rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" />
    </script>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css" />
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script type="text/javascript">
$(function () {
    $('[id$=gvCustomers]').prepend($("<thead></thead>").append($('[id$=gvCustomers]').find("tr:first"))).DataTable({
        "responsive": true,
        "sPaginationType": "full_numbers",
    });
    });
    </script>
    <style type="text/css">
        input[type="search"]
        {
            width: 70%;
            height: 34px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857;
            color: #555;
            background-color: #FFF;
            background-image: none;
            border: 1px solid #CCC;
            border-radius: 4px;
            box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;
            transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
        }
    </style>
</div>
</form>

C#

private void PopulateData()
{
    DataTable dt = new DataTable();
    dt.Columns.Add("CustomerId");
    dt.Columns.Add("Name");
    dt.Columns.Add("Country");
    dt.Rows.Add("1", "Mudassar Khan", "India");
    dt.Rows.Add("2", "Maria", "Austria");
    dt.Rows.Add("3", "Ana Trujillo", "UK");
    dt.Rows.Add("4", "Thomas Hardy ", "Brazil");
    dt.Rows.Add("5", "Christina Berglund", "Ireland");
    dt.Rows.Add("6", "Yang Wang", "Switzerland");
    dt.Rows.Add("7", "Diego Roel", "France");
    dt.Rows.Add("8", "Peter Franken", "Germany");
    dt.Rows.Add("9", "Paolo Accorti ", "Paolo Accorti");
    dt.Rows.Add("10", "Lino Rodriguez", "Portugal");
    dt.Rows.Add("11", "Howard Snyder", "Howard Snyder");
    dt.Rows.Add("12", "Mario Pontes", "Brazil");
    dt.Rows.Add("13", "Mère Paillarde", "Canada");
    dt.Rows.Add("14", "Simon Crowther ", "UK");
    dt.Rows.Add("15", "Georg Pipps", "Austria");
    gvCustomers.DataSource = dt;
    gvCustomers.DataBind();
}

Vb.Net

Private Sub PopulateData()
	Dim dt As New DataTable()
	dt.Columns.Add("CustomerId")
	dt.Columns.Add("Name")
	dt.Columns.Add("Country")
	dt.Rows.Add("1", "Mudassar Khan", "India")
	dt.Rows.Add("2", "Maria", "Austria")
	dt.Rows.Add("3", "Ana Trujillo", "UK")
	dt.Rows.Add("4", "Thomas Hardy ", "Brazil")
	dt.Rows.Add("5", "Christina Berglund", "Ireland")
	dt.Rows.Add("6", "Yang Wang", "Switzerland")
	dt.Rows.Add("7", "Diego Roel", "France")
	dt.Rows.Add("8", "Peter Franken", "Germany")
	dt.Rows.Add("9", "Paolo Accorti ", "Paolo Accorti")
	dt.Rows.Add("10", "Lino Rodriguez", "Portugal")
	dt.Rows.Add("11", "Howard Snyder", "Howard Snyder")
	dt.Rows.Add("12", "Mario Pontes", "Brazil")
	dt.Rows.Add("13", "Mère Paillarde", "Canada")
	dt.Rows.Add("14", "Simon Crowther ", "UK")
	dt.Rows.Add("15", "Georg Pipps", "Austria")
	gvCustomers.DataSource = dt
	gvCustomers.DataBind()
End Sub

Screenshot

I replaced gridview with repeater. Works like charm! thanks