jq分页 不刷新页面_jq实现无刷新分页

1.没事干   在网上看了一个   jq实现  无刷新分页的插件，所以自己  根据上面所说的写了一个   实例   来供自己学习 。从而更好的掌握 。

2.所需要引用的js和css文件

2.前台html与js代码

var pageIndex = 0; //页面索引初始值

var pageSize = 10; //每页显示条数初始化，修改显示条数，修改这里即可

$(document).ready(function() {

InitTable(0); //Load事件，初始化表格数据，页面索引为0(第一页)

//分页，PageCount是总条目数，这是必选参数，其它参数都是可选

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

callback: PageCallback,

prev_text: '上一页', //上一页按钮里text

next_text: '下一页', //下一页按钮里text

items_per_page: pageSize, //显示条数

num_display_entries: 5, //连续分页主体部分分页条目数

current_page: pageIndex, //当前页索引

num_edge_entries: 2 //两侧首尾分页条目数

});

});

//翻页调用

function PageCallback(index, jq) {

InitTable(index);

}

//请求数据

function InitTable(pageIndex) {

$.ajax({

type: "POST",

dataType: "text",

url: 'Handler/PagerHandler.ashx', //提交到一般处理程序请求数据

data: "pageIndex=" + (pageIndex + 1) + "&pageSize=" + pageSize, //提交两个参数：pageIndex(页面索引)，pageSize(显示条数)

success: function(data) {

$("#Result tr:gt(1)").remove(); //移除Id为Result的表格里的行，从第二行开始(这里根据页面布局不同页变)

$("#Result").append(data); //将返回的数据追加到表格

}

});

}

Dawn----无刷新分页

编号

名称

Dawn

Dawn

4.后台 handler代码  和创建数据源代码

using System;

using System.Web;

using System.Collections.Generic;

using System.Text;

using System.Linq;

public class PagerHandler : IHttpHandler {

public void ProcessRequest (HttpContext context) {

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

string str = string.Empty;

//具体的页面数

int pageIndex;

int.TryParse(context.Request["pageIndex"], out pageIndex);

//页面显示条数

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

if (pageIndex == 0)

{

pageIndex = 1;

}

System.Collections.Generic.IEnumerable list = Common.personList.Skip((pageIndex - 1) * size).Take(size);

StringBuilder sb = new StringBuilder();

foreach (Person p in list)

{

sb.Append("

");

sb.Append(p.Id.ToString());

sb.Append("

");

sb.Append(p.Name);

sb.Append("

");

}

str = sb.ToString();

context.Response.Write(str);

}

public bool IsReusable {

get {

return false;

}

}

}

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

///

/// 实体类---人

///

[Serializable]

public class Person

{

///

/// 编号

///

public int Id { get; set; }

///

/// 名字

///

public string Name { get; set; }

}

///

///Common 的摘要说明

///

public class Common

{

public static List personList = new List();

static Common()

{

for (int i = 0; i < 555; i++)

{

personList.Add(new Person

{

Id = Convert.ToInt32("100" + i.ToString()),

Name = "PersonName_" + i.ToString()

});

}

}

}

5：附带一张运行后的 效果图

6：相关参数说明图