Client side sorting with Gridview
F
Performance freak
Command Palette
Search for a command to run...
Comments
Join the discussionNo comments yet. Be the first to comment.
More from this blog
Response.Redirect: true or false?
When you use Response.Redirect with its second parameter set to true, it triggers a call to Response.End() Response.Redirect("Login.aspx"); // default is true Response.Redirect("Login.aspx", true); // same as above This causes AS...
Apr 23, 20252 min read
Task.Run vs. QueueUserWorkItem
Using ThreadPool.QueueUserWorkItem: Helps bypass limitations when trying to run async code inside IHttpModule. Does not interfere with the ASP.NET pipeline. Email sending does not block the main thread. Calling SendMailAsync().Wait() is safe here...
Apr 21, 20252 min read
Optimizing LINQ Queries for SQL Server Bit Fields
Introduction In SQL Server, the bit data type is used to store boolean values (0 for false, 1 for true). However, when working with SQL Server in a .NET application using Entity Framework or LINQ to SQL, the bit field is automatically converted to a ...
Dec 18, 20243 min read
Thread was being aborted
System.Threading.ThreadAbortException: Thread was being aborted. at System.Threading.Thread.AbortInternal() To avoid the ThreadAbortException error when using Response.Redirect, setting the second parameter to false is generally sufficient. However,...
Dec 11, 20242 min read
Could not load file or assembly X or one of its dependencies.
In Visual Studio; Solution Explorer-Project-Properties-Application. Check "Auto-Generate binding redirects" When this is selected, versions are specified in the web.config file after the Nuget package updates. When is binding necessary? If there is...
Jul 29, 20242 min read
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} – {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