Sort GridView at Client Side

Sort GridView Columns at Client Side in ASP.NET using jQuery. At times we want sort column in GridView by clicking on header in ASP.NET using jQuery at Client side.

Its very easy to implement

 

Step 1: Add a new web form.

Step 2: Add a GridView control

<asp:GridView ID="GridView1" runat="server">
</asp:GridView>

Step 3: Fetch data from database and bind it to gridview control.

 

Step 4: Add the following jQuery.

$(document).ready(function ()
 {
       $("th").click(function ()
         {
           var columnIndex = $(this).index();
           var tdArray = $(this).closest("table").find("tr td:nth-child(" + (columnIndex + 1) + ")");
           tdArray.sort(function (p, n)
             {
               var pData = $(p).text();
               var nData = $(n).text();
               return pData < nData ? -1 : 1;
           });
           tdArray.each(function ()
               {
               var row = $(this).parent();
               $("#GridView1").append(row);
           });
       });
   })

Refer:- gridview sorting using jquery in asp.net 

 

Output:-