- 浏览: 128954 次
- 性别:
- 来自: 安徽
文章分类
插件参数列表
2.页面内容:
3.页面后台内容:
4.Handler中的内容:
5.实现效果图:
6.源码下载地址
http://download.csdn.net/source/2959451
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.源码下载地址
http://download.csdn.net/source/2959451
发表评论
-
jquery 限制文本框只能输入数字
2012-09-19 11:22 1230原文引自:http://lvhjean.blog.163.co ... -
jQuery Datepicker 日期选择插件
2011-07-04 17:21 3871在Web开发中,总会遇到 ... -
jQuery性能优化
2011-07-01 13:33 1020本文摘自:开源中国社 ... -
Center an element on the screen
2011-06-23 17:22 676$(document).ready(function() { ... -
用jQuery实现的一个分页工具栏
2011-06-02 14:42 1318先看下效果图: 这是第一次写博文,是关于学习jQuery完 ... -
分享9个实用的jQuery倒计时插件
2011-05-23 13:05 1009jQuery在现在的Web开发项目中扮演着重要角色,jQu ... -
jquery获取父窗口的元素
2011-05-19 13:18 2405$("#父窗口元素ID",window ... -
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2011-05-18 18:05 1524因为浏览器的兼容问题,如果使用javascript获取这些数值 ... -
流行的jQuery信息提示插件(jQuery Tooltip Plugin)
2011-05-18 13:10 1325流行的jQuery信息提示插件(jQuery Toolti ... -
JQuery 浮动DIV显示提示信息并自动隐藏
2011-05-18 13:09 2428function showTips( tips, height ... -
jQuery技巧
2011-05-07 09:17 7571、关于页面元素的引用 通过jquery的$()引用元素包括通 ... -
$的选择器部分
2011-05-07 09:10 687凡是运用$,其返回值是 ... -
JQuery--clientX, clientY,offsetX, offsetY的区别
2011-05-06 12:23 1673Html中定位是非常重要的,否则再好的东西不能在它应该在的地方 ... -
Jquery UI dialog 详解
2011-05-06 11:57 12921 属性 1.11 autoOpen ,这个属性为true的 ... -
jQuery获取text,areatext,radio,checkbox,select值
2011-05-06 11:49 872jquery radio取值,checkbox取值,selec ...
相关推荐
这个是使用jquery.pagination.js实现分页的三种实例,包括使用jquery.pagination.js实现简单的分页,使用ajax实现无刷新分页,还有设置分页属性就行分页。。。
采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果 页面内容: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"%> <!DOCTYPE ...
此源码使用了Jquery.Pagination.js+Jquery.Ajax+Asp.net技术实现了无刷新分页的效果。其中用到的Asp.net知识有Linq to sql和ashx技术。分页插件可以自定义样式,自定义的样式在pagenumstyle.css文件中。项目使用vs...
Asp.Net无刷新分页,采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果。
Jquery.Pagination.js + Jquery.Ajax + ASP.NET----无刷新分页Pagination 1.5.1,是在原作者基础上修改的,因为Pagination 1.5.1与它的低版本有很大的区别,所以在此实例中增加了新版的使用方法
Jquery 无刷新分页 jquery.pagination.js 带数据库 提交Handler请求数据 AJAX
主要介绍了jquery分页插件jquery.pagination.js实现无刷新分页的相关资料,需要的朋友可以参考下
首先引用 jquery.pagination.js (分页js),跟pagination.css(分页样式css)。 2.页面js代码为 代码如下: [removed] var pageIndex = 0; //页面索引初始值 var pageSize = 15; //每页显示条数初始化,修改显示条...
其核心代码jquery.pagination.js已随示例打包,Demo中包括了5种不同的分页效果演示,全部是Ajax无刷新方式实现分页,对于搞前端开发的朋友来说,这是个值得收藏的代码特效,为以后实现无刷新分页提供方便。...
采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果 友情提示:本示例Handler中采用StringBuilder的append方法追加HTML,小数据量可以,但是大数据或是布局常变,建议返回JSON格式的数据,性能和灵活...
jquery.pagination.js插件,此jQuery插件为Ajax分页插件,一次性加载全部数据,故分页切换时无刷新与延迟,只是重写指定dom元素中的html内容,如果数据量较大不建议用此方法,因为加载会比较慢; jQuery的多数插件...
jquery.pagination.js无刷新分页
asp.net中利用Jquery+Ajax+Json实现无刷新分页 ,完整示例,带样式,很有参考价值,利用jquery.pagination.js分页
1、前台使用ajax无刷新分页,主要需要生成分页的工具条,这里使用的是jquery.pagination.js 插件参数可以参考—-张龙豪-jquery.pagination.js分页 下面贴出代码 /** * This jQuery plugin displays pagination ...
主要介绍了jQuery+Ajax实现无刷新分页,本文使用的生成分页的工具条是jquery.pagination.js,感兴趣的小伙伴们可以参考一下
首先,我们要准备的文件有jquery.js,jquery.pagination.js,pagination.css,还有一个就是经常用的table布局的css文件。这些文件都会在后面的文件中包含。