Jquery非同步分頁控制項__Jquery

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;">上一頁</a></li><li class="btn btn-m"><a id="next" style="cursor:pointer;">下一頁</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);        //前一頁        $("#pre").click(function () {            PrevPage();        })        //下一頁        $("#next").click(function () {            NextPage();        })        //首頁        $("#first").click(function () {            FirstPage();        })        //尾頁        $("#end").click(function () {            EndPage();        })        //顯示第一頁        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);        }    }    //下一頁    function NextPage() {        if (opts.current_page != pageNum) {            opts.current_page += 1;            $("#cp").text(opts.current_page);            //調用資料繫結方法            opts.callback(opts.current_page - 1, opts.pageSize);        }    }    //前一頁    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 () {            //第一個參數 資料總條數            $(".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類庫