最近项目中用到ajax分页

在网上找到一个非常好用的分页插件jquery-pagination-ajax，以下是链接

http://www.zhangxinxu.com/wordpress/2010/01/jquery-pagination-ajax%E5%88%86%E9%A1%B5%E6%8F%92%E4%BB%B6%E4%B8%AD%E6%96%87%E8%AF%A6%E8%A7%A3/

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分页，只有上一页和下一页的更多相关文章

  1. 源码来袭！！！基于jquery的ajax分页插件（demo+源码）

    前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客 ...

  2. 基于jQuery的ajax对WebApi和OData的封装

    基于jQuery的ajax对WebApi和OData的封装 WebApi 的使用带来了一个显著的特点,对type有一定的要求.一般ajax的type无非就是两种,GET和POST.如果用JSONP来跨 ...

  3. jQuery Pagination Ajax分页插件中文详解（摘）

    jQuery Pagination Ajax分页插件中文详解 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxin ...

  4. 基于jQuery封装的分页组件

    前言: 由于项目需要实现分页效果,上jQuery插件库找了下,但是木有找到自己想要的效果,于是自己封装了个分页组件. 思路: 主要是初始化时基于原型建立的分页模板然后绑定动态事件并实现刷新DOM的分页 ...

  5. 浅谈jQuery Pagination Ajax 分页插件的使用

    插件介绍 此插件是jQuery的ajax分页插件.分页切换时无刷新也无延迟,因为是一次性加载的.如果你用到此插件作分页的时候,涉及到的数据量大,建议不要使用此插件,因为加载慢会导致用户体验不好! 插件 ...

  6. 基于 Django的Ajax实现 文件上传

    ---------------------------------------------------------------遇到困难的时候,勇敢一点,找同学朋友帮忙,找导师求助. Ajax Ajax ...

  7. jQuery、Ajax分页

    1.效果预览 2.HTML代码 <div class="row"> <div class="col-lg-12 col-sm-12 col-xs-12 ...

  8. Python Django 之 基于JQUERY的AJAX 登录页面

    一.基于Jquery的Ajax的实现 1.url 2.vews 3.templates

  9. 分页-jquery.page.js插件在使用时重复触发“上一页”和“下一页”操作

    HTML代码 <!-- <div class="zxf_pagediv" id="Pagination" style="display:b ...

随机推荐

  1. discuz方法赏析

    public static function limit($start, $limit = 0) { $limit = intval($limit > 0 ? $limit : 0); $sta ...

  2. Windows下使用XManager访问Ubuntu 11.04的设置方法

    1.Download the attached file and upload it to the server. And, enter the following command to update ...

  3. php的引用

    <?php $var1 = 1; $var2 = 2; function foo(){ global $var1,$var2; $var2 = &$var1; } function te ...

  4. HDU 1134 卡特兰数 大数乘法除法

    Problem Description This is a small but ancient game. You are supposed to write down the numbers 1, ...

  5. ubuntu系统下设置静态IP

    改动 /etc/network/interfaces文件 加入下面内容 # The loopback network interface auto lo eth0 iface lo inet loop ...

  6. Android读写JSON格式的数据之JsonWriter和JsonReader

    近期的好几个月都没有搞Android编程了,逐渐的都忘却了一些东西.近期打算找一份Android的工作,要继续拾起曾经的东西.公司月初搬家之后就一直没有网络,直到今日公司才有网络接入,各部门才開始办公 ...

  7. 利用freopen()函数和fc命令简化程序调试

    大家在参加ACM比赛或者参加c/c++实验技能竞赛的时候,如果遇到大量的输入和大量的输出时,调试起来很不方便.一来如果结果不正确的话,需要重复输入大量数据:二来如果大量输出的话,得仔细检查输出结果与正 ...

  8. 初识Devexpress ChartControl 之 动态添加stepline及TextAnnotation

    最近在用devexpress 第三方软件做项目. devexpress 的控件使用简单.功能强大.类型丰富.界面优美.扩展性强.今天主要是动态生成了一条StepLine.生成后的效果(能力不强,所以做 ...

  9. 在vs2010中编译log4cxx-0.10.0详细方法

    本文一共包含了17个步骤,按照下面的步骤就可以完成vs2010中编译log4cxx的工作了. 1. 下载 log4cxx 以及 apr 和 apr-util 源码: a) http://www.apa ...

  10. js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码

    获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 代码如下: document.body.offsetWidth doc ...