采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果
1.插件参数列表
http://www.dtan.so
2.页面内容:
- <%@ 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);
-
-
- $("#Pagination").pagination(<%=pageCount %>, {
- 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: ‘Handler/PagerHandler.ashx‘,
- data: "pageIndex=" + (pageIndex + 1) + "&pageSize=" + pageSize,
- success: function(data) {
- $("#Result tr:gt(0)").remove();
- $("#Result").append(data);
- }
- });
- }
-
- });
-
- </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.页面后台内容:
- 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中的内容:
- <%@ 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.实现效果图:
6.源码下载地址
http://download.csdn.net/source/2959451
本文转自:http://blog.csdn.net/porschev/article/details/6114997