使用JQuery插件pagination实现AJax无刷新分页
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="js/jquery.pagination.js" type="text/javascript"></script>
<link href="js/pagination.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript">
var pageSize = 10; //页大小
$().ready(function () {
$("#search").click(function () {
InitData(0);
});
InitData(0);
})
//查询主方法
function InitData(pageIndex, where) {
$("table tr.l").remove();
$.ajax({
type: "get",
dataType: "json", //数据格式:JSON
url: "Handler.ashx",
data: "pageIndex=" + (pageIndex + 1) + "&pageSize=" + pageSize + "&key=" + escape($("#txtName").val()),
beforeSend: function () { $("#divload").show(); $("#Pagination").hide(); }, //发送数据之前
complete: function () { $("#divload").hide(); $("#Pagination").show() }, //接收数据完毕
error: function (data) { alert('Error loading document'); },
success: function (josn) {
var tbody = "";
var recordCount = josn.RecordCount; //总记录数
if (recordCount != 0) {
$.each(josn.List, function (i, n) {
tbody += "<tr class='l'>\
<td>" + n.ID +"</td>\
<td>" + n.UserName + "</td>\
<td>" + n.Password + "</td>\
<td>" + n.Name + "</td>\
<td>" + n.Mobile + "</td>\
<td>" + n.Email + "</td>\
<td>" + n.CreateTime + "</td>\
</tr>";
});
$("#list").append(tbody);
pageBinder(pageIndex, recordCount);
}
}
});
}
//绑定分页
function pageBinder(pageIndex, recordCount) {
$("#Pagination").pagination(recordCount, {
callback: pageselectCallback,
prev_text: '上一页',
next_text: '下一页',
items_per_page: pageSize,
num_display_entries: 6,
current_page: pageIndex,
num_edge_entries: 2
});
}
function pageselectCallback(page_id, jq) {
InitData(page_id);
}
</script>
</head>
<body>
<form>
<div >
<img src="../images/ajax-loader.gif" />
</div>
<div>
<input type="text" />
<input type="button" value="search" />
</div>
<table >
<tr>
<th>ID</th>
<th>UserName</th>
<th>Password</th>
<th>Name</th>
<th>Mobile</th>
<th>Email</th>
<th>CreateTime</th>
</tr>
</table>
<div class="digg"></div>
</form>
</body>
</html>.ashx
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace WebApplication1
{
/// <summary>
/// Handler 的摘要说明
/// </summary>
public class Handler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
var pageIndex = int.Parse(context.Request.Params["pageIndex"]);
var pageSize = int.Parse(context.Request.Params["pageSize"]);
var key = context.Request.Params["key"];
var edm = new TestEntities();
var list = !string.IsNullOrEmpty(key) ? edm.User.Where(p => p.UserName.IndexOf(key) != -1 || p.Name.IndexOf(key) != -1) : edm.User;
var obj = new
{
RecordCount = list.Count(),
List = list.OrderBy(p => p.ID).Skip((pageIndex - 1) * pageSize).Take(pageSize)
};
var json = new System.Web.Script.Serialization.JavaScriptSerializer();
context.Response.Write(json.Serialize(obj));
}
public bool IsReusable
{
get
{
return false;
}
}
}
}