jQuery Pagination插件实现无刷新分页完整教程

引入必要资源文件

首先，需要在页面中依次引入所需的资源文件。

 
<script src="common/jquery.js" type="text/javascript"></script>
<script src="common/jquery.pagination.js" type="text/javascript"></script>
<link href="common/tablesorter.css" rel="stylesheet" type="text/css" />
<link href="common/pagination.css" rel="stylesheet" type="text/css" />

配置HTML表格结构

接下来，在页面的body部分添加相应的HTML结构。需要注意的是，这里展示的数据并非通过服务器控件绑定，而是直接通过简单的table标签来呈现。首先查看页面HTML代码。

 
<div>
<table id="linkTable" cellpadding="6" cellspacing="1" align="left" class="tablesorter" style="width:400px;margin:0 0 20px 5px;">
<thead>
<tr class="tableHeader" align="center">
<th style="width:200px; text-align:center;" >
产品名称
</th>
<th style="width:200px; text-align:center">
产品单价
</th>
</tr>
</thead>
</table>
</div>
<div id="Pagination" class="digg"></div>

前端JavaScript逻辑实现

分析上述代码可以发现，我们定义了一个包含<thead>的标准表格，并引入了jQuery的Pagination插件。只需在页面中定义一个id为Pagination的div容器即可。页面HTML部分分析完毕，接下来查看关键的JavaScript代码。

 
<script language="javascript" type="text/javascript">
var orderby = ""; //排序依据变量
$(document).ready(function() {
InitData(0); //初始化数据加载
}); 
//以下函数用于处理翻页事件
function pageselectCallback(page_id, jq) {
InitData(page_id);
} 
function InitData(pageIndex) {
var tbody = ""; //定义表格body部分变量
$.ajax({ //调用jQuery的AJAX方法
type: "POST",
dataType: "json",
url: '/DataListWeb/WebService/GetData.ashx', //数据请求地址
data: "pageIndex=" + (pageIndex + 1) + "&sortType=" + orderby,
//传递参数：pageIndex为页码（从0开始，此处+1），orderby为排序类型
//以下逻辑用于处理AJAX成功返回后的数据绑定
success: function(data) {
$("#linkTable tr:gt(0)").remove(); //移除原有数据行
var myData = data.Products;
$.each(myData, function(i, n) {
var trs = "";
trs += "<tr><td align='center'>" + n.ProductName + "</td><td>" + n.QuantityPerUnit + "</td></tr>";
tbody += trs;
}); 
$("#linkTable").append(tbody); //将新数据追加到表格
} 
}); 
//以下代码用于重新绑定分页控件
$("#Pagination").pagination(<%=pageCount %>, {
callback: pageselectCallback,
prev_text: '< 上一页',
next_text: '下一页 >',
items_per_page: 20,
num_display_entries: 6,
current_page: pageIndex,
num_edge_entries: 2
}); 
} 
</script>

后端数据处理与JSON转换

至此，前端页面的主要操作已完成，代码中已包含详细注释。如有疑问，可参考后续后端处理逻辑。接下来查看GetData.ashx文件中的数据操作部分。这里使用了SqlHelper类执行SQL语句，配合分页存储过程，并利用Json.NET将数据库数据转换为JSON格式。JSON处理较为简便，以下是具体代码实现。

 
string strConn = ConfigurationManager.AppSettings["ConnectionString"];
//获取当前页码
int pageIndex;
int.TryParse(context.Request["pageIndex"], out pageIndex);
//排序类型变量
string orderType = "ProductID";
int sortType = 1;
if (!string.IsNullOrEmpty(context.Request["sortType"]))
{ 
string[] strArr = context.Request["sortType"].Split('_');
if (strArr[1] == "0")
{ 
orderType = strArr[0];
sortType = 0;
} 
else
{ 
orderType = strArr[0];
sortType = 1;
} 
} 
if (pageIndex == 0)
{ 
pageIndex = 1;
} 
//调用分页存储过程，传入相应参数
System.Data.SqlClient.SqlParameter[] p =
{ 
SqlHelper.MakeOutParam("@Counts", SqlDbType.Int, 4),
SqlHelper.MakeInParam("@tblName", SqlDbType.VarChar, 128, "Products"),
SqlHelper.MakeInParam("@strGetFields", SqlDbType.VarChar,200, "ProductName,QuantityPerUnit"),
SqlHelper.MakeInParam("@fldName", SqlDbType.VarChar, 128, orderType),
SqlHelper.MakeInParam("@PageSize", SqlDbType.Int, 4, 20),
SqlHelper.MakeInParam("@PageIndex", SqlDbType.Int, 1, pageIndex),
SqlHelper.MakeInParam("@OrderType", SqlDbType.Bit, 1, sortType),
SqlHelper.MakeInParam("@strWhere", SqlDbType.VarChar, 1500, "")
}; 
DataTable dt = SqlHelper.ExecuteDataset(strConn, CommandType.StoredProcedure, "sp_PageCut", p).Tables[0];
int pageCount = Convert.ToInt32(p[0].Value.ToString());
//将DataTable数据转换为JSON格式
context.Response.Write(Util.DataTableToJSON(dt, "Products", pageCount));
以下是DataTableToJSON方法的实现代码，该部分较为简单，依据帮助文档编写，此处不再赘述详细说明。
public static string DataTableToJSON(DataTable dt, string tableName, int pageCount)
{ 
StringBuilder sb = new StringBuilder();
StringWriter sw = new StringWriter(sb);
using (JsonWriter jw = new JsonTextWriter(sw))
{ 
JsonSerializer ser = new JsonSerializer();
jw.WriteStartObject();
jw.WritePropertyName(tableName);
jw.WriteStartArray();
#region TableName属性
foreach (DataRow dr in dt.Rows)
{ 
jw.WriteStartObject();
foreach (DataColumn dc in dt.Columns)
{ 
jw.WritePropertyName(dc.ColumnName);
ser.Serialize(jw, dr[dc].ToString());
} 
jw.WriteEndObject();
} 
#endregion
jw.WriteEndArray();
jw.WriteEndObject();
sw.Close();
jw.Close();
} 
return sb.ToString();
} 

获取数据总数与总页数计算

至此工作基本完成，需声明绑定表格，从服务端获取数据并转换为JSON格式，在页面中完成数据绑定。虽然呈现效果良好，但需关注分页功能，因为页面默认仅显示一页。使用分页插件时，必须获取数据总数以计算总页数。

解决方法很简单，在页面的Page_Load事件中获取数据总数并进行绑定。回顾之前的代码，可以看到一句关键代码：

 
$("#Pagination").pagination(<%=pageCount %>
if (!IsPostBack)
{ 
SqlParameter[] p =
{ 
SqlHelper.MakeOutParam("@Counts", SqlDbType.Int, 4),
SqlHelper.MakeInParam("@tblName", SqlDbType.VarChar, 128, "Products"),
SqlHelper.MakeInParam("@strGetFields", SqlDbType.VarChar,200, "*"),
SqlHelper.MakeInParam("@fldName", SqlDbType.VarChar, 128, "ProductID"),
SqlHelper.MakeInParam("@PageSize", SqlDbType.Int, 4, 20),
SqlHelper.MakeInParam("@PageIndex", SqlDbType.Int, 1, 1),
SqlHelper.MakeInParam("@OrderType", SqlDbType.Bit, 1, 0),
SqlHelper.MakeInParam("@strWhere", SqlDbType.VarChar, 1500, "")
}; 
DataTable dt = SqlHelper.ExecuteDataset(conn, CommandType.StoredProcedure, "sp_PageCut", p).Tables[0];
pageCount = Convert.ToInt32(p[0].Value.ToString());
} 

以上介绍了如何利用jQuery Pagination插件实现无刷新分页。简要回顾：定义表格，使用jQuery AJAX进行数据绑定，后端获取数据并转换为JSON，前端完成数据绑定。整个过程虽然步骤较多，但逻辑清晰。如果你觉得繁琐，欢迎在评论区提出建议。编写博客有助于巩固知识，希望对你有帮助。

经过美工处理，生成了分页效果的GIF图片，如下图所示。