异步分页实现步骤
一、获取数据库中的所有数据。
二、实现页页面前端数据显示。
三、添加样式代码，改版样式的效果。
四、分页标签添加到表格下面。
五、修改获取数据的代码，实现显示分页数据。
六、注册分页标签的单击事件并修改异步请求代码。
前端代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>数据页面</title>
<link href="css/tableStyle.css" rel="stylesheet" />
<link href="css/NavPager.css" rel="stylesheet" />
<script src="JavaScript/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function() {
initTable("");
});
//初始化表格
function initTable(PostData) {
$.ajax({
url: "LoadAllNews.ashx",
data: PostData, //发送到后台数据
dataType: "json", //后台返回数据的类型
type: "post", //请求类型
success:function(data) {
$("#tbBody").html("");
for (var key in data.NewsList) {
var dateStr = "2014-10-11";
var strTr = "<tr>";
strTr += "<td>" + data.NewsList[key].ID + "</td>";
strTr += "<td>" + data.NewsList[key].title + "</td>";
strTr += "<td>" + dateStr + "</td>";
strTr += "<td>" + data.NewsList[key].people + "</td>";
strTr += "</tr>";
$("#tbBody").append(strTr);
}
//添加分页标签
$("#NavLink").html(data.NavHtml);
bindNavLinkClickEvent();
}
});
}
//绑定分页超链接标签的点击事件
function bindNavLinkClickEvent() {
$(".pageLink").click(function() {
//改变当前页数据
//改变分页标签
var href = $(this).attr("href");
var strPostData = href.substr(href.lastIndexOf('?') + 1);
initTable(strPostData);
return false;
});
}
</script>
</head>
<body>
<table>
<thead>
<tr>
<th>课程编号</th>
<th>课程名称</th>
<th>发布时间</th>
<th>发布人员</th>
</tr>
</thead>
<tbody id="tbBody"></tbody>
</table>
<!--显示分页标签-->
<div id="NavLink" class="paginator"></div>
</body>
</html>
生成页面导航类：
public static class Paging
{
/// <summary>
/// </summary>
/// <param name="pageSize">一页多少条</param>
/// <param name="currentPage">当前页</param>
/// <param name="totalCount">总条数</param>
/// <returns></returns>
public static string ShowPageNavigate(int pageSize, int currentPage, int totalCount)
{
string redirectTo = "";
pageSize = pageSize == 0 ? 3 : pageSize;
var totalPages = Math.Max((totalCount + pageSize - 1)/pageSize, 1); //总页数
var output = new StringBuilder();
if (totalPages > 1)
{
if (currentPage != 1)
{
//处理首页连接
output.AppendFormat("<a class='pageLink' href='{0}?pageIndex=1&pageSize={1}'>首页</a> ", redirectTo,
pageSize);
}
if (currentPage > 1)
{
//处理上一页的连接
output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>上一页</a> ", redirectTo,
currentPage - 1, pageSize);
}
else
{
// output.Append("<span class='pageLink'>上一页</span>");
}
output.Append(" ");
int currint = 5;
for (int i = 0; i <= 10; i++)
{
//一共最多显示10个页码，前面5个，后面5个
if ((currentPage + i - currint) >= 1 && (currentPage + i - currint) <= totalPages)
{
if (currint == i)
{
//当前页处理
//output.Append(string.Format("[{0}]", currentPage));
output.AppendFormat("<a class='cpb' href='{0}?pageIndex={1}&pageSize={2}'>{3}</a> ",
redirectTo, currentPage, pageSize, currentPage);
}
else
{
//一般页处理
output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>{3}</a> ",
redirectTo, currentPage + i - currint, pageSize, currentPage + i - currint);
}
}
output.Append(" ");
}
if (currentPage < totalPages)
{
//处理下一页的链接
output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>下一页</a> ", redirectTo,
currentPage + 1, pageSize);
}
else
{
//output.Append("<span class='pageLink'>下一页</span>");
}
output.Append(" ");
if (currentPage != totalPages)
{
output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>末页</a> ", redirectTo,
totalPages, pageSize);
}
output.Append(" ");
}
output.AppendFormat("第{0}页 / 共{1}页", currentPage, totalPages); //这个统计加不加都行
return output.ToString();
}
}
网页一般处理程序：
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//默认显示第一页数据，默认显示5条
int pageSize = int.Parse(context.Request["pageSize"] ?? "5");
int pageIndex = int.Parse(context.Request["pageIndex"] ?? "1");
int total = 0;
//查询数据库中数据的总条数
string sql = "select count(*) from MainInfo";
total = Convert.ToInt32(SqlHelper.ExecuteScalar(sql));
//查询数据库中的数据条数
int totalSize = pageSize * (pageIndex - 1);
string pageSql =
"select top (@pageSize) ID,title,Date,people from MainInfo where (ID not in (select top (@totalSize) ID from MainInfo order by ID)) order by ID";// "select top @pageSize ID,title,Date,people from MainInfo where (ID not in (select top @totalSize ID from MainInfo order by ID)) order by ID";
SqlParameter[] ps=new SqlParameter[]
{
new SqlParameter("@pageSize",pageSize),
new SqlParameter("@totalSize",totalSize)
};
//获取数据库中的所有数据
DataSet ds = SqlHelper.Query(pageSql, ps);
GetNewList newList = new GetNewList();
List<Model_Main> listData = newList.DataTableToList(ds.Tables[0]);
//返回分页超链接标签
string strNavHtml = Paging.ShowPageNavigate(pageSize, pageIndex, total);
//获取一个model实体的对象，直接转换成js数组、字符串
JavaScriptSerializer jsJavaScriptSerializer=new JavaScriptSerializer();
//将数据对象集合和分页标签合并成一个匿名对象
var data = new { NewsList = listData, NavHtml = strNavHtml };
//序列化只能序列化一个类型
string jsonStr = jsJavaScriptSerializer.Serialize(data);
context.Response.Write(jsonStr);
}
public bool IsReusable
{
get
{
return false;
}
}
CSS文件tableStyle.css：
caption
{
padding: 0 0 5px 0;
width: 700px;
font: italic 11px "Trebuchet MS" , Verdana, Arial, Helvetica, sans-serif;
text-align: right;
}
th
{
font: bold 11px "Trebuchet MS" , Verdana, Arial, Helvetica, sans-serif;
color: #burlywood;
border-right: 1px solid #C1DAD7;
border-left: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #0066AA no-repeat;
}
th.nobg
{
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
}
td
{
border-left: 1px solid #C1DAD7;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
font-size: 11px;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
td.alt
{
background: #F5FAFA;
color: #797268;
}
th.spec
{
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff no-repeat;
font: bold 10px "Trebuchet MS" , Verdana, Arial, Helvetica, sans-serif;
}
th.specalt
{
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa no-repeat;
font: bold 10px "Trebuchet MS" , Verdana, Arial, Helvetica, sans-serif;
color: #797268;
}
.span_link
{
cursor:pointer;
color:Black;
}
.tr_Category
{
}
.pageLink
{
color:Blue;
margin-left:2px;
margin-right:2px;
}
.tr_Category_P td
{
background-color:#EEEEFF;
}
CSS文件NavPager.css：
.paginator
{
font: 12px Arial, Helvetica, sans-serif;
padding: 10px 20px 10px 0;
margin: 0px;
}
.paginator a
{
border: solid 1px #ccc;
color: #0063dc;
cursor: pointer;
text-decoration: none;
}
.paginator a:visited
{
padding: 1px 6px;
border: solid 1px #ddd;
background: #fff;
text-decoration: none;
}
.paginator .cpb
{
border: 1px solid #F50;
font-weight: 700;
color: #F50;
background-color: #ffeee5;
}
.paginator a:hover
{
border: solid 1px #F50;
color: #f60;
text-decoration: none;
}
.paginator a, .paginator a:visited, .paginator .cpb, .paginator a:hover
{
float: left;
height: 16px;
line-height: 16px;
min-width: 10px;
_width: 10px;
margin-right: 5px;
text-align: center;
white-space: nowrap;
font-size: 12px;
font-family: Arial,SimSun;
padding: 0 3px;
}