摘要
分页我相信大家存储过程分页已经很熟悉了,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(" <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,今天到此为止。
效果图: