asp.net ajax+jquery(sorttable+pager)实现extjs数据按表头排序和分页效果

先来看看效果，以前一直喜欢的extjs效果，昨天看到了jquery两个插件的效果，做个了demo，感觉很爽：

此demo得注意几个地方，要调用服务器端webservice返回dataTable对象，必须加Microsoft.Web.Preview.dll的应用，这就要装ajax ctf版本了，相信很多有ajax环境的朋友也未必装了这个版本，所以在你的C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Futures January CTP\v1.0.61025就没有Microsoft.Web.Preview.dll这个文件了，这个大家可以在网上ASPAJAXCTP.msi，装上这个就有Microsoft.Web.Preview.dll，在项目中加上这个应用就之后就是配置web.config了，在web.config中与<System.Web>平级的地方加上下面的代码：

 

 1 <!-- 配置dataTable序列化开始 -->
 2      < system.web.extensions >
 3          < scripting >
 4              < webServices >
 5                  < jsonSerialization >
 6                      < converters >
 7                          < add  name ="DataSetConverter"  type ="Microsoft.Web.Preview.Script.Serialization.Converters.DataSetConverter,Microsoft.Web.Preview, Version=1.0.61025.0, Culture=neutral,PublicKeyToken=31bf3856ad364e35" />
 8                          < add  name ="DataRowConverter"  type ="Microsoft.Web.Preview.Script.Serialization.Converters.DataRowConverter,Microsoft.Web.Preview, Version=1.0.61025.0, Culture=neutral,PublicKeyToken=31bf3856ad364e35" />
 9                          < add  name ="DataTableConverter"  type ="Microsoft.Web.Preview.Script.Serialization.Converters.DataTableConverter,Microsoft.Web.Preview, Version=1.0.61025.0, Culture=neutral,PublicKeyToken=31bf3856ad364e35" />
10                      </ converters >
11                  </ jsonSerialization >
12              </ webServices >
13          </ scripting >
14      </ system.web.extensions >
15      <!-- 配置dataTable序列化结束 -->

 

下来就可以写webservice了，就返回20数据的一个方法：

 

 1 //  [ToolboxItem(false)]
 2      //  若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
 3    [System.Web.Script.Services.ScriptService]
 4      public   class  WebServiceData : System.Web.Services.WebService
 5      {
 6
 7        [WebMethod]
 8        public string HelloWorld()
 9        {
10            return "Hello World";
11        }
12        //返回20条数据
13        [WebMethod]
14        public DataTable GetDataList()
15        {
16            DataTable dtb = new DataTable("dd");
17
18            dtb.Columns.Add(new DataColumn("Name", typeof(string)));
19            dtb.Columns.Add(new DataColumn("Email", typeof(string)));
20            dtb.Columns.Add(new DataColumn("Salary", typeof(int)));
21
22            for (int intLoop = 0; intLoop < 20; intLoop++)
23            {
24                DataRow row = dtb.NewRow();
25                row["Name"] = string.Format("medal{0}", intLoop);
26                row["Email"] = string.Format("medal{0}@126.com", intLoop);
27                row["Salary"] = (intLoop + 1) * 100;
28                dtb.Rows.Add(row);
29            }
30
31            return dtb;
32        }
33    }

 

你如果用的也是vs2008的话[ToolboxItem(false)]这一行一定要把它干掉，否则客户端会不认识这个webservice的，默认情况是没被干掉的。

 

下来就是一大堆js的应用了，好像没什么说的，就是jquery的插件代码，放个包上来，想研究下的朋友看看

http://files.cnblogs.com/medal/WebServiceTableSort.rar