here are the links:
http://tablesorter.com
Make the gridview control accessible
first we need to make sure the table structure that asp.net makes for gridview is ok to work with tablesorter jquery plugin.
here is the code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-1.4.4.js" type="text/javascript"></script>
<script src="jquery.tablesorter.min.js" type="text/javascript"></script>
<link href="tablesorter.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$.tablesorter.defaults.sortList = [[3, 0],[1,1]];
$("#grid").tablesorter({
//The first column disbaled for sort
headers: { 0: { sorter: false} }
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
<asp:GridView ID="grid" runat="server" CssClass="tablesorter" Width="500">
<HeaderStyle BackColor="#e6EEEE"></HeaderStyle>
</asp:GridView>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class tablesorter_test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
List<MyEntity> list = new List<MyEntity>();
list.Add(new MyEntity() { ID = 1, Name = "test1", Date = new DateTime(1990, 1, 2), Num = 20 });
list.Add(new MyEntity() { ID = 4, Name = "test2", Date = new DateTime(2010, 1, 2), Num = 30 });
list.Add(new MyEntity() { ID = 5, Name = "name1", Date = new DateTime(2000, 1, 2), Num = 40 });
list.Add(new MyEntity() { ID = 9, Name = "name2", Date = new DateTime(1999, 1, 2), Num = 50 });
grid.DataSource = list;
grid.DataBind();
}
}
protected void Page_PreRender(object sender, EventArgs e)
{
FixGridViewTable(grid);
}
private void FixGridViewTable(GridView grid)
{
if (grid.Rows.Count > 0)
{
grid.UseAccessibleHeader = true;
grid.HeaderRow.TableSection = TableRowSection.TableHeader;
grid.FooterRow.TableSection = TableRowSection.TableFooter;
}
}
}
public class MyEntity
{
public int ID { get; set; }
public string Name { get; set; }
public DateTime Date { get; set; }
public decimal Num { get; set; }
}
tablesorter.css
--------------------------------------------------------
table.tablesorter thead tr .header {
background-image: url(bg.gif);
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
table.tablesorter thead tr .headerSortUp {
background-image: url(asc.gif);
}
table.tablesorter thead tr .headerSortDown {
background-image: url(desc.gif);
}
3 comments:
does this work with framework 3.5? The CSS styles are not applied for me in 3.5... but in 4.0 it works.
It should work in 3.5, because CSS styles has nothing to do with .Net framework version.
I never had an idea that it is possible to sort the asp.net gridview on client side.Moreover JQuery is a great tool and it provide amazing things.Thanks for updating on this
digital certificates
Post a Comment