基于Jquery的Ajax分页，只有上一页和下一页
最近项目中用到ajax分页
在网上找到一个非常好用的分页插件jquery-pagination-ajax，以下是链接
http://www.cnblogs.com/linzheng/archive/2010/11/07/1871069.html
但是无奈，不太适合项目。看了jquery-pagination，大体明白了其原理，所以，自己写你一个很简单的
分页功能，算是完成任务，如图
个人认为ajax分页和普通的分页，核心原理是大致相同的。
我是用了一个隐藏域来存储当前页面的索引。
贴一下主要的前台代码吧 ，有点乱
<body>
<form id="form1" runat="server">
<input type="hidden" id="hdPageCount_1" value="<%=pageCount %>">" /><!--总页数-->
<input type="hidden" id="hdCurrentPageCount_1" value="1" /><!--当前页数-->
<div id="Main-right-marriage">
<div class="next" style="top: 155px; left: 221px;">
<a href="javascript:void(0)" id="btn_prev"><img src="data:image/prev.png" /></a>
</div>
<div class="photo_wall-top">
<div class="left"> <span class="show_big_img"></span></div>
<div class="right"> </div><!-- to right-->
</div><!-- to photo_wall-top-->
<div class="next" style="top:155px; right: 8px;">
<a href="javascript:void(0)" id="btn_next"><img src="data:image/next.png" /></a>
</div>
</div>
</form>
</body>
JS部分的代码
<script type="text/javascript">
$(function () { /*鼠标悬浮效果*/
$(".box a img").mouseover(function () {
var $div = $(this).parent().parent().parent().parent().find(".left");
var $bigImg = $div.find(".bigImg"); $bigImg.attr("src", $(this).attr("src"));
});
//ajax 无效果 bug修改
$(".box a img").live("mouseover", function () { var $div = $(this).parent().parent().parent().parent().find(".left");
var $bigImg = $div.find(".bigImg"); $bigImg.attr("src", $(this).attr("src"));
}); ajax.ProductList(("#btn_next"), 1, 4); //第一次请求初始化 // 分頁效果
var pageSize = 4; //每页显示条数初始化，修改显示条数，修改这里即可
var pageCount_QH = parseInt($("#hdPageCount_1").val()); $("#btn_next").click(function () {
var currentPageIndex = parseInt($("#hdCurrentPageCount_1").val());
if (currentPageIndex * pageSize > pageCount_QH) {
return false;
} else {
$("#hdCurrentPageCount_1").val(currentPageIndex + 1);
ajax.ProductList(this, $("#hdCurrentPageCount_1").val(), pageSize, 1);
}
});
$("#btn_prev").click(function () {
var currentPageIndex = $("#hdCurrentPageCount_1").val(); if (currentPageIndex > 1) {
ajax.ProductList(this, currentPageIndex - 1, pageSize, 1);
$("#hdCurrentPageCount_1").val(currentPageIndex - 1);
}
else {
return false;
}
});
});
</script>
Ashx后台代码：
/// <summary>
/// 获取产品
/// </summary>
public void GetProduct()
{
HttpContext context = HttpContext.Current;
int pageIndex = Convert.ToInt32(context.Request.Form["_pageIndex"]);//页面索引
int pageSize = Convert.ToInt32(context.Request.Form["_pageSize"]);//显示条数
int count = ;
List<PagerTestModels.Product> list = new PagerTestBLL.ProductManager().GetAllProduct(pageSize, pageIndex, "", out count); if (list.Count == )
return; StringBuilder sbFirst = new StringBuilder();//获取第一个大图
StringBuilder sbAll = new StringBuilder();//获取是个小图 foreach (var item in list)
{
if (sbFirst.Length == )
{
sbFirst.AppendFormat("<a href=\"#\" class=\"bigImg_link\" ><img class=\"bigImg\" src=\"{0}\" height=\"260\" width=\"260\" /><br/><span class=\"title bigImg_title\"></span></a>", item.Thumb);
}
sbAll.AppendFormat("<div class=\"box\"><a href=\"{2}\" ref=\"#\"><img src=\"{0}\" height=\"124\" width=\"124\" alt=\"{1}\" /></a></div>", item.Thumb, item.Title, item.PID);
}
Dictionary<string, string> dic = new Dictionary<string, string>();
dic.Add("oneproduct", sbFirst.ToString());
dic.Add("allproduct", sbAll.ToString()); string str = GetJson(dic); HttpContext.Current.Response.ContentType = "plain/text";
HttpContext.Current.Response.Write(str);
HttpContext.Current.Response.Flush();
HttpContext.Current.Response.End(); } /// <summary>
/// 字典转化为Json
/// </summary>
/// <param name="dic"></param>
/// <returns></returns>
private string GetJson(Dictionary<string, string> dic)
{
StringBuilder sb = new StringBuilder();
sb.Append("{"); foreach (KeyValuePair<string, string> item in dic)
{
//反義引號 sb.AppendFormat("\"{0}\":\"{1}\",", item.Key, item.Value.Replace("\"", "\\\""));
} //刪除最尾一個逗號 string valRtn = Regex.Replace(sb.ToString(), @",$", "}");//替换最后的，号为}号
return valRtn;
}
基于Jquery的Ajax分页，只有上一页和下一页的更多相关文章
- 源码来袭！！！基于jquery的ajax分页插件（demo+源码）
前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客 ...
- 基于jQuery的ajax对WebApi和OData的封装
基于jQuery的ajax对WebApi和OData的封装 WebApi 的使用带来了一个显著的特点,对type有一定的要求.一般ajax的type无非就是两种,GET和POST.如果用JSONP来跨 ...
- jQuery Pagination Ajax分页插件中文详解（摘）
jQuery Pagination Ajax分页插件中文详解 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxin ...
- 基于jQuery封装的分页组件
前言: 由于项目需要实现分页效果,上jQuery插件库找了下,但是木有找到自己想要的效果,于是自己封装了个分页组件. 思路: 主要是初始化时基于原型建立的分页模板然后绑定动态事件并实现刷新DOM的分页 ...
- 浅谈jQuery Pagination Ajax 分页插件的使用
插件介绍 此插件是jQuery的ajax分页插件.分页切换时无刷新也无延迟,因为是一次性加载的.如果你用到此插件作分页的时候,涉及到的数据量大,建议不要使用此插件,因为加载慢会导致用户体验不好! 插件 ...
- 基于 Django的Ajax实现 文件上传
---------------------------------------------------------------遇到困难的时候,勇敢一点,找同学朋友帮忙,找导师求助. Ajax Ajax ...
- jQuery、Ajax分页
1.效果预览 2.HTML代码 <div class="row"> <div class="col-lg-12 col-sm-12 col-xs-12 ...
- Python Django 之 基于JQUERY的AJAX 登录页面
一.基于Jquery的Ajax的实现 1.url 2.vews 3.templates
- 分页-jquery.page.js插件在使用时重复触发“上一页”和“下一页”操作
HTML代码 <!-- <div class="zxf_pagediv" id="Pagination" style="display:b ...
随机推荐
- rpm安装软件(需管理员权限)
常用命名规范 linux-1.2.0-30.e16.i686.rpm rpm基本命令 安装rpm -i software.rpm 卸载rpm -e software 升级rpm -U software ...
- Linux学习之十五、基础正规表示法\延伸正规表示法
原文地址: http://vbird.dic.ksu.edu.tw/linux_basic/0330regularex_2.php 基础正规表示法 既然正规表示法是处理字串的一种表示方式,那么对字节排 ...
- php解决与处理网站高并发 大流量访问的方法
方法/步骤 首先,确认服务器硬件是否足够支持当前的流量 普通的P4服务器一般最多能支持每天10万独立IP,如果访问量比这个还要大, 那么必须首先配置一台更高性能的专用服务器才能解决问题 ,否则怎么 ...
- 2015-01-15百度地图API 新海量点
整理一下昨天写的百度地图 项目最开始写了一个百度地图,但是速度那慢的简直了 所以昨天将百度地图API的海量点 写了一下 1秒啊 o.o 厉害 OK 记下 此乃需要的js <!--添加百度地图- ...
- C#中使用日志类，添加dll时出现错误
警告 1 未能解析引用的程序集 “log4net, Version=1.2.10.0, Culture=neutral, PublicKeyToken=1b44e1d426115821, proces ...
- OCP prepare 20140701
1. rman的完全备份,和不完全备份 Oracle 数据库可以实现数据库不完全恢复与完全恢复.完全恢复是将数据库恢复到最新时刻,也就是无损恢复,保证数据库无丢失的恢复.而不完全恢复则是根据需要特意将 ...
- 详解VB.net编写DLL(动态链接库、应用程序扩展)文件
首先,我们启动VS(Visual-Studio简称),我使用的是VS2008版本. 新建一个项目-选择内裤(额...不好意思)→类库 ,名称就默认吧. 编写类库没有窗体设计,因此我们不能使用工具箱中的 ...
- SVN导出增量包的方法
此方法是在svn1.7版本基础上进行的操作,其他版本没有验证 第一步.点击右键,选择“TortoiseSVN–> Show log”. 进入日志页面,如下图所示: 第二步.选择版本区间,右键选择 ...
- dp状态压缩-铺砖问题
题目:有一个n行m列的地板,需要用 1*2小砖铺盖,小砖之间互相不能重叠,问有多少种不同的铺法? 示范: 解法:用F[i][j]存放第i行的第j状态(j为十进制,转为二进制即是状态)有多少种方案. 用 ...
- EC读书笔记系列之17：条款41、42、43、44、45、46
条款41 了解隐式接口与编译器多态 记住: ★classes和templates都支持接口和多态 ★对classes而言接口是显式的(explicit),以函数签名为中心.多态则是通过virtual函 ...