1. 前台代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="../../Scripts/jquery-1.10.2.js"></script>
<script src="../../Scripts/jquery.tablesorter.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#GridView2").tablesorter();
});
</script>
<style type="text/css">
th {
cursor: pointer;
background-color: #dadada;
color: Black;
font-weight: bold;
text-align: left;
}
</style> </head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView2" CellPadding="" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Item" HeaderText="Item" />
<asp:BoundField DataField="Price" HeaderText="Price" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>

2. 后台代码

    protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[] { new DataColumn("Item"), new DataColumn("Price") });
dt.Rows.Add("AItem", );
dt.Rows.Add("BItem", );
dt.Rows.Add("CItem", );
dt.Rows.Add("DItem", );
dt.Rows.Add("EItem", );
dt.Rows.Add("FItem", );
GridView2.DataSource = dt;
GridView2.DataBind(); }
GridView2.UseAccessibleHeader = true;
GridView2.HeaderRow.TableSection = TableRowSection.TableHeader;
}

注意:

需要下载JS插件,并引入插件

http://tablesorter.com/docs/#Download

查看Download里面的jquery.tablesorter.zip.

资料来源:

http://www.c-sharpcorner.com/Blogs/46650/how-to-do-sorting-in-gridview-on-client-side-using-jquery.aspx

使用JQuery插件,排序Gridview的某个字段的更多相关文章

  1. jPList – 实现灵活排序和分页功能的 jQuery 插件

    jPList 是一个灵活的 jQuery 插件,可以用于任何 HTML 结构的排序,分页和筛选.它支持的数据源包括:PHP + MySQL,ASP.NET + SQL Server,PHP + SQL ...

  2. jQuery 表格排序插件 Tablesorter 使用

    jQuery 表格排序插件 Tablesorter 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面): <script src="lib/jquery-1.8.3.m ...

  3. 50个jQuery插件可将你的网站带到另一个高度

    Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好 ...

  4. 第7章 jQuery插件的使用和写法

    第7章 jQuery插件的使用和写法 插件又称扩展,是一种遵循一定规范的应用程序接口写出来的程序. 插件的编写思想基于面向对象. 获取最新的插件可以查看jquery官网:http://plugins. ...

  5. JQuery 插件FlexiGrid 之完全配置与使用

    博客分类: Java综合 jQuery配置管理jsonServlet数据结构  自己再做这个的时候.也是找了很多资料..但网上搜索了很多资料. 没有介绍的很全的. 鄙人就在此献丑一下. 来全面的介绍一 ...

  6. 2014年50个程序员最适用的免费JQuery插件

    有用的jQuery库是设计师和开发者之间一个非常熟悉的短语.这是现在互联网中最流行的JavaScript函数库之一.每个设计师和开发人员都应该知道它的重要性,而且熟悉它的功能和特点. jQuery几乎 ...

  7. 【转】20个令人敬畏的jQuery插件

    为网页设计师和开发推荐20个令人敬畏的jQuery插件.例如滑块,图像画廊,幻灯片插件,jQuery的导航菜单,jQuery文件上传,图像旋转器,标签的插件,用户界面​​元素,网络接触形式,模态窗口, ...

  8. jquery插件FlexiGrid的使用

    jquery插件FlexiGrid的使用 已不推荐下载,如要下载去这个连接下载最新的 http://gundumw100.iteye.com/blog/545610  更新于2009-11-30 先看 ...

  9. BootStrap_04之jQuery插件(导航、轮播)、以及Less

    1.列偏移与列排序: ①列偏移:控制列出现的位置,某列偏移后,后序列会随之偏移--只能右偏移: col-lg/md/sm/xs-offset-*; ②列排序:控制某一列的位置,该列可以左(pull)右 ...

随机推荐

  1. php框架

    使用composer构建的php框架 github: https://github.com/Ev2le0/LeoFramework 实现功能: 1)路由 2)ORM 3)视图

  2. Gulp 之二

    Gulp学习2 之前已经配置过一篇啦, 只不过那次是针对browserify 搬运 http://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8 ...

  3. VS2015如何另存解决方案文件-修改解决方案sln文件的路径

    原文:VS2005如何另存解决方案文件-修改解决方案sln文件的路径 修改解决方案sln文件的路径 方法一:工具→选项→项目和解决方案,可设置项目的默认保存位置.方法二:"解决方案资源管理器 ...

  4. hdoj Scaena Felix

    Scaena Felix Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Tota ...

  5. [Docker]初次接触

    Docker 初次接触 近期看了不少docker介绍性文章,也听了不少公开课,于是今天去官网逛了逛,发现了一个交互式的小教程于是决定跟着学习下. 仅仅是把认为重点的知识记录下来,不是非常系统的学习和笔 ...

  6. 数字信号处理Day1自制电子音乐

    第一天的课程感觉比較简单,主要介绍Karplus-Strong Algorithm 给出方程 y[n]=αy[n−M]+x[n], x[n]是输入,M是延迟,α是衰弱系数 我们要衰减D次,总的採样数就 ...

  7. cuda核函数再调用核函数,多层并行

    #include <stdio.h> __global__ void childKernel(int i) { int tid = blockIdx.x*blockDim.x+thread ...

  8. Swift和Objective-C混合编程

    假设你现在就是一个iOS程序员,你对Objective-C很熟悉,对iOS开发也很熟悉,然而,苹果公司在iOS 8之后推出了Swift语言.那么,如何才能快速地从Objective-C过渡到Swift ...

  9. ajax 上传图片 并预览

     <img {if !$article[pic]}style="display: none"{/if} width="82" height="6 ...

  10. Linux内核学习笔记-1.简介和入门

    原创文章,转载请注明:Linux内核学习笔记-1.简介和入门 By Lucio.Yang 部分内容来自:Linux Kernel Development(Third Edition),Robert L ...