基于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>

基于asp.net的ajax分页的更多相关文章

不知道算不算另类的ASP.NET MVC4 Ajax分页
以往用Ajax来实现无刷新分页,用户一按F5,页数就记不住了,点了一个链接也是同一个问题,再想回退回来,就回到第一页了.上次看到一篇文章,说到window.location.hash的用途,于是萌生了 ...
基于存储过程的MVC开源分页控件--LYB.NET.SPPager
摘要现在基于ASP.NET MVC的分页控件我想大家都不陌生了,百度一下一大箩筐.其中有不少精品,陕北吴旗娃杨涛大哥做的分页控件MVCPager(http://www.webdiyer.com/)算 ...
精心挑选的12款优秀 jQuery Ajax 分页插件和教程
在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...
转：精心挑选的12款优秀 jQuery Ajax 分页插件和教程
在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...
基于存储过程的MVC开源分页控件
基于存储过程的MVC开源分页控件--LYB.NET.SPPager 摘要现在基于ASP.NET MVC的分页控件我想大家都不陌生了,百度一下一大箩筐.其中有不少精品,陕北吴旗娃杨涛大哥做的分页控件M ...
12款优秀 jQuery Ajax 分页插件和教程
12款优秀 jQuery Ajax 分页插件和教程在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 W ...
12款优秀jQuery Ajax分页插件和教程
在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...
MvcPager 概述 MvcPager 分页示例 — 标准Ajax分页对SEO进行优化的ajax分页 (支持asp.net mvc)
该示例演示如何使用MvcPager最基本的Ajax分页模式. 使用AjaxHelper的Pager扩展方法来实现Ajax分页,使用Ajax分页模式时,必须至少指定MvcAjaxOptions的Upda ...
源码来袭！！！基于jquery的ajax分页插件（demo+源码）
前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客 ...

随机推荐

SQL自定义函数split分隔字符串
SQL自定义函数split分隔字符串一.F_Split:分割字符串拆分为数据表 Create FUNCTION [dbo].[F_Split] ( @SplitString nvarchar(max ...
Nuget~让包包带上自己的配置信息
我们知道一般开发组件之后,组件都有相关配置项,最常见的作法就是把它写到web.config里,而如果你将这个文件直接放到nuget里打包,在进行安装包包时,会提示你这个文件已经存在,不能去覆盖原来的c ...
极限编程(XP)基本原则与规范
1. 坐在一起(Sitting Together) 尽可能让团队成员坐在一起,Kent Block在一次芝加哥的某个濒临困境的项目中发现,虽然这个团队都是由程序精英组成,但是却陷入困境,后来他发现, ...
On Memory Leaks in Java and in Android.
from:http://chaosinmotion.com/blog/?p=696 Just because it's a garbage collected language doesn't mea ...
MaterialViewPager
https://github.com/florent37/MaterialViewPager
string和stringbuilder的解剖
String和StringBuilder的深入解析前言:本文出发点是我们开发的过程中是否真正的理解stringbuilder的使用,string字符串操作的是如何实现(哈希表),stringbu ...
iOS开发——网络编程Swift篇&（三）同步Get方式
同步Get方式 // MARK: - 同步Get方式 func synchronousGet() { //创建NSURL对象 var url:NSURL! = NSURL(string: " ...
iOS开发——网络编程Swift篇&（八）SwiftyJSON详解
SwiftyJSON详解最近看了一些网络请求的例子,发现Swift在解析JSON数据时特别别扭,总是要写一大堆的downcast(as?)和可选(Optional),看?号都看花了.随后发现了这个库 ...
js 控制div 显示隐藏的问题
var divs = document.getElementsByTagName("div");得到所有的divfor(var i=0;i<divs.length;i++){ ...
网络IPC：套接字之建立连接
如果处理的是面向连接的网络服务(SOCK_STREAM或SOCK_SEQPACKET),在开始交换数据以前,需要在请求服务的进程套接字(客户端)和提供服务的进程套接字(服务器)之间建立一个连接.客户端 ...

基于asp.net的ajax分页

基于asp.net的ajax分页的更多相关文章

随机推荐

热门专题