Jquery异步分页控件

来源：互联网发布：js时间戳转换成日期编辑：程序博客网时间：2024/04/30 15:23

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类库

0 0