您的位置:首页 > Web前端 > JQuery

采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果

2011-06-08 09:25 1411 查看
1.插件参数列表



2.页面内容:

view plain
copy to clipboard
print
?

<%@ Page Language=
"C#"
AutoEventWireup=
"true"
CodeFile=
"Default.aspx.cs"
Inherits=
"_Default"
%>

<!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 runat="server"
>

<title>Porschev----无刷新翻页</title>

<mce:script src="Script/jquery-1.4.1.min.js"
mce_src=
"Script/jquery-1.4.1.min.js"
type=
"text/javascript"
></mce:script>

<mce:script src="Script/jquery.pagination.js"
mce_src=
"Script/jquery.pagination.js"
type=
"text/javascript"
></mce:script>

<mce:script src="Script/tablecloth.js"
mce_src=
"Script/tablecloth.js"
type=
"text/javascript"
></mce:script>

<link href="Style/tablecloth.css"
mce_href=
"Style/tablecloth.css"
rel=
"stylesheet"
type=
"text/css"
/>

<link href="Style/pagination.css"
mce_href=
"Style/pagination.css"
rel=
"stylesheet"
type=
"text/css"
/>

<mce:script type="text/javascript"
><!--

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

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

$(function() {

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

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

$("#Pagination"
).pagination(<%=pageCount %>, {

callback: PageCallback,

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

next_text: '下一页'
,
//下一页按钮里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: 'Handler/PagerHandler.ashx'
,
//提交到一般处理程序请求数据

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

success: function(data) {

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

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

}

});

}

});

// --></mce:script>

</head>

<body>

<div align="center"
>

<h1>Posrchev----无刷新分页</h1>

</div>

<div id="container"
>

<table id="Result"
cellspacing=
"0"
cellpadding=
"0"
>

<tr>

<th>编号</th>

<th>名称</th>

</tr>

</table>

<div id="Pagination"
></div>

</div>

</body>

</html>

3.页面后台内容:

view plain
copy to clipboard
print
?

using
System;

using
System.Collections.Generic;

using
System.Linq;

using
System.Web;

using
System.Web.UI;

using
System.Web.UI.WebControls;

public
partial
class
_Default : System.Web.UI.Page

{

public

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

protected

void
Page_Load(
object
sender, EventArgs e)

{

if
(!IsPostBack)

{

pageCount = new
PagerTestBLL.PersonManager().GetPersonCount().ToString();

}

}

}

4.Handler中的内容:

view plain
copy to clipboard
print
?

<%@ WebHandler Language=
"C#"
Class=
"PagerHandler"
%>

using
System;

using
System.Web;

using
System.Collections.Generic;

using
System.Text;

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;

}

int
count;

List<PagerTestModels.Person> list = new
PagerTestBLL.PersonManager().GetAllPerson(size, pageIndex,
""
,
out
count);

StringBuilder sb = new
StringBuilder();

foreach
(PagerTestModels.Person p
in
list)

{

sb.Append("<tr><td>"
);

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

sb.Append("</td><td>"
);

sb.Append(p.Name);

sb.Append("</td></tr>"
);

}

str = sb.ToString();

context.Response.Write(str);

}

public

bool
IsReusable {

get
{

return

false
;

}

}

}

5.实现效果图:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: