项目中经常会用到分页的功能类似的项目做过无数个了，今个把自己常用的分页代码分享一下。
首先说说服务端处理的代码：
下面代码中重点是分页的sql语句的写法，其中的参数@n是当前的页码，总的来说本服务端主要向前台输出了2个值，接收了一个参数（当前页码），输出的是总的页数和当前页码下的数据。
sql = “select t.* from (select *,ROW_NUMBER() over(order by id asc) rownum from eazy_yiliaofuwu where typeid='”+id+”‘)t where t.rownum>=(@n-1)*10+1 and t.rownum<=@n*10″;
DataTable dt = DbHelperSQL.Query(sql, new SqlParameter(“@n“, pagenum)).Tables[0];
namespace EazyCMS.Web.tools
{
/// <summary>
/// getyaopinfuwu 的摘要说明
/// </summary>
public class getyaopinfuwu : IHttpHandler
{
private string sql = string.Empty; private int total = ; public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string id = context.Request["id"];
int pagenum = Convert.ToInt32(context.Request["pagenum"]); sql = "select t.* from (select *,ROW_NUMBER() over(order by id asc) rownum from eazy_yiliaofuwu where typeid='"+id+"')t where t.rownum>=(@n-1)*10+1 and t.rownum<=@n*10";
DataTable dt = DbHelperSQL.Query(sql, new SqlParameter("@n", pagenum)).Tables[];
//这里得到的根据条件查询得到的数据总的条数
total = Convert.ToInt32(DbHelperSQL.GetSingle("select COUNT(*) from eazy_yiliaofuwu where typeid=" + id));
Medicalitems medicalitems = new Medicalitems();
medicalitems.medicalitem = new Medicalitem[dt.Rows.Count];
medicalitems.PageCount = (int)Math.Ceiling(total / 10.0);//总的页码0.1→1 ， 0.95→1， 1.01→2，1.0→1
for (int i = ; i < dt.Rows.Count; i++)
{
medicalitems.medicalitem[i] = new Medicalitem() { MedicalCode=dt.Rows[i]["ylcode"].ToString(), MedicalContent=dt.Rows[i]["itemcontent"].ToString(), MedicalName=dt.Rows[i]["itemname"].ToString(), MedicalPrice=dt.Rows[i]["price"].ToString(), MedicalUnit=dt.Rows[i]["danwei"].ToString() };
}
context.Response.Write(new JavaScriptSerializer().Serialize(medicalitems)); } public bool IsReusable
{
get
{
return false;
}
}
}
class Medicalitems
{
public Medicalitem[] medicalitem { get; set; }
public int PageCount { get; set; } }
class Medicalitem
{
public string MedicalCode { get; set; }
public string MedicalName { get; set; }
public string MedicalContent { get; set; }
public string MedicalUnit { get; set; }
public string MedicalPrice { get; set; } }
}
再来说说前端代码：
<script type="text/javascript">
var id;
function getdata(v) {
$("#pageGro").removeAttr("style");
id=v;
ShowPage();
} function ShowPage(pagenum){
$.post("../../tools/getyaopinfuwu.ashx", { "id": id,"pagenum":pagenum }, function (data) { //根据总页数判断，如果小于5页，则显示所有页数，如果大于5页，则显示5页。根据当前点击的页数生成 var pageCount = parseInt(data.PageCount);//模拟后台总页数
//生成分页按钮
if(pageCount>){
page_icon(,,);
}else{
page_icon(,pageCount,);
} //点击分页按钮触发
$("#pageGro li").live("click",function(){
//alert(id);
if(pageCount > ){
var pageNum = parseInt($(this).html());//获取当前页数
pageGroup(pageNum,pageCount); }else{
$(this).addClass("on");
$(this).siblings("li").removeClass("on");
var pageNum = parseInt($(this).html());//获取当前页数
ShowPage2(pageNum);
}
}); //点击上一页触发
$("#pageGro .pageUp").click(function(){
if(pageCount > ){
var pageNum = parseInt($("#pageGro li.on").html());//获取当前页
pageUp(pageNum,pageCount);
}else{
var index = $("#pageGro ul li.on").index();//获取当前页
if(index > ){
$("#pageGro li").removeClass("on");//清除所有选中
$("#pageGro ul li").eq(index-).addClass("on");//选中上一页
var pageNum = parseInt($("#pageGro li.on").html());//获取当前页
ShowPage2(pageNum);
}
}
}); //点击下一页触发
$("#pageGro .pageDown").click(function(){
if(pageCount > ){
var pageNum = parseInt($("#pageGro li.on").html());//获取当前页
pageDown(pageNum,pageCount);
}else{
var index = $("#pageGro ul li.on").index();//获取当前页
if(index+ < pageCount){
$("#pageGro li").removeClass("on");//清除所有选中
$("#pageGro ul li").eq(index+).addClass("on");//选中上一页
var pageNum = parseInt($("#pageGro li.on").html());//获取当前页
ShowPage2(pageNum);
}
}
}); //页码
var TotalPageNum=data.PageCount; $("#myui").empty();//首先清空当前容器下面的所有内容
var table=data.medicalitem;//这里得到一个数据对象的数组
for (var i = ; i < table.length; i++) {
var item=table[i];
$("<a ><li class=''> <div class='clrfix'><div class='honor_x'> <div class='time'>"+item.MedicalCode+"</div> </div> <div class='honor_n'>"+item.MedicalName+"</div><div class='honor_p'>"+item.MedicalContent+"</div> <div class='honor_n'>"+item.MedicalUnit+"</div> <div class='honor_c'>"+item.MedicalPrice+" </div> </div></li> </a> ").appendTo("#myui"); } },"json"); } function ShowPage2(pagenum){ $.post("../../tools/getyaopinfuwu.ashx", { "id": id,"pagenum":pagenum }, function (data) { $("#myui").empty(); var table=data.medicalitem;
for (var i = ; i < table.length; i++) {
var item=table[i];
$("<a ><li class=''> <div class='clrfix'><div class='honor_x'> <div class='time'>"+item.MedicalCode+"</div> </div> <div class='honor_n'>"+item.MedicalName+"</div><div class='honor_p'>"+item.MedicalContent+"</div> <div class='honor_n'>"+item.MedicalUnit+"</div> <div class='honor_c'>"+item.MedicalPrice+" </div> </div></li> </a> ").appendTo("#myui"); } },"json"); } </script>
