Jquery异步分页控件
来源：程序员人生 发布时间：2015-09-02 07:56:26 阅读次数：5803次
ascx控件：
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Pager.ascx.cs" Inherits="com.eshop.www.Web.controls.Pager" %>
<script src="/script/pagination/Pager.js" type="text/javascript"></script>
<div class="paginator-wrap">
<div class="paginator">
<ul class="ul-wrap">
<li id="first" class="btn btn-m">
<a style="cursor:pointer;">
首页
</a>
</li>
<li id="pre" class="btn btn-m">
<a style="cursor:pointer;">
上1页
</a>
</li>
<li class="btn btn-m">
<a id="next" style="cursor:pointer;">
下1页
</a>
</li>
<li class="btn btn-m">
<a id="end" style="cursor:pointer;">
尾页
</a>
</li>
页次：<em id="cp">1</em>/<em id="ye">0</em>页
共<em id="mc">0</em>条记录
<%--<li class="goto">到第</span><input type="text"><span class="words">页</span></li>--%>
<li class="submit"> <input type="submit" value="肯定"></li>
</ul>
</div>
</div>
Jquery插件：
jQuery.fn.pager = function (recordCount, opts) {
opts = jQuery.extend({
pageSize: 10,
num_display_entries: 10,
current_page: 1,
num_edge_entries: 0,
link_to: "#",
prev_text: "Prev",
next_text: "Next",
ellipse_text: "...",
prev_show_always: true,
next_show_always: true,
callback: function () { return false; }
}, opts || {});
var pageNum = 0;
function numPages() {
return Math.ceil(recordCount / opts.pageSize);
}
//对象初始化
function Init() {
pageNum = numPages();
//当前页数
$("#cp").text(opts.current_page);
//总页数
$("#ye").text(pageNum);
//数据总条数
$("#mc").text(recordCount);
//前1页
$("#pre").click(function () {
PrevPage();
})
//下1页
$("#next").click(function () {
NextPage();
})
//首页
$("#first").click(function () {
FirstPage();
})
//尾页
$("#end").click(function () {
EndPage();
})
//显示第1页
opts.callback(0, opts.pageSize);
}
//首页
function FirstPage() {
if (opts.current_page > 1) {
opts.current_page = 1;
$("#cp").text(opts.current_page);
//调用数据绑定方法
opts.callback(opts.current_page - 1, opts.pageSize);
}
}
//下1页
function NextPage() {
if (opts.current_page != pageNum) {
opts.current_page += 1;
$("#cp").text(opts.current_page);
//调用数据绑定方法
opts.callback(opts.current_page - 1, opts.pageSize);
}
}
//前1页
function PrevPage() {
var currentpage = parseInt($("#PageIndex").val());
if (opts.current_page > 1) {
opts.current_page -= 1;
$("#cp").text(opts.current_page - 1);
//调用数据绑定方法
opts.callback(opts.current_page - 1, opts.pageSize);
}
}
//尾页
function EndPage() {
if (opts.current_page != pageNum) {
opts.current_page = pageNum;
$("#cp").text(opts.current_page);
//调用数据绑定方法
opts.callback(opts.current_page - 1, opts.pageSize);
}
}
Init();
}
页面调用示例：
<script>
$(function () {
//第1个参数 数据总条数
$(".paginator").pager(<%=RecordCount %>, {
pageSize: 5,
current_page: 1,
prev_text: "Prev",
next_text: "Next",
callback: QueryCommentInfo
});
})
function QueryCommentInfo(pageIndex, pageSize) {
$("#CommentInfo").html("<tr style=" margin-top:200px;"><td colspan="4"><img src="http://<%=com.eshop.www.Tools.StringHelper.SreverUrl %>/ds_shangcheng_pc/images/load.gif" /></div>正在加载，请稍后。。。</td></tr>");
$.post("/ajaxTodo/MemberComment.aspx", { Func: "QueryCommentInfo", pageIndex: pageIndex, pageSize: pageSize }, function (data) {
if (data.toString() != "") {
var jsonStr = data.toString().split("]")[0] + "]";
var dataStr = data.toString().split("]")[1];
var ary = $.parseJSON(jsonStr);
var conStr = "";
$(ary).each(function () {
var tr = "<tr><td class="star"><div class="icon-" + (",0,1,".indexOf("," + this.score + ",") >= 0 ? "badstar" : "goodstar") + ""></div></td><td class="comment"><div class="item">" + this.content + "</div></td><td class="date"><p class="date">" + this.create_date.split(" ")[0] + "</p><p class="time">" + this.create_date.split(" ")[1] + "</p></td><td class="info"> <a href="/retail/ProductShow.aspx?productcode=" + this.product_code + "">" + this.product_name + "</a> <p class="price"><span class="count">" + this.product_price + "</span>元</p></td></tr>";
conStr += tr;
})
$("#CommentInfo").html(conStr);
}
})
}
</script>
注意：要援用Jquery类库
生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
