基于asp.net的ajax分页

直接贴代码：
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JERRY-lala的幸福时刻</title>
    <style type="text/css">
body {
    background-image: url(http://bcs.duapp.com/jerryhutu/wed%2Fbg.jpg);
    background-repeat: no-repeat;
    background-position:top center;
    background-attachment:scroll;
    margin-top: 0px;
    margin-bottom: 0px;
    min-height:1684px;
    height:auto;
    _height:1684px;
    text-align:center;
}
a,a:hover {text-decoration:none;}
.content-box {width:710px; margin:75px auto 95px; position:relative;display:inline-block;}
.content {padding:0 18px 0 38px;background:#fff;height:85px;text-align:left;}
.title{height:58px;margin-top:20px;}
.title-con {}
.fl {float:left; height:60px;}
.fr{float:right}
.cf:after {content:"";clear:both;display:block;height:0;overflow:hidden}
.cf {zoom:1;}
.zi666 {color:#666;}
.zi333 {color:#333;}
.zi999 {color:#999;} 
.item {margin-top: 20px;}
.list {padding:11px 18px;height:55px;background:#F7F2FF;position:relative;font-size:14px;margin-bottom:10px;}
.list-img {width:50px;height:50px;}
.zi-name {color:#6600FF; font:bold;font-size:14px;}
.zi-con {color:#333;font-size:12px;}
.zi-name,.zi-con {padding-left:70px;}
.date {position:absolute;top:12px;right:18px;color:#999;font-size:12px;}
.lh24 {line-height:24px;}
.fs12 {font-size:12px;}
#ma {cursor:pointer;vertical-align:middle;}
#ma-clone {display:none;width:258px;height:258px;position:absolute;top:400px;left:50%;margin-left:-129px;}
/*-----------paginaton----------*/

/*-----------/paginaton----------*/
.pagination {
    text-align:center;
    font-family:arial;
}
.pagination .pg-list {
    vertical-align:top;
    display:inline-block;
    *display:inline;
    *zoom:1
}
.pagination .pg-list a {
    display:inline-block;
    *display:inline;
    *zoom:1;
    height:22px;
    line-height:22px;
    padding:0 9px;
    margin-right:4px;
    border-style:solid;
    border-width:1px;
    border-color:#CCC;
    color:#666
}
.pagination .pg-list a:hover {
    text-decoration:none;
    border-color:#6600FF
}
.pagination .pg-list a.prev,.pagination .pg-list a.next {
    padding:0 11px;
    background:#F4F4F4
}
.pagination .pg-list a.disabled {
    color:#ABABAB;
    cursor:default
}
.pagination .pg-list a.disabled:hover {
    border-color:#6600FF
}
.pagination .pg-list span {
    display:inline-block;
    *display:inline;
    *zoom:1;
    height:22px;
    line-height:22px;
    padding:0 9px;
    margin-right:4px;
    border-style:solid;
    border-width:1px;
    border-color:#6600FF;
    background:#6600FF;
    color:#FFF
}
.pagination .pg-skip {
    vertical-align:top;
    display:inline-block;
    *display:inline;
    *zoom:1
}
.pagination .pg-skip .num {
    width:40px;
    height:14px;
    padding:4px;
    border:1px solid #ccc;
    text-align:center
}
.pagination .pg-skip .btn {
    display:inline-block;
    *display:inline;
    *zoom:1;
    width:48px;
    border:0;
    height:24px;
    line-height:24px;
    background:#f60;
    color:#FFF;
    cursor:pointer;
    text-align:center
}
.pagination input {
    width:30px;
    height:21px;
    margin:0 8px;
    border:solid 1px #999;
    vertical-align:top;
    font-family:Arial,SimSun;
    text-align:center
}
.pagination i {
    vertical-align:middle;
    font-style:normal;
    display:inline-block;
    *display:inline;
    *zoom:1;
    height:24px;
    line-height:24px
}
.pagination button {
    border:0;
    background:#f60;
    color:#fff;
    width:51px;
    height:24px;
    vertical-align:top
}
.pagination form {
    display:inline-block;
    *display:inline;
    *zoom:1
}
</style>
    <script src='http://lib.sinaapp.com/js/jquery/1.8.2/jquery.min.js'></script>
</head>
<body>
    <div class="content-box">
        <img src="http://bcs.duapp.com/jerryhutu/wed%2Fbanner.jpg">
        <div class="content">
            <div class="title cf">
                <div class="fl title-con">
                    <img src='http://bcs.duapp.com/jerryhutu/wed%2Fshare.gif'>
                    <div class="lh24 fs14 zi666">
                        使用微博扫描右侧二维码，关注后发送内容即可留言</div>
                </div>
                <div class="fr">
                    <span class="fs12 zi666">点击放大&gt;&gt;</span>
                    <img src="http://bcs.duapp.com/jerryhutu/wed%2Fqrcode_258.jpg" width="58" height="58"
                        id="ma">
                </div>
            </div>
            <div class="item">
            </div>
            <div class="pagination">
                <p class="pg-list">
                    <a class="page disabled" href="">上一页</a> <span class="page-cur">1</span> <a href="">
                        2</a> <a href="">3</a> <a href="">4</a> <a href="">5</a> ... <a href="">11</a>
                    <a href="">12</a> <a href="" class="next">下一页</a>


                </p>
            </div>
            <!--    <div><img src="http://wxscreen-wxscreen.stor.sinaapp.com/20130803170547000000_1_40279_1031.png"></div>> -->
        </div>
    </div>
    <img src="http://bcs.duapp.com/jerryhutu/wed%2Fqrcode_258.jpg" width='258' height="258"
        id="ma-clone">
    <script>
        $("#ma").click(function (e) {
            e.stopPropagation();
            $("#ma-clone").show();
        });
        $(document).click(function () {

            $("#ma-clone").hide();
        });
    </script>
</body>
</html>
<script type="text/javascript">
    function paginator(obj, func, splitnum) {
        var page_count = obj.page_count;
        var page_no = obj.page_no;
        var page_size = obj.page_size;

        var num = splitnum * 2;
        var start = 1;
        var end = splitnum * 2;
        var prev = 1;
        var next = page_no + 1;
        if (page_no > page_count)
            page_no = page_count;
        if (page_no <= 0)
            page_no = 1;
        if (page_no > 1) {
            prev = page_no - 1;
        }
        if (next > page_count) {
            next = page_count;
        }

        if (page_count > 1) {
            if (end > page_count)
                end = page_count;

            if (page_no + splitnum <= page_count) {
                start = page_no - (splitnum - 1);
                end = page_no + splitnum;
            }
            else {
                start = page_count - (num - 1);
                end = page_count;
            }

        }
        if (start < 1) start = 1;
        end = end > page_count ? page_count : end;
        var html = '<a href="javascript:void(0);" class="prev" onclick="' + func.replace('{pageIndex}', prev + '') + ';">上一页</a>';
        for (i = start; i <= end; i++) {
            if (i == page_no) {
                html += '<span class="c">' + i + '</span>';
            }
            else
                html += '<a href="javascript:void(0)" onclick="' + func.replace('{pageIndex}', i + '') + ';">' + i + '</a>';

        }

        if (page_no == page_count) {
            html += '<a href="javascript:void(0)" class="next">下一页</a>';
        } else {
            html += '<a href="javascript:void(0)" class="next"  onclick="' + func.replace('{pageIndex}', next + '') + ';">下一页</a>';
        }
        return html;
    }
    //每页显示的数据行数
    var pagesize = 3;
    var json = { "page_count": 0, "page_no": 1, "page_size": pagesize };

    function GetPation(pageindex) {
        //ajax请求数据
        var dataBind = "";
        $.ajax({
            url: 'UserMessages.aspx',
            type: 'GET',
            data: 'pageSize=' + pagesize + '&pageIndex=' + pageindex,
            dataType: 'json',
            timeout: 60000,
            error: function () { },
            success: function (data) {
                $.each(data.result, function (key, val) {
                    dataBind += '<div class="list"><img src="' + val.Uimg + '" class="fl list-img"><div class="zi-name">' + val.Uname + '</div><div class="zi-con">' + (val.MsgType == "1" ? val.Content : (val.MsgType == '3' ? '<img src="' + val.ImgUrl + '" style="width:40px; height:30px"/>' : '')) + '</div><div class="date">' + val.Ctime + '</div></div>';

                });

                $('.item').html(dataBind);
                json.page_count = data.pagination.page_count;
                json.page_no = data.pagination.page_no;
                //分页
                if (json.page_count > 1) {
                    $('.pg-list').html(paginator(json, "GetPation({pageIndex})", pagesize));
                    $('.pg-list').show();
                } else {
                    $('.pg-list').hide();
                }
                
            }
        });
    }
    //刷新页面
    function F5_Page() {
        if (json.page_no==1) {
            $('.item').html("<div style='margin-left:230px;margin-bottom:30px; margin-top:200px'><img src='/img/loading.gif'/>正在刷新数据，请稍后...</div>");
            setTimeout(function () { GetPation(1); }, 2000);
            
        }
    }
    GetPation(1);
        //五秒后执行刷新
   setInterval("F5_Page()", 5000);

</script>
posted @ 2013-08-07 08:45 编程小帆阅读(630) 评论(0) 编辑收藏举报
刷新页面返回顶部
编程小帆

基于asp.net的ajax分页

公告
