Implement JQuery Datatable in ASP.NET GridView

Question

I want to use "JQuery Datatable" with ASP.NET GridView.

I tried something i found, but it didn't work.

GridView -

JavaScript -

1

$(document).ready( function () {
$('#gridViewTasks').DataTable();} );

2

$(document).ready( function () {
$("#gridViewTasks").prepend( $("").append( $(this).find("tr:first") ) ).DataTable() ;} );

Script And CSS i used -

And also i tried girdView_PreRender Function

i am adding references in GridView when i use.

protected void GridView1_PreRender(object sender, EventArgs e)
{
    // You only need the following 2 lines of code if you are not 
    // using an ObjectDataSource of SqlDataSource
    gridViewTasks.DataSource = Sample.GetData();
    gridViewTasks.DataBind();

    if (gridViewTasks.Rows.Count > 0)
    {
        //This replaces  with  and adds the scope attribute
        gridViewTasks.UseAccessibleHeader = true;
        //This will add the  and  elements
        gridViewTasks.HeaderRow.TableSection = TableRowSection.TableHeader;

        //This adds the  element. 
        //Remove if you don't have a footer row
        gridViewTasks.FooterRow.TableSection = TableRowSection.TableFooter;

    }
}

Code Behind - i am using Linq to SQL

var sorgu = from gorev in db.Tasks
join ga in db.Users on gorev.user_slaveID equals ga.user_id
join gv in db.Users on gorev.user_masterID equals gv.user_id
join product in db.Products on gorev.product_id equals product.product_id
join severity in db.Severities on gorev.severity_id equals severity.severity_id
join status in db.Status on gorev.status_id equals status.status_id
select new
{
    gorev.task_id,
    gorev.task_description,
    gorev.task_detail,
    gorev.task_createdate,
    gorev.task_targetdate,
    gorev.task_isReaded,
    product.product_id,
    product.product_name,
    status.status_id,
    status.status_name,
    severity.severity_id,
    severity.severity_name,
    gorev.user_masterID,
    gorevi_veren = gv.user_username,
    gorev.user_slaveID,
    görevi_alan = ga.user_username,
    gorev.task_score                       
};

gridViewTasks.DataSource = sorgu;
gridViewTasks.DataBind();

So, How can i implement Jquery DataTable in ASP.NET GridView.

VDWWD · Accepted Answer

These few lines are all you need to get it working. You don't need the prerender event. Just bind in Page_Load in the IsPostBack check. I did add a RowDataBound event to the GridView to add the and sections programatically rather than with jQuery.

Code behind

protected void Page_Load(object sender, EventArgs e)
{
    //check for a postback
    if (!Page.IsPostBack)
    {
        //bind the gridview data
        GridView1.DataSource = source;
        GridView1.DataBind();
    }
}


protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    //check if the row is the header row
    if (e.Row.RowType == DataControlRowType.Header)
    {
        //add the thead and tbody section programatically
        e.Row.TableSection = TableRowSection.TableHeader;
    }
}

UPDATE

If you are using a DataTable inside an UpdatePanel, use the following javascript to ensure proper binding after an Async PostBack.

Implement JQuery Datatable in ASP.NET GridView

Answers (2)

Related Questions