How to use DataTable Jquery Plugin in ASP.Net

Hi

I have created sample, refer the below code.

HTML

<div>
    <asp:GridView ID="example" DataKeyNames="ID" AutoGenerateColumns="false" runat="server"
        CssClass="gvdatatable" OnRowDataBound="example_RowDataBound" OnRowEditing="example_RowEditing"
        OnRowCancelingEdit="example_RowCancelingEdit" OnRowUpdating="example_RowUpdating"
        ClientIDMode="Static">
        <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
        <Columns>
            <asp:TemplateField HeaderText="ID" ItemStyle-Width="150">
                <ItemTemplate>
                    <asp:Label ID="Sıra" runat="server" Text='<%# Eval("ID") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Başlık" ItemStyle-Width="150">
                <ItemTemplate>
                    <asp:Label ID="lblGonderino" runat="server" Text='<%# Eval("BaslikAd") %>'></asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox ID="txtbaslikad" runat="server" Text='<%# Eval("BaslikAd") %>'></asp:TextBox>
                </EditItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Tarih" ItemStyle-Width="150">
                <ItemTemplate>
                    <asp:Label ID="lblgonderen" runat="server" Text='<%# Eval("Tarih") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Seo" ItemStyle-Width="150">
                <ItemTemplate>
                    <asp:Label ID="lblalici" runat="server" Text='<%# Eval("Seo") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Onaylı" ItemStyle-Width="150">
                <ItemTemplate>
                    <asp:Label ID="lblagirlik" runat="server" Text='<%# Eval("Ok") %>'></asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:CheckBox ID="chck" runat="server" />
                </EditItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Kullanıcı" ItemStyle-Width="150">
                <ItemTemplate>
                    <asp:Label ID="lblvaris" runat="server" Text='<%# Eval("UserID") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:CommandField ButtonType="Link" ShowEditButton="true" ShowDeleteButton="true"
                ItemStyle-Width="150" />
        </Columns>
    </asp:GridView>
</div>
<div>
    <link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#example").prepend($("<thead></thead>").append($(this).find("tr:first"))).dataTable();
            $('#example').DataTable({
                destroy: true,
                stateSave: true
            });
        });
    </script>
</div>

Code

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

protected void example_RowEditing(object sender, GridViewEditEventArgs e)
{
    example.EditIndex = e.NewEditIndex;
    GetBaslik();
}

protected void example_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow && e.Row.RowIndex != example.EditIndex)
    {
        (e.Row.Cells[6].Controls[2] as LinkButton).Attributes["onclick"] = "return confirm('Silmek İstiyormusun ?');";
    }
}

protected void example_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
    example.EditIndex = -1;
    GetBaslik();
}

protected void example_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
    GridViewRow row = example.Rows[e.RowIndex];
    int customerId = Convert.ToInt32(example.DataKeys[e.RowIndex].Values[0]);

    string baslik = (row.FindControl("txtbaslikad") as TextBox).Text;
    //string tarih = (row.FindControl("txttarih") as TextBox).Text;
    //string seo = (row.FindControl("txtseo") as TextBox).Text;
    bool ok = (row.FindControl("chck") as CheckBox).Checked;
    //string useris = (row.FindControl("txtuserid") as TextBox).Text;

    using (TeknikTraktorEntities kargo = new TeknikTraktorEntities())
    {
        var id = Convert.ToInt32(customerId);
        Basliklar kat = kargo.Basliklar.SingleOrDefault(x => x.ID == id);
        kat.BaslikAd = baslik;
        //kat.Tarih = Convert.ToDateTime(tarih);
        //kat.Seo = seo;
        kat.Ok = ok;
        kat.AdminID = 1;
        kargo.SaveChanges();
    }
    example.EditIndex = -1;
    GetBaslik();
}

private void GetBaslik()
{
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[] { 
        new DataColumn("ID", typeof(int)),
        new DataColumn("BaslikAd", typeof(string)),
        new DataColumn("Tarih",typeof(string)),
        new DataColumn("Seo",typeof(string)),
        new DataColumn("Ok",typeof(string)),
        new DataColumn("UserID",typeof(int))
    });
    dt.Rows.Add(10, "BaslikAd10", "Tarih10", "Seo11", "Ok11", 13);
    dt.Rows.Add(20, "BaslikAd20", "Tarih20", "Seo21", "Ok21", 23);
    dt.Rows.Add(30, "BaslikAd30", "Tarih30", "Seo31", "Ok31", 33);
    dt.Rows.Add(40, "BaslikAd40", "Tarih40", "Seo41", "Ok41", 43);
    dt.Rows.Add(11, "BaslikAd11", "Tarih11", "Seo12", "Ok12", 12);
    dt.Rows.Add(21, "BaslikAd21", "Tarih21", "Seo22", "Ok22", 22);
    dt.Rows.Add(31, "BaslikAd31", "Tarih31", "Seo32", "Ok32", 32);
    dt.Rows.Add(41, "BaslikAd41", "Tarih41", "Seo42", "Ok42", 42);
    dt.Rows.Add(12, "BaslikAd13", "Tarih12", "Seo13", "Ok13", 11);
    dt.Rows.Add(22, "BaslikAd23", "Tarih22", "Seo23", "Ok23", 21);
    dt.Rows.Add(32, "BaslikAd33", "Tarih32", "Seo33", "Ok33", 31);
    dt.Rows.Add(42, "BaslikAd43", "Tarih42", "Seo43", "Ok43", 41);
    dt.Rows.Add(13, "BaslikAd14", "Tarih13", "Seo14", "Ok14", 10);
    dt.Rows.Add(23, "BaslikAd24", "Tarih23", "Seo24", "Ok24", 20);
    dt.Rows.Add(33, "BaslikAd34", "Tarih33", "Seo34", "Ok34", 30);
    dt.Rows.Add(43, "BaslikAd44", "Tarih43", "Seo44", "Ok44", 40);
    example.DataSource = dt;
    example.DataBind();
}

Screenshot

Thank you. But also I want to do page is not postback. When I click the Update button.

I solved like this. I have Update Panel.

  <script type="text/javascript">
              var prm = Sys.WebForms.PageRequestManager.getInstance();
              if (prm != null) {
                  prm.add_endRequest(function (sender, e) {
                      if (sender._postBackSettings.panelsToUpdate != null) {
                          $("#example").prepend($("<thead></thead>").append($("#example").find("tr:first"))).dataTable();
                          $('#example').DataTable({
                              destroy: true,
                              stateSave: true
                          });

                      }
                  });
              };
        </script>