title: Implement JQuery Datatable in ASP.NET GridView
body: <p>I want to use "JQuery Datatable" with ASP.NET GridView. </p>
  
  <p>I tried something i found, but it didn't work.</p>
  
  <p><strong>GridView -</strong></p>
  
  <pre><code>&lt;asp:GridView ID="gridViewTasks" runat="server" AutoGenerateColumns="false" CssClass="table table-striped table-bordered dt-responsive nowrap" Width="100%"&gt;
      &lt;Columns&gt;
          &lt;asp:BoundField DataField="task_id" HeaderText="TaskID" Visible="false" /&gt;
          &lt;asp:BoundField DataField="task_description" HeaderText="Task Name" /&gt;
          &lt;asp:BoundField DataField="task_detail" HeaderText="Task Detail" Visible="false" /&gt;
          &lt;asp:BoundField DataField="task_createdate" HeaderText="Create Date" /&gt;
          &lt;asp:BoundField DataField="task_targetdate" HeaderText="Target Date" /&gt;
          &lt;asp:BoundField DataField="task_isReaded" HeaderText="Task Read" Visible="false" /&gt;
          &lt;asp:BoundField DataField="product_id" HeaderText="ProductID" Visible="false" /&gt;
          &lt;asp:BoundField DataField="product_name" HeaderText="Product" /&gt;
          &lt;asp:BoundField DataField="status_id" HeaderText="StatusID" Visible="false" /&gt;
          &lt;asp:BoundField DataField="status_name" HeaderText="Status" /&gt;
          &lt;asp:BoundField DataField="severity_id" HeaderText="SeverityID" Visible="false" /&gt;
          &lt;asp:BoundField DataField="severity_name" HeaderText="Severity" /&gt;
          &lt;asp:BoundField DataField="user_masterID" HeaderText="MasterID" Visible="false" /&gt;
          &lt;asp:BoundField DataField="gorevi_veren" HeaderText="Master" /&gt;
          &lt;asp:BoundField DataField="user_slaveID" HeaderText="SlaveID" Visible="false" /&gt;
          &lt;asp:BoundField DataField="görevi_alan" HeaderText="Slave" /&gt;
          &lt;asp:BoundField DataField="task_score" HeaderText="Score" /&gt;
      &lt;/Columns&gt;
  &lt;/asp:GridView&gt;
  </code></pre>
  
  <p><strong>JavaScript -</strong></p>
  
  <p><strong>1</strong></p>
  
  <pre><code>$(document).ready( function () {
  $('#gridViewTasks').DataTable();} );
  </code></pre>
  
  <p><strong>2</strong></p>
  
  <pre><code>$(document).ready( function () {
  $("#gridViewTasks").prepend( $("&lt;thead&gt;&lt;/thead&gt;").append( $(this).find("tr:first") ) ).DataTable() ;} );
  </code></pre>
  
  <p><strong>Script And CSS i used -</strong></p>
  
  <pre><code>&lt;script src="jquery-1.9.1.min.js"&gt;&lt;/script&gt;
  &lt;link href="jquery.dataTables.min.css" rel="stylesheet" /&gt;
  &lt;script src="jquery.dataTables.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>And also i tried girdView_PreRender Function</strong></p>
  
  <p>i am adding references in GridView when i use.</p>
  
  <pre><code>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 &gt; 0)
      {
          //This replaces &lt;td&gt; with &lt;th&gt; and adds the scope attribute
          gridViewTasks.UseAccessibleHeader = true;
          //This will add the &lt;thead&gt; and &lt;tbody&gt; elements
          gridViewTasks.HeaderRow.TableSection = TableRowSection.TableHeader;
  
          //This adds the &lt;tfoot&gt; element. 
          //Remove if you don't have a footer row
          gridViewTasks.FooterRow.TableSection = TableRowSection.TableFooter;
  
      }
  }
  </code></pre>
  
  <p><strong>Code Behind - i am using Linq to SQL</strong></p>
  
  <pre><code>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();
  </code></pre>
  
  <p>So, How can i implement Jquery DataTable in ASP.NET GridView.</p>