无刷新分页 jquery.pagination.js
采用Jquery无刷新分页插件jquery.pagination.js实现无刷新分页效果
1.插件参数列表
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); //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.页面后台内容:
- 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.源码下载地址
无刷新分页 jquery.pagination.js的更多相关文章
- [转]jquery.pagination.js分页
本文转自:http://www.cnblogs.com/knowledgesea/archive/2013/01/03/2841554.html 序言 这一款js分页使用起来很爽,自己经常用,做项目时 ...
- Spring+Mybatis+jQuery.Pagination.js异步分页及JsonConfig的使用
在开发工作中经常用到异步分页,这里简单整理一下资料. 一.Controller方法 package com.lwj.controller; import javax.servlet.http.Http ...
- ajax分页2:jquery.pagination +JSON 动态无刷新分页
静态页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- jquery+jquery.pagination+php+ajax 无刷新分页
<!DOCTYPE html> <html ><head><meta http-equiv="Content-Type" content= ...
- jquery.pagination +JSON 动态无刷新分页
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SqlPage.aspx.cs& ...
- jquery+ajax(用ajax.dll)实现无刷新分页
利用ajax.dll那种方式的无刷新,在这就不说了,新朋友可以看下我的另一片文件http://www.cnblogs.com/dachuang/p/3654632.html 首先,这里用的是jquer ...
- ajax分页实现,jquery.pagination.js
1.前台使用ajax无刷新分页,主要需要生成分页的工具条,这里使用的是jquery.pagination.js 插件参数可以参考----张龙豪-jquery.pagination.js分页 下面贴出代 ...
- js jquery.pagination.js分页
1.使用插件为 jquery.pagination.js ,如果没有这个js文件的话,我可以给发个. 首先引用 jquery.pagination.js (分页js),跟pagination.css( ...
- jquery ajax php+mysql 无刷新分页 详细实例
最近在接触jquery和ajax,当前项目也会用到分页,为了用户体验更好一些,就准备用无刷新分页,这个demo很适合新手学习查看,写的比较清晰,话不多说,直接上代码吧. 首先是html页面,index ...
随机推荐
- Oracle 动态视图2 V$LOCKED_OBJECT
v$locked_object视图列出当前系统中哪些对象正被锁定 Column Datatype Description XIDUSN NUMBER 回滚段号 XIDSLOT NUMBER 槽号 XI ...
- flex 监听网络连接情况
NativeApplication.nativeApplication.addEventListener(Event.NETWORK_CHANGE, onNetworkChange); private ...
- [转]system函数返回值探究
对于system这个函数的功能早就有一定了解,读书期间,就学习了UNIX系统编程这本书,后来买了APUE.我这个人总是有好读书不求甚解的毛病.对于system函数只知其一,不知其二.后来被人问起相关的 ...
- ORA-1653: unable to extend table SYS.AUD$
今早运维组的同事反映有个系统功能很多地方都报错,怀疑是不是数据库有什么问题.于是登录数据库检查,通过crsctl status res -t检查,发现所有集群资源都是OK的,没有哪个资源挂掉了.于是到 ...
- 折腾了好久的macos+apache+php+phpmyadmin 终于成功了!
由于最近需要布置mantis用来进行bug追踪,在此记录其过程. 由于PHP apache环境在Mac OS上是自带的,所以不需要另处下安装包,只需要简单配置一下即可. 首先打开终端输入命令: sud ...
- .NET基础之--C#中判断空字符串的3种方法性能分析
那么为什么if(a.Length==0)最快呢?因为整数判断等于最快,没有经过实例化等复杂的过程. 所以:建议大家判断字符串是否为空用 if(a.Length==0). 对于三种方法的评价: 1.if ...
- 活动图 Activity Diagram
活动图 可通过一系列操作将业务流程或软件进程以工作流的形式显示出来.这些操作可以由人.软件组件或计算机来执行. 使用活动图可以描述多种类型的流程,如下: 1.用户和您的系统之间的业务流程或工作流. 2 ...
- iOS 计算 日期 距离 当前 系统的日期 相差 多少
#pragma mark - 时间计算函数 - (NSTimeInterval)intervalSinceNow:(NSString *) theDate { NSDateFormatter * da ...
- 【POJ】【3537】Crosses and Crosses
博弈论 相当于放了x的位置,左右4格都不能再放x了,谁无处可放就输. n<=2000 直接枚举后继状态,暴力求SG函数即可. 例: 0000000->x..0000 / .x..000 / ...
- ajax与jsonp的区别
ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本.