Jquery異步分頁控件
來源：程序員人生 發布時間：2015-09-02 07:56:26 閱讀次數：7089次
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類庫
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
