html无刷新分页代码,JQuery+Ajax无刷新分页的实例代码

先看效果图：

实现原理很简单，使用了jquery.pagination这个插件，每当点击页码时异步去服务器去取该页的数据，简单介绍如下：

一、数据库表结构：很简单  就四个字段 分别是News_id  News_title  News_time  News_readtimes

二、前台页面代码：

JQuery无刷新分页

var pageIndex = 0;

var pageSize = 3;

$(function() {

InitTable(0);

$("#Pagination").pagination(, {

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);//将返回的数据追加到表格

}

});

}

});

ID	标题	更新时间	点击量

三、页面后台文件

这里主要是获取记录总数：

public string pageCount = string.Empty;//总条目数

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

pageCount = new News().GetNewsCount();

}

}

四、最主要的是ajax处理程序：PagerHandler.ashx

public class PagerHandler : IHttpHandler

{

public void ProcessRequest(HttpContext context)

{

context.Response.ContentType = "text/plain";

string str = string.Empty;

int pageIndex = Convert.ToInt32(context.Request["pageIndex"]);

int size = Convert.ToInt32(context.Request["pageSize"]);

if (pageIndex == 0)

{

pageIndex = 1;

}

int count = 0;

News n = new News();

List list = n.GetNewsList(pageIndex, size, ref count);

StringBuilder sb = new StringBuilder();

foreach (News p in list)

{

sb.Append("

");

sb.Append(p.News_id);

sb.Append("

");

sb.Append(""+p.News_title+"");

sb.Append("

");

sb.Append(p.News_time);

sb.Append("

");

sb.Append(p.News_readtimes);

sb.Append("

");

}

str = sb.ToString();

context.Response.Write(str);

}

public bool IsReusable

{

get

{

return false;

}

}

}