JQuery实现分页程序代码，源码下载
Web开发，分页在所难免的，微软GridView、AspPager等设置分页数据可以自动分页，但是这里浏览器会闪动，用户体验不是很友好，在此我整理了JQuery实现分页，并且使用
JQuery模板显示数据,用户体验很友好
项目结构：
jquery.tools.pack.js是Jquery数据显示模板
Default.aspx显示分页数据，Member_Ajax.aspx是将数据已JSON格式输出到页面，PageBar.cs分页工具条，Student.cs实体类
首先Default.aspx页面需要引用的JS文件
JQuery采用 1.4.1.1 下载地址：http://pan.baidu.com/share/link?shareid=3024434948&uk=2920032010
JQuery数据显示模板JS 下载地址：http://pan.baidu.com/share/link?shareid=3030793948&uk=2920032010
分页按钮样式 下载地址：http://pan.baidu.com/share/link?shareid=3146737028&uk=2920032010
Default.aspx页面js代码，如下,每页条数可以自定义，也可以放置配置文件中，queryString函数是根据URL参数名称，获取参数的值
<script type="text/javascript"> var pagesize = 10; var page = thispage(); $(document).ready(function () { ajaxList(page); }); function queryString(pname) { var query = location.search.substring(1); var str = ""; params = query.split("&"); if (params.length > 0) { for (var n in params) { var pairs = params[n].split("="); if (pairs[0] == pname) { str = pairs[1]; break; } } } return str; } function thispage() { var r = /^[1-9][0-9]*$/; if (queryString('page') == '') return 1; if (r.test(queryString('page'))) return parseInt(queryString('page')); else return 1; } function ajaxList(currentpage) { if (currentpage != null) page = currentpage; $.ajax({ type: "get",//get类型，获取用QueryString方法，post类型，用Form获取传值 dataType: "json", data: "pageIndex=" + currentpage + "&pagesize=" + pagesize + "&clienttt=" + Math.random(), url: "Member_Ajax.aspx", error: function (XmlHttpRequest, textStatus, errorThrown) { alert(XmlHttpRequest.responseText); }, success: function (d) { switch (d.result) { case '-1': Alert(d.returnval); break; case '0': Alert(d.returnval); break; case '1': $("#ajaxList").setTemplateElement("tplList", null, { filter_data: true }); $("#ajaxList").processTemplate(d); $("#ajaxPageBar").html(d.pagebar); break; } } }); } </script>
Default.aspx页面Form代码如下，页面数据使用JQuery jTemplates绑定数据，非常方便，只需设置JSON格式数据，引用JS文件即可
<textarea >
<table class="cooltable" width="300px">
<thead>
<tr>
<th align="center" scope="col" style="30px;"><input onclick="checkAllLine()" /></th>
<th scope="col" style="60px;">ID</th>
<th width="120px">姓名</th>
<th scope="col" width="60px">年龄</th>
</tr>
</thead>
<tbody>
{#foreach $T.table as record}
<tr>
<td align="center">
<input class="checkbox" name="selectID" type="checkbox" value='{$T.record.MemberNo}' />
</td>
<td align="center">{$T.record.Id}</td>
<td align="left">
{$T.record.Name}
</td>
<td align="left">
{$T.record.Age}
</td>
</tr>
{#/for}
</tbody>
</table>
</textarea>
<div >
</div><br />
<div >
</div>
$T.table.Id 中Id对应的是实体类Id属性,table是json格式中list集合名称
上面Javascript方法中用到Member_Ajax.aspx页面代码如下，注意：这里是将数据已JSON格式输出到页面，配合JQuery数据模板使用，所有Member_Ajax.aspx页面，不应该包含Html标签，其代码格式如下
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Member_Ajax.aspx.cs" Inherits="Nick.Kuang.Web.Member_Ajax" %>
Member_Ajax.aspx cs页面代码
protected void Page_Load(object sender, EventArgs e) { Response.Write(GetAll()); } private string GetAll() { List<Student> list = new List<Student>(); for (int i = 0; i < 100; i++) { list.Add(new Student { Id = i, Name = "Name" + i, Age = i }); } int pageIndex = GetPage(); int pageSize = StrToInt(QueryString("pagesize"), 10); ; JavaScriptSerializer javascriptSerializer = new JavaScriptSerializer(); string result = javascriptSerializer.Serialize(list.Skip(pageSize * (pageIndex - 1)).Take(pageSize).ToList()); string response = "{"result" :"1"," + ""returnval" :"操作成功"," + ""pagebar" :"" + PageBar.GetPageBar(3, "js", 2, list.Count, pageSize, pageIndex, "javascript:ajaxList(<#page#>);") + ""," + """ + "totalCountStr" + "":" + 10 + ","" + "table" + "":" + result + "}"; return response; } private static int GetPage() { int page = StrToInt(QueryString("pageIndex"), 0) < 1 ? 1 : StrToInt(QueryString("pageIndex"), 0); return page; } private static int StrToInt(string value, int defaultValue) { if (IsNumeric(value)) return int.Parse(value); else return defaultValue; } /// <summary> /// 获取querystring /// </summary> /// <param name="s">参数名</param> /// <returns>返回值</returns> private static string QueryString(string s) { if (HttpContext.Current.Request.QueryString[s] != null && HttpContext.Current.Request.QueryString[s] != "") { return SafetyQueryS(HttpContext.Current.Request.QueryString[s].ToString()); } return string.Empty; } /// <summary> /// 将字符串中的一些标签过滤 /// </summary> /// <param name="theString"></param> /// <returns></returns> private static string SafetyQueryS(string theString) { string[] aryReg = { "'", ";", """, " ", " ", "<", ">" }; for (int i = 0; i < aryReg.Length; i++) { theString = theString.Replace(aryReg[i], string.Empty); } return theString; } private static bool IsNumeric(string value) { System.Text.RegularExpressions.Regex myRegex = new System.Text.RegularExpressions.Regex("^[-]?[1-9]*[0-9]*$"); if (value.Length == 0) { return false; } return myRegex.IsMatch(value); }