https://mottie.github.io/tablesorter/docs/index.html
1.GridView
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebPaingDemo.WebForm3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Sorting ASP.NET GridView Control using JQuery Tablesorter Plugin</title>
<script src="script/jquery-1.9.0.js" type="text/javascript"></script>
<script src="script/jquery.tablesorter.min.js" type="text/javascript"></script>
<style type="text/css">
th
{
cursor:pointer;
background-image: url(images/ice-unsorted.gif);
background-position: right center;
background-repeat:no-repeat;
color:Black;
font-weight:bold;
text-align:left;
}
th.headerSortUp
{
background-image: url(images/ice-asc.gif);
background-position: right center;
background-repeat:no-repeat;
}
th.headerSortDown
{
background-image: url(images/ice-desc.gif);
background-position: right center;
background-repeat:no-repeat;
}
td
{
border-bottom: solid 1px #dadada;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#GridView1").tablesorter();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333"
GridLines="Horizontal" Font-Size="9pt" Font-Names="Arial"
AutoGenerateColumns="False" BorderColor="#dadada"
BorderStyle="Solid" BorderWidth="1px">
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID"
ItemStyle-Width="40" />
<asp:BoundField DataField="Name" HeaderText="Name"
ItemStyle-Width="80" />
<asp:BoundField DataField="Fee" DataFormatString="{0:n0}" HeaderText="Fee"
ItemStyle-Width="60" />
<asp:BoundField DataField="Price" DataFormatString="{0:c}"
HeaderText="Price" ItemStyle-Width="60" />
<asp:BoundField DataField="Discount" DataFormatString="{0:p1}"
HeaderText="Discount" ItemStyle-Width="70" />
<asp:BoundField DataField="Difference" DataFormatString="{0:n1}"
HeaderText="Difference" ItemStyle-Width="80" />
<asp:BoundField DataField="Date" DataFormatString="{0:MMM dd, yyyy}"
HeaderText="Date" ItemStyle-Width="100" />
<asp:BoundField DataField="OnSale" HeaderText="OnSale"
ItemStyle-Width="60" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
namespace WebPaingDemo
{
/// <summary>
///
/// </summary>
public partial class WebForm3 : System.Web.UI.Page
{
/// <summary>
///
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
BindData();
}
}
/// <summary>
///
/// </summary>
private void BindData()
{
int[] ids = { 12, 13, 14, 15, 16 };
string[] names = { "Alice", "James", "Peter", "Simon", "David" };
int[] fee = { 2299, 5123, 7564, 9595, 1600 };
decimal[] prices = { 12.99m, 122.23m, 25.64m, 66.85m, 1.60m };
decimal[] discounts = { 0.2m, 0.194m, 0.4564m, 0.209m, 0.310m };
decimal[] differences = { -12m, 19.4m, -45.64m, 200.9m, 41.60m };
string[] dates = { "04-12-2010", "07-23-2010", "07-14-2009", "12-12-2010", "11-03-2019" };
bool[] onSale = { true, false, true, true, false };
DataTable table = new DataTable();
table.Columns.Add("ID", typeof(System.Int32));
table.Columns.Add("Name", typeof(System.String));
table.Columns.Add("Fee", typeof(System.Decimal));
table.Columns.Add("Price", typeof(System.Decimal));
table.Columns.Add("Discount", typeof(System.Decimal));
table.Columns.Add("Difference", typeof(System.Int32));
table.Columns.Add("Date", typeof(System.DateTime));
table.Columns.Add("OnSale", typeof(System.Boolean));
for (int i = 0; i < 5; i++)
{
DataRow row = table.NewRow();
row["ID"] = ids[i];
row["Name"] = names[i];
row["Fee"] = fee[i];
row["Price"] = prices[i];
row["Discount"] = discounts[i];
row["Difference"] = differences[i];
row["Date"] = DateTime.Parse(dates[i]);
row["OnSale"] = onSale[i];
table.Rows.Add(row);
}
GridView1.DataSource = table;
GridView1.DataBind();
GridView1.UseAccessibleHeader = true;
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
}
}
}
2.Repeater
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="WebPaingDemo.WebForm4" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery tablesorter 2.0 - Pager plugin</title>
<!-- jQuery -->
<script src="script/jquery-1.9.0.js" type="text/javascript"></script>
<!-- Demo stuff -->
<link rel="stylesheet" href="css/jq.css">
<link href="css/prettify.css" rel="stylesheet">
<script src="js/prettify.js"></script>
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="css/theme.blue.css">
<script src="js/jquery.tablesorter.js"></script>
<script src="js/jquery.tablesorter.widgets.js"></script>
<!-- Tablesorter: optional -->
<link rel="stylesheet" href="js/pager/jquery.tablesorter.pager.css">
<script src="js/pager/jquery.tablesorter.pager.js"></script>
<script id="js">$(function(){
// **********************************
// Description of ALL pager options
// **********************************
var pagerOptions = {
// target the pager markup - see the HTML block below
container: $(".pager"),
// use this url format "http:/mydatabase.com?page={page}&size={size}&{sortList:col}"
ajaxUrl: null,
// modify the url after all processing has been applied
customAjaxUrl: function(table, url) { return url; },
// ajax error callback from $.tablesorter.showError function
// ajaxError: function( config, xhr, settings, exception ){ return exception; };
// returning false will abort the error message
ajaxError: null,
// add more ajax settings here
// see http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings
ajaxObject: { dataType: 'json' },
// process ajax so that the data object is returned along with the total number of rows
ajaxProcessing: null,
// Set this option to false if your table data is preloaded into the table, but you are still using ajax
processAjaxOnInit: true,
// output string - default is '{page}/{totalPages}'
// possible variables: {size}, {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
// also {page:input} & {startRow:input} will add a modifiable input in place of the value
// In v2.27.7, this can be set as a function
// output: function(table, pager) { return 'page ' + pager.startRow + ' - ' + pager.endRow; }
output: '{startRow:input} – {endRow} / {totalRows} rows',
// apply disabled classname (cssDisabled option) to the pager arrows when the rows
// are at either extreme is visible; default is true
updateArrows: true,
// starting page of the pager (zero based index)
page: 0,
// Number of visible rows - default is 10
size: 10,
// Save pager page & size if the storage script is loaded (requires $.tablesorter.storage in jquery.tablesorter.widgets.js)
savePages : true,
// Saves tablesorter paging to custom key if defined.
// Key parameter name used by the $.tablesorter.storage function.
// Useful if you have multiple tables defined
storageKey:'tablesorter-pager',
// Reset pager to this page after filtering; set to desired page number (zero-based index),
// or false to not change page at filter start
pageReset: 0,
// if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
// table row set to a height to compensate; default is false
fixedHeight: true,
// remove rows from the table to speed up the sort of large tables.
// setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
removeRows: false,
// If true, child rows will be counted towards the pager set size
countChildRows: false,
// css class names of pager arrows
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
// class added to arrows when at the extremes (i.e. prev/first arrows are "disabled" when on the first page)
cssDisabled: 'disabled', // Note there is no period "." in front of this class name
cssErrorRow: 'tablesorter-errorRow' // ajax error information row
};
$("table")
// Initialize tablesorter
// ***********************
.tablesorter({
theme: 'blue',
widthFixed: true,
widgets: ['zebra', 'filter']
})
// bind to pager events
// *********************
.bind('pagerChange pagerComplete pagerInitialized pageMoved', function(e, c){
var msg = '"</span> event triggered, ' + (e.type === 'pagerChange' ? 'going to' : 'now on') +
' page <span class="typ">' + (c.page + 1) + '/' + c.totalPages + '</span>';
$('#display')
.append('<li><span class="str">"' + e.type + msg + '</li>')
.find('li:first').remove();
})
// initialize the pager plugin
// ****************************
.tablesorterPager(pagerOptions);
// Add two new rows using the "addRows" method
// the "update" method doesn't work here because not all rows are
// present in the table when the pager is applied ("removeRows" is false)
// ***********************************************************************
var r, $row, num = 50,
row = '<tr><td>Student{i}</td><td>{m}</td><td>{g}</td><td>{r}</td><td>{r}</td><td>{r}</td><td>{r}</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>' +
'<tr><td>Student{j}</td><td>{m}</td><td>{g}</td><td>{r}</td><td>{r}</td><td>{r}</td><td>{r}</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>';
$('button:contains(Add)').click(function(){
// add two rows of random data!
r = row.replace(/{[gijmr]}/g, function(m){
return {
'{i}' : num + 1,
'{j}' : num + 2,
'{r}' : Math.round(Math.random() * 100),
'{g}' : Math.random() > 0.5 ? 'male' : 'female',
'{m}' : Math.random() > 0.5 ? 'Mathematics' : 'Languages'
}[m];
});
num = num + 2;
$row = $(r);
$('table')
.find('tbody').append($row)
.trigger('addRows', [$row]);
return false;
});
// Delete a row
// *************
$('table').delegate('button.remove', 'click' ,function(){
var t = $('table');
// disabling the pager will restore all table rows
// t.trigger('disablePager');
// remove chosen row
$(this).closest('tr').remove();
// restore pager
// t.trigger('enablePager');
t.trigger('update');
return false;
});
// Destroy pager / Restore pager
// **************
$('button:contains(Destroy)').click(function(){
// Exterminate, annhilate, destroy! http://www.youtube.com/watch?v=LOqn8FxuyFs
var $t = $(this);
if (/Destroy/.test( $t.text() )){
$('table').trigger('destroyPager');
$t.text('Restore Pager');
} else {
$('table').tablesorterPager(pagerOptions);
$t.text('Destroy Pager');
}
return false;
});
// Disable / Enable
// **************
$('.toggle').click(function(){
var mode = /Disable/.test( $(this).text() );
$('table').trigger( (mode ? 'disable' : 'enable') + 'Pager');
$(this).text( (mode ? 'Enable' : 'Disable') + 'Pager');
return false;
});
$('table').bind('pagerChange', function(){
// pager automatically enables when table is sorted.
$('.toggle').text('Disable Pager');
});
// clear storage (page & size)
$('.clear-pager-data').click(function(){
// clears user set page & size from local storage, so on page
// reload the page & size resets to the original settings
$.tablesorter.storage( $('table'), 'tablesorter-pager', '' );
});
// go to page 1 showing 10 rows
$('.goto').click(function(){
// triggering "pageAndSize" without parameters will reset the
// pager to page 1 and the original set size (10 by default)
// $('table').trigger('pageAndSize')
$('table').trigger('pageAndSize', [1, 10]);
});
});</script>
<script>
$(function(){
$('.clear').click(function(){
$('#display').html( new Array(6).join('<li> </li>') );
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="pager">
<img src="js/pager/icons/first.png" class="first" alt="First" />
<img src="js/pager/icons/prev.png" class="prev" alt="Prev" />
<!-- the "pagedisplay" can be any element, including an input -->
<span class="pagedisplay" data-pager-output-filtered="{startRow:input} – {endRow} / {filteredRows} of {totalRows} total rows"></span>
<img src="js/pager/icons/next.png" class="next" alt="Next" />
<img src="js/pager/icons/last.png" class="last" alt="Last" />
<select class="pagesize" title="Select page size">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="all">All Rows</option>
</select>
<select class="gotoPage" title="Select page number"></select>
</div>
<table class="tablesorter">
<thead>
<tr>
<th>Name</th>
<th>Major</th>
<th>Sex</th>
<th>English</th>
<th>Japanese</th>
<th>Calculus</th>
<th>Geometry</th>
<th class="remove sorter-false"></th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Major</th>
<th>Sex</th>
<th>English</th>
<th>Japanese</th>
<th>Calculus</th>
<th>Geometry</th>
<th></th>
</tr>
</tfoot>
<tbody>
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<tr onmouseover="CurrentColor=this.style.backgroundColor; this.style.backgroundColor='#FFE9CC';" onmouseout="this.style.backgroundColor=CurrentColor;">
<td><%#Eval("Name").ToString()%> </td>
<td><%#Eval("Major").ToString()%> </td>
<td><%#Eval("Sex").ToString()%> </td>
<td><%#Eval("English").ToString()%> </td>
<td><%#Eval("Japanese").ToString()%> </td>
<td><%#Eval("Calculus").ToString()%> </td>
<td><%#Eval("Geometry").ToString()%> </td>
<td><a href="default.aspx?id=<%#Eval("ID" ).ToString() %>" >edit</a> </td>
</tr>
</ItemTemplate>
</asp:Repeater>
</tbody>
</table>
<div class="pager">
<img src="js/pager/icons/first.png" class="first" alt="First" />
<img src="js/pager/icons/prev.png" class="prev" alt="Prev" />
<!-- the "pagedisplay" can be any element, including an input -->
<span class="pagedisplay" data-pager-output-filtered="{startRow:input} – {endRow} / {filteredRows} of {totalRows} total rows"></span>
<img src="js/pager/icons/next.png" class="next" alt="Next" />
<img src="js/pager/icons/last.png" class="last" alt="Last" />
<select class="pagesize" title="Select page size">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="all">All Rows</option>
</select>
<select class="gotoPage" title="Select page number"></select>
</div>
</div>
</form>
</body>
</html>
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
namespace WebPaingDemo
{
/// <summary>
///
/// </summary>
public partial class WebForm4 : System.Web.UI.Page
{
/// <summary>
///
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
this.Repeater1.DataSource = bindata();
this.Repeater1.DataBind();
}
}
/// <summary>
///
/// </summary>
/// <returns></returns>
private DataTable bindata()
{
int iResult;
Random ro = new Random();
DataTable dt = new DataTable();
dt.Columns.Add("ID", typeof(int));
dt.Columns.Add("Name", typeof(string));
dt.Columns.Add("Major", typeof(string));
dt.Columns.Add("Sex", typeof(string));
dt.Columns.Add("English", typeof(int));
dt.Columns.Add("Japanese", typeof(int));
dt.Columns.Add("Calculus", typeof(int));
dt.Columns.Add("Geometry", typeof(int));
for (int i = 0; i < 500; i++)
{
DataRow row = dt.NewRow();
row["ID"] = i;
row["Name"] ="Student"+ i.ToString();
row["Major"] = "Languages" + i.ToString(); ;
if (i % 2 == 0)
{
row["Sex"] = "female";
}
else
{
row["Sex"] = "male";
}
iResult = ro.Next();
row["English"] = iResult;
iResult = ro.Next();
row["Japanese"] = iResult;
iResult = ro.Next();
row["Calculus"] = iResult;
iResult = ro.Next();
row["Geometry"] = iResult;
dt.Rows.Add(row);
}
return dt;
}
}
}