# Client side sorting with Gridview

1. Include required library
    
    ```javascript
    <!-- 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">
    ```
    
2. Pager display
    
    ```xml
    <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>
    ```
    
3. Sample table
    

```xml
<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>
```

1. 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
    
    ```javascript
    <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>
    ```
    
2. Add CssClass to GridView
    
    ```xml
    <asp:GridView ID="GridView1" runat="server" CssClass="tablesorter" CellPadding="4" ForeColor="#333333" GridLines="None" OnRowDataBound="GridView1_RowDataBound">  
    </asp:GridView>
    ```
    
3. Set type on RowDataBound event
    

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

1. 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](https://mottie.github.io/tablesorter/docs/index.html)

Gridview implementation: [https://www.c-sharpcorner.com/blogs/sorting-in-gridview-using-tablesorterjs-in-asp-net](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](https://mottie.github.io/tablesorter/docs/example-option-custom-sort.html)