Client side sorting with Gridview

Include required library

 <!-- jQuery -->
 <script type="text/javascript" src="jquery-latest.min.js"></script>

 <!-- Sorting -->
 <link rel="stylesheet" href="jquery.tablesorter.default.css">
 <script type="text/javascript" src="jquery.tablesorter.min.js"></script>

 <!-- Turkish sort -->
 <script src="sugar.min.js"></script>

 <!-- Paging -->
 <script type="text/javascript" src="jquery.tablesorter.pager.min.js"></script>
 <link rel="stylesheet" href="jquery.tablesorter.pager.min.css">

Pager display

 <div id="pager" class="pager">
   <form>
     <img src="first.png" class="first"/>
     <img src="prev.png" class="prev"/>
     <span class="pagedisplay" data-pager-output-filtered="{startRow:input} &ndash; {endRow} / {filteredRows} of {totalRows} total rows"></span>
     <img src="next.png" class="next"/>
     <img src="last.png" class="last"/>
     <select class="pagesize">
       <option value="10">10</option>
       <option value="20">20</option>
       <option value="30">30</option>
       <option value="40">40</option>
       <option value="all">Hepsi</option>
     </select>
   </form>
 </div>

Sample table

<table id="myTable" class="tablesorter">
  <thead>
    <tr>
      <th>Ad Soyad</th>
      <th>First Name</th>
      <th>Email</th>
      <th>Due</th>
      <th>Web Site</th>
      <th>Sıra</th>
    </tr>
  </thead>
  <tbody>
  <tr>
      <td>Burhan cetvel</td>
      <td>28.09.2023</td>
      <td>jsmith@gmail.com</td>
      <td>$50.00</td>
      <td>http://www.jsmith.com</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Burhan cetvel2</td>
      <td>28.09.2023</td>
      <td>jsmith@gmail.com</td>
      <td>$50.00</td>
      <td>http://www.jsmith.com</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Burhan cetvel3</td>
      <td>28.09.2023</td>
      <td>jsmith@gmail.com</td>
      <td>$50.00</td>
      <td>http://www.jsmith.com</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Burhan cetvel4</td>
      <td>28.09.2023</td>
      <td>jsmith@gmail.com</td>
      <td>$50.00</td>
      <td>http://www.jsmith.com</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Burhan cetvel5</td>
      <td>28.09.2023</td>
      <td>jsmith@gmail.com</td>
      <td>$50.00</td>
      <td>http://www.jsmith.com</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Ali Cengiz</td>
      <td>29.09.2023</td>
      <td>jsmith@gmail.com</td>
      <td>$50.00</td>
      <td>http://www.jsmith.com</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Faruk Berigel</td>
      <td>30.07.2023</td>
      <td>jsmith@gmail.com</td>
      <td>$50.00</td>
      <td>http://www.jsmith.com</td>
      <td>2</td>
    </tr>
    <tr>
      <td>Şefika Güzel</td>
      <td>08.10.2023</td>
      <td>fbach@yahoo.com</td>
      <td>$50.00</td>
      <td>http://www.frank.com</td>
      <td>3</td>
    </tr>
    <tr>
      <td>Zafer Algöz</td>
      <td>07.08.2023</td>
      <td>jdoe@hotmail.com</td>
      <td>$100.00</td>
      <td>http://www.jdoe.com</td>
      <td>4</td>
    </tr>
    <tr>
      <td>Yağmur Günaydın</td>
      <td>06.10.2023</td>
      <td>tconway@earthlink.net</td>
      <td>$50.00</td>
      <td>http://www.timconway.com</td>
      <td>5</td>
    </tr>
    <tr>
      <td>Çiğdem Toker</td>
      <td>05.10.2023</td>
      <td>tconway@earthlink.net</td>
      <td>$50.00</td>
      <td>http://www.timconway.com</td>
      <td>6</td>
    </tr>
    <tr>
      <td>Cahit karagöz</td>
      <td>05.11.2023</td>
      <td>tconway@earthlink.net</td>
      <td>$50.00</td>
      <td>http://www.timconway.com</td>
      <td>7</td>
    </tr>
    <tr>
      <td>Cemil masa</td>
      <td>05.12.2023</td>
      <td>tconway@earthlink.net</td>
      <td>$50.00</td>
      <td>http://www.timconway.com</td>
      <td>8</td>
    </tr>
    <tr>
      <td>Şimal Ersöz</td>
      <td>03.09.2023</td>
      <td>tconway@earthlink.net</td>
      <td>$50.00</td>
      <td>http://www.timconway.com</td>
      <td>9</td>
    </tr>
    <tr>
      <td>Sabiha şenol</td>
      <td>04.10.2023</td>
      <td>tconway@earthlink.net</td>
      <td>$50.00</td>
      <td>http://www.timconway.com</td>
      <td>10</td>
    </tr>
    <tr>
      <td>Tayfur güzel</td>
      <td>03.09.2023</td>
      <td>tconway@earthlink.net</td>
      <td>$50.00</td>
      <td>http://www.timconway.com</td>
      <td>11</td>
    </tr>
    <tr>
      <td>Umut aksakal</td>
      <td>02.09.2023</td>
      <td>tconway@earthlink.net</td>
      <td>$50.00</td>
      <td>http://www.timconway.com</td>
      <td>12</td>
    </tr>
    <tr>
      <td>Suat masa</td>
      <td>01.09.2023</td>
      <td>tconway@earthlink.net</td>
      <td>$50.00</td>
      <td>http://www.timconway.com</td>
      <td>13</td>
    </tr>
    <tr>
      <td>Çağla şengör</td>
      <td>09.09.2023</td>
      <td>tconway@earthlink.net</td>
      <td>$50.00</td>
      <td>http://www.timconway.com</td>
      <td>14</td>
    </tr>
        <tr>
      <td>Tayfur güzel</td>
      <td>03.09.2023</td>
      <td>tconway@earthlink.net</td>
      <td>$50.00</td>
      <td>http://www.timconway.com</td>
      <td>11</td>
    </tr>
    <tr>
      <td>Umut aksakal</td>
      <td>02.09.2023</td>
      <td>tconway@earthlink.net</td>
      <td>$50.00</td>
      <td>http://www.timconway.com</td>
      <td>12</td>
    </tr>
    <tr>
      <td>Suat masa</td>
      <td>01.09.2023</td>
      <td>tconway@earthlink.net</td>
      <td>$50.00</td>
      <td>http://www.timconway.com</td>
      <td>13</td>
    </tr>
    <tr>
      <td>Çağla şengör</td>
      <td>09.09.2023</td>
      <td>tconway@earthlink.net</td>
      <td>$50.00</td>
      <td>http://www.timconway.com</td>
      <td>14</td>
    </tr>
        <tr>
      <td>Tayfur güzel</td>
      <td>03.09.2023</td>
      <td>tconway@earthlink.net</td>
      <td>$50.00</td>
      <td>http://www.timconway.com</td>
      <td>11</td>
    </tr>
    <tr>
      <td>Umut aksakal</td>
      <td>02.09.2023</td>
      <td>tconway@earthlink.net</td>
      <td>$50.00</td>
      <td>http://www.timconway.com</td>
      <td>12</td>
    </tr>
    <tr>
      <td>Suat masa</td>
      <td>01.09.2023</td>
      <td>tconway@earthlink.net</td>
      <td>$50.00</td>
      <td>http://www.timconway.com</td>
      <td>13</td>
    </tr>
    <tr>
      <td>Çağla şengör</td>
      <td>09.09.2023</td>
      <td>tconway@earthlink.net</td>
      <td>$50.00</td>
      <td>http://www.timconway.com</td>
      <td>14</td>
    </tr>
        <tr>
      <td>Tayfur güzel</td>
      <td>03.09.2023</td>
      <td>tconway@earthlink.net</td>
      <td>$50.00</td>
      <td>http://www.timconway.com</td>
      <td>11</td>
    </tr>
    <tr>
      <td>Umut aksakal</td>
      <td>02.09.2023</td>
      <td>tconway@earthlink.net</td>
      <td>$50.00</td>
      <td>http://www.timconway.com</td>
      <td>12</td>
    </tr>
    <tr>
      <td>Suat masa</td>
      <td>01.09.2023</td>
      <td>tconway@earthlink.net</td>
      <td>$50.00</td>
      <td>http://www.timconway.com</td>
      <td>13</td>
    </tr>
    <tr>
      <td>Çağla şengör</td>
      <td>09.09.2023</td>
      <td>tconway@earthlink.net</td>
      <td>$50.00</td>
      <td>http://www.timconway.com</td>
      <td>14</td>
    </tr>
  </tbody>
</table>

Required script to initialize

We use the sugar.js sorting algorithm to sort tables according to arrays that we define as; Sugar.Array.setOption('sortOrder', ...

textSorter: It is based on zero index. 1 means the second column is sorted with Sugar Library

sortlist : [2,1] means, 3. column DESC (0 mean ASC)

dateFormat : It shows your date format,

headers : You can simply disable/enable the sorting option of columns

 <script type="text/javascript">
         $(function () {
             // Custom order for Turkish character
             Sugar.Array.setOption('sortEquivalents', {});
             Sugar.Array.setOption('sortOrder', 'AaBbCcÇçDdEeFfGgĞğHhIıiİJjKkLlMmNnOoÖöPpQqRrSsŞşTtUuÜüVvWwXxYyZz');
             Sugar.Array.setOption('sortIgnoreCase', true);

             $("table").tablesorter({
                 textSorter: { 1: Sugar.Array.getOption('sortCollate') },
                 sortList: [[2, 1]],
                 dateFormat: 'ddmmyyyy',
                 headers: {
                     0: { sorter: false },
                     1: { sorter: true },
                     2: { sorter: true },
                     3: { sorter: true },
                     4: { sorter: true },
                     5: { sorter: true }
                 }
             });

             //  Description of ALL pager options
             var pagerOptions = {
                 container: $(".pager"),
                 output: '{startRow:input} – {endRow}/{totalRows} kayıt',
                 size: 10,

                 // CSS
                 cssNext: '.next', // next page arrow
                 cssPrev: '.prev', // previous page arrow
                 cssFirst: '.first', // go to first page arrow
                 cssLast: '.last', // go to last page arrow
                 cssGoto: '.gotoPage', // select dropdown to allow choosing a page
                 cssPageDisplay: '.pagedisplay', // location of where the "output" is displayed
                 cssPageSize: '.pagesize', // page size selector - select dropdown that sets the "size" option
                 cssDisabled: 'disabled', // Note there is no period "." in front of this class name
                 cssErrorRow: 'tablesorter-errorRow' // ajax error information row
             };

             $("table").tablesorterPager(pagerOptions);
         });
  </script>

Add CssClass to GridView

 <asp:GridView ID="GridView1" runat="server" CssClass="tablesorter" CellPadding="4" ForeColor="#333333" GridLines="None" OnRowDataBound="GridView1_RowDataBound">  
 </asp:GridView>

Set type on RowDataBound event

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)  
    {  
        if (this.GridView1.Rows.Count > 0)  
        {  
            GridView1.UseAccessibleHeader = true;  
            GridView1.HeaderRow.TableSection = TableRowSection.TableHeader; 
        }  
    }

Remove all paging property in GridView

Such as AllowSorting, AllowPaging, PageSize, OnSorting, OnPageIndexChanging

Even AlternatingRowStyle, RowStyle, HeaderStyle, PagerStyle

Resources:

Tablesorter JS: https://mottie.github.io/tablesorter/docs/index.html

Gridview implementation: https://www.c-sharpcorner.com/blogs/sorting-in-gridview-using-tablesorterjs-in-asp-net

Turkish sorting: https://mottie.github.io/tablesorter/docs/example-option-custom-sort.html

A developer's diary

A developer's diary

Client side sorting with Gridview

Resources: