先看效果图：
实现原理很简单，使用了jquery.pagination这个插件，每当点击页码时异步去服务器去取该页的数据，简单介绍如下：
一、数据库表结构：很简单 就四个字段 分别是News_id News_title News_time News_readtimes
二、前台页面代码：
复制代码 代码如下:
<head runat="server">
<title>JQuery无刷新分页</title>
<link href="https://www.jb51.net/Styles/common.css" type="text/css" />
<link href="https://www.jb51.net/Styles/paging.css" type="text/css" />
<script src="https://www.jb51.net/Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="https://www.jb51.net/Scripts/jquery.pagination.js" type="text/javascript"></script>
<script type="text/javascript">
var pageIndex = 0;
var pageSize = 3;
$(function() {
InitTable(0);
$("#Pagination").pagination(<%=pageCount %>, {
callback: PageCallback,
prev_text: '上一页',
next_text: '下一页',
items_per_page: pageSize,
num_display_entries: 6,//连续分页主体部分分页条目数
current_page: pageIndex,//当前页索引
num_edge_entries: 2//两侧首尾分页条目数
});
//翻页调用
function PageCallback(index, jq) {
InitTable(index);
}
//请求数据
function InitTable(pageIndex) {
$.ajax({
type: "POST",
dataType: "text",
url: 'Ajax/PagerHandler.ashx',
data: "pageIndex=" + (pageIndex + 1) + "&pageSize=" + pageSize,
success: function(data) {
$("#Result tr:gt(0)").remove();//移除Id为Result的表格里的行，从第二行开始（这里根据页面布局不同页变）
$("#Result").append(data);//将返回的数据追加到表格
}
});
}
});
</script>
</head>
复制代码 代码如下:
<form runat="server">
<center>
<table cellpadding="5">
<tr>
<th>
ID
</th>
<th>
标题
</th>
<th>
更新时间
</th>
<th>
点击量
</th>
</tr>
</table>
<div>
</div>
</center>
</form>
三、页面后台文件
这里主要是获取记录总数：
复制代码 代码如下:
public string pageCount = string.Empty;//总条目数