纯手工打造 jquery + ajax 异步分页

　　摘要

分页我相信大家存储过程分页已经很熟悉了，ajax更是耳熟能详了，更别说我们的json，等等。

如果说您没用过这些东东的话，我相信看完这篇博文会对您有帮助的，，如果有任何问题不懂或者有bug没问题，欢迎随时联系我，

同时也欢迎高手多给点意见，我不建议在喷子中成长。

 

 

 

 

<script type="text/javascript">

    $(function () {       //首次加载，初始化
        $.ajax({
            url: "/CommentCount",
            data: {"ICID":@ViewBag.id},
            type: "post",
            dataType: "json",
            success: function (data) {
                //alert(data);
                var total = data;
                PageClick(1, total,9);
            }
        });

       

        PageClick = function(pageIndex, total, spanInterval) {                //主要的分页函数：

            $.ajax({
                url: "/CommentPage",
                data: { "page": pageIndex,"ICID":@ViewBag.id },
                type: "post",
                dataType: "json",
                success: function (data) {
                    var comment = $("#comment");
                    comment.empty();
                    var html ="";
                    for (var i = 0; i < data.length; i++) {

                        html += "<div><span  style='color:#CD6600; font-size:14px;'>"+data[i].Email+"</span>";
                        html += "<span style='color:gray; font-size:11px; margin-left:10px'>" + data[i].CommentTime + "</span><br>";
                        html += "<span>" +data[i].Comment + "</span><hr/></div>";

                    }
                    comment.append(html);

                    //将当前页索引转为int类型
                    var intPageIndex = parseInt(pageIndex);

                    //创建分页
                    //将总记录数结果 得到 总页码数
                    var pageS = total
                    if (pageS % 10 == 0) pageS = pageS / 10;
                    else pageS = parseInt(total / 10) + 1;
                    var $pager = $("#pager");

                    //清楚分页div中的内容
                    $("#pager span").remove();
                    $("#pager a").remove();

                  

                    //设置分页的格式  这里可以根据需求完成自己想要的结果
                    var interval = parseInt(spanInterval); //设置间隔
                    var start = pageIndex - 4;//表示起始位置.
                    if (start <= 1)
                    {
                        start = 1;
                    }
                    var end = start + interval;//表示终止位置.
                    if (end > pageS)
                    {
                        end = pageS;
                        start = end - interval <= 0 ? 1 : end - interval;//重新确定起始位置。
                    }

                    //添加上一页
                    if(total!=0)
                    {
                        if (intPageIndex == 1)
                            $pager.append("<span class='disabled'><</span>");
                        else {
                            var pre = $("<a href='javascript:void(0)' pre='" + (intPageIndex - 1) + "'><</a>").click(function () {
                                PageClick($(this).attr('pre'), total, spanInterval);
                                return false;
                            });
                            $pager.append(pre);
                        }
                    }

                    //生成页码
                    for (var j = start; j <= end; j++) {
                        if (j == intPageIndex) {
                            var spanSelectd = $("<span class='current'>" + j + "</span>");
                            $pager.append(spanSelectd);
                        } //if
                        else {
                            var a = $("<a href='javascript:void(0)'>" + j + "</a>").click(function () {
                                PageClick($(this).text(), total, spanInterval);
                                return false;
                            });
                            $pager.append(a);
                        } //else
                    } //for

                   
                    //下一页
                    if(total!=0)
                    {
                        if (intPageIndex == pageS) {
                            $pager.append("<span class='disabled'>></span>");

                        }
                        else {

                            var next = $("<a href='javascript:void(0)' next='" + (intPageIndex + 1) + "'>></a>").click(function () {
                                PageClick($(this).attr("next"), total, spanInterval);
                                return false;
                            });
                            $pager.append(next);
                        }
                    }

                   // $pager.append("&nbsp;&nbsp;<span>total :"+total+" item</span>");
                  

                }
            });

        }

    });

</script>

 

 

 

示例,文章评论，异步提交无刷新分页评论：

 

页面html。

 <div id="comment"  >
      
    </div>

    <div id="pager" class="yahoo2">

    </div>

    <div style="border:1px solid #CD6600; padding:10px 10px 10px 10px">
<form action="/Comment" method="post" id="frmLogin">
        @Html.ValidationSummary(true)
        <table class="stufindpsw_step3" >
         
            @if(LoginUser == null)
            {
             <tr>
                <th>Email
                </th>
                <td>
                    <input type="text" name="Email" id="Email" />*
                </td>
                 <td></td>
            </tr>
            }
            <tr>
                <th>Code
                </th>
                <td>
                  <input type="text" name="Code" id="Code" />* <img id="ckcode" src="@Url.Content("~/CheckCode")" /> <td></td>

                </td>
                
                   

                
               
            </tr>
              <tr>
                <th>Comment
                </th>
                <td>
                    <textarea name="Comment" id="Comment" style="height:100px; width:400px" ></textarea>

                </td>
                   <td></td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="hidden" name="ICID" value="@ViewBag.id" />
                    <input type="submit" value="Comment"  id="btn-login-margin0" /> <span style="color:red" id="error"></span><span style="font-weight:bold; color:#008B00; width:100px; padding-left:20px" id="errormsg"></span>
                    <div style="text-align:center">
                    <img src="/Images/loading_s.gif" id="imgLoading" style="display: none;" />
                    </div>
                   
                   
                  
                    <div class="clear"></div>
                </td>
            </tr>
        </table>
    </form>
        </div>

 

 

异步成功返回处理代码；

 

 $frmLogin.ajaxForm({
        beforeSubmit: function () {
            var validResult = $frmLogin.valid();
            if (validResult) { loading.begin(); }
            return validResult;
        },
        success: function (data) {
            loading.end();
            if (data) {
                data = eval("(" + data + ")");
            }
            if (!data.success) {
              
                //   alert(" Invalid email address or password, please try again.");
                $("#error").text("please try again.");
                $("#ckcode").attr("src", "/CheckCode?time=@DateTime.Now");
            } else {

                var indexpage = 1;
                if ($("#pager .current").length > 0)
                {
                    indexpage = $("#pager .current").text();
                }
              
                PageClick(indexpage,data.total, 9);   //调用分页函数

              

                $("#errormsg").html("success！").hide(5000);//
                $("#Email").val("");
                $("#Code").val("");
                $("#Comment").val("");
                $("#ckcode").attr("src", "/CheckCode?time=@DateTime.Now");
               // window.location.href = data.url;
            }
        }
    });

 

 

终于，大功告成，不容易啊！有几个地方忘记给注释说明了，大家可能不理解。

PageClick(1, total, 3); 这个函数，第一个参数是当前页码，第一调用为第一页，这个不用管，total：表示总记录数,第三个参数表示：页码的总长度。

OK,今天到此为止。

 

 

效果图：