基于Jquery的Ajax分页,只有上一页和下一页

最近项目中用到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,大体明白了其原理,所以,自己写你一个很简单的

分页功能,算是完成任务,如图

基于Jquery的Ajax分页,只有上一页和下一页_第1张图片

 

个人认为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="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="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>
View Code

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 = 0;
        List<PagerTestModels.Product> list = new PagerTestBLL.ProductManager().GetAllProduct(pageSize, pageIndex, "", out count);

        if (list.Count == 0)
            return;

        StringBuilder sbFirst = new StringBuilder();//获取第一个大图
        StringBuilder sbAll = new StringBuilder();//获取是个小图

        foreach (var item in list)
        {
            if (sbFirst.Length == 0)
            {
                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;
    }
View Code

 

 

源代码下载

 

 

 

 

你可能感兴趣的:(jquery)