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.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异步分页控件

标签：

原文地址：http://blog.csdn.net/hutao1101175783/article/details/45368273