文档章节

html5,jQuery 实现贴吧,论坛分页样式,可无缝组合Ajax

PorcoGT
 PorcoGT
发布于 2015/03/24 18:26
字数 1218
阅读 86
收藏 1
点赞 0
评论 0

        最近项目里大量使用Ajax组合分页,借此也在网上学习了很多关于Ajax和分页的知识,相对于文字,我更适合直接看源码,可是网上很多文章废话太多,贴的代码还不能实现。今天这篇博客主要介绍分页的原理及样式上的实现。后面会介绍Ajax的实现。话不多说,直接上效果图吧……

        这个效果大家如果看不明白,我也没什么好说的了。

        这个样式其实主要是通过 js 向页面绘制出来,每次触发 click 事件的时候都会清空该区域,然后重新绘制。并通过页面隐藏域保留状态值。和Ajax原理其实差不多。

        下面是html代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html分页显示</title>
<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="paging_red.js"></script>
<style type="text/css">
#pageNumberUpAndDown{
    position: absolute;
    left: 100px;
    top: 229px;
}
a{
    text-decoration:none;    
}
.pagination{ width:953px; height:30px; overflow:hidden; text-align:right; margin-top:20px; padding-top:10px; line-height:22px;}
.pagination a{ border:1px solid #c5c5c5; padding:6px 8px; color:#7E858B;}
.pagination a:hover{background:#999;}
.pagination a.selected{ background:#ff534f; color:#FFF; border:1px solid #ff534f;}
.page-text{ width:35px; height:21px; margin:0px 5px; border:1px solid #c5c5c5; text-align:center;}
.button-qd{ width: 48px; height: 25px;border:1px solid #c5c5c5; background:none;  font-family:"黑体" ; color:#7E858B; cursor:pointer }
</style>
</head>
<body>
    <input type="hidden" id="allPageSize" value=70>
    <input type="hidden" id="pageNum" value=1>
    <input type="hidden" id="pageSize" value=10 />
    <input type="hidden" id="worksTypeId" value="">
    <div id="pageNumberUpAndDown">
        
    </div>
</body>
</html>
<div id="pageNumberUpAndDown">

        分页的按钮都是绘制在该 div 下。

<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="paging_red.js"></script>

        导入外部 js ,jQuery使用1.9以上版本。项目里的 UI 使用的是1.4的版本,导致我们写的代码出现很多兼容问题。这里我使用的2.1.3版本,是官网下载的最新版。

        下面是 paging_red.js 的全部内容,我加了很多注释,应该不难看懂,里面我使用了很多状态判断,这也是我个人比较喜爱的一种编程方式。不过确实可读性会比较差。

// JavaScript Document
$(document).ready(function(){
    var v = $('#allPageSize').val();
    $('#allPageSize').val(v);//设置总行数
    pageSize();
});

function pageSize(){
    //总数
    var allSize = $('#allPageSize').val();
    //每页显示条数
    var pageSize = $('#pageSize').val();
    //当前页码
    var pageNum = $('#pageNum').val();
    //基数,表示页数
    var base = Math.ceil(allSize/pageSize);
    //储存分页元素
       var info = '';
    
    //当且仅当一页显示不完全部数据时
    if(allSize > pageSize){
        var index = pageNum;
        var i = 1;
        
        if(pageNum>1){
           index--;
            if(pageNum<=base&&pageNum>base-2){//确保除掉base页,始终只有三页
                index = base-2;
            }
           }else{
           index = 1;
           }
        
        info += '<div class="pagination">';
        //当前页不为第一页时显示上一页
        if(pageNum!=1){
            info += '<a href="JavaScript:void(0);" name="-1">上一页</a> ';
        }
        while(index<=base&&i<4){
            if(index==pageNum){//当前页
                info += '<a href="JavaScript:void(0);" id="pageNum'+index+'" class="selected" name='+index+'>'+index+'</a> ';
            }else{
                info += '<a href="JavaScript:void(0);" id="pageNum'+index+'" name='+index+'>'+index+'</a> ';
            }
            i++;
            index++;
        }
        if(index < base){
            info += '<span >...</span> ';
        }
        if(pageNum < base-1&&base != 3){//确保最后一页必须且只显示一次
            info += '<a href="JavaScript:void(0);" name='+base+'>'+base+'</a> ';
        }
        //当前页不为最后一页时显示下一页
       if(pageNum!=base){
           info += '<a href="JavaScript:void(0);" name="0">下一页</a> ';
       }
       info += '<span>到<input name="" type="text" class="page-text"/>页</span> ';
       info += '<span><input name="" type="button" value="确定" class="button-qd" /></span></div>';
    }
    $('#pageNumberUpAndDown').append(info);
}

$(document).ready(function(){
    $(document).on('click','.pagination a',function(){
        var num = $(this).attr("name");
        var pageNum = $('#pageNum').val();
        $('#pageNumberUpAndDown').html('');
        if(num > 0){//页码点击
            $('#pageNum').val(num);
            pageSize();
        }else{
            //num=0 : 下一页,否则,表示上一页
            var index = num==0?++pageNum:pageNum-1;
            $('#pageNum').val(index);
            pageSize();
        }
    });
    
    //通过输入页码,跳转页面
    $(document).on('click','.button-qd',function(){
        var allSize = $('#allPageSize').val();
        var size = $('#pageSize').val();
        var base = Math.ceil(allSize/size);
        var num = $('.page-text').val();
        if(num<=base&&num>0){
            $('#pageNumberUpAndDown').html('');
            $('#pageNum').val(num);
            pageSize();
            $('#pageNum'+num).click();
        }else{
            alert("'"+num+"':"+"不在查询范围内,请重新输入……");
            $('.page-text').val('');
        }
    });
    
    
    $(document).on('click','.pagination a',function(){
        var num = $('#pageNum').val();
        alert(num);
    });
    
});

        该 js 里很多地方都使用到了

$('#pageNum').val();

这是保存当前页码的隐藏域,正是通过它实现了分页各个方法之间的连接。

    $(document).on('click','.pagination a',function(){
        var num = $('#pageNum').val();
        alert(num);
    });

        最下面的这个 click 监听,则是为了实现对于页码的每次变化做出反应动作。我们这种分页的方式就是为了组合上 Ajax ,实现异步请求数据。而所有Ajax的代码都可以放在这段 监听里。因为我觉得分页和Ajax 是应该分开的,它们可以单独出现。所以有关Ajax的内容,我很快会在下一篇博客里更新。上面的代码 copy 出来就可以直接运行。通过断点不断的调试才是王道。

        应该之前写过一次分页,所以这次写起来并不困难,都是手写的,希望有一天能帮到大家,毕竟总是从大家那里偷取知识长了,多少也得自己贡献点。嘿嘿


© 著作权归作者所有

共有 人打赏支持
PorcoGT
粉丝 3
博文 8
码字总数 4427
作品 1
徐汇
程序员
19个 jQuery 分页插件和教程,附带实例

在这篇文章中我们将向你介绍 20 个最棒的 jQuery 分页插件以及教程,并提供在线演示。 1.客户端的jQuery 分页插件jPages jPages 是一个客户端的分页插件,但提供很多特性例如自动翻页、键盘和...

凯文加内特
2014/04/30
0
0
2011年12月最新JQuery插件汇总

jQuery的工具提示插件 Tipped jQuery表格插件 colResizable jQuery虚拟键盘插件 jQuery keyboard Minimit Gallery 用于显示相册、幻灯片、卷帘等效果 jQuery 幻灯效果显示插件 Diapo jQuery...

晨曦之光
2012/02/24
0
0
炫酷实用 7款jQuery/HTML5图片应用

jQuery非常强大,我们这里有很多关于jQuery焦点图的插件,今天我们精选了7款利用jQuery和HTML5实现的超炫酷图片特效应用,有些也是焦点图插件,一起来看看吧。 1、HTML5 3D衣服摆动特效 超酷...

老鸟的空间
2014/07/05
0
0
HTML5时代来了,还不为你的Visual Studio 2010添加HTML5的项目模板!!!

HTML5时代来了,还不为你的Visual Studio 2010添加HTML5的项目模板!!! 本文在简单不过了,就是为你的Visual Studio2010创建一个项目模板,一个HTML5的项目模板。谁叫HTML5时代来了,Visua...

晨曦之光
2012/03/09
0
0
30个创意出色的非常实用的jquery框架插件-(视觉大背景,瀑布流效果)

jQuery是在网页设计师和开发者最近的热门话题之一。人们使用它的广泛范围从个人博客到企业网站,目前流行的视觉大背景滚动效果,瀑布流图片阴影效果,图片缩放,动态标签复制,html5音频播放...

易达
2012/08/04
0
0
让Bootstrap 3兼容IE8浏览器

让Bootstrap 3兼容IE8浏览器 看到这篇文章有越来越多的人看,我决定给大家节省时间,废话少说。有几个点大家要注意。 1、本地调试需要Web Server(如IIS、Apache,Nginx),单纯地本地打开文...

次长风
2015/07/31
0
1
面向移动设备的HTML5开发框架梳理

很久以前整理了篇将手机网站做成手机应用的JS框架。时隔一年多,很多新的技术已经出现,下面再来总结下还有哪些框架是适合面向手机设备的开发的。 1、jQuery Mobile jQuery Mobile 是 jQuery...

凯文加内特
2015/01/26
0
0
Dream ware5.5倾力支持PhoneGap

对于Android,安装配置和验证的Android SDK的过程,一直有点繁琐。Dreamweaver中CS5.5注意到这个过程中所有的繁琐,通过提供“易安装”的选项,它会为你做在背后做好这些配 置。虽然苹果iOS...

PhoneGap
2011/09/14
0
0
第一天 认识jQuery mobile 框架,资源,书籍

前言 这里就不对jquery mobile做过多的历史介绍,直接进行jQuery mobile的学习 jQuery mobile 框架纵览 1.jQuery mobile 的显示结构 如图1.1 从上面的图示我们可以知道,一个完整的页面是由 he...

打杂程序猿
2011/12/22
0
2
使用HTML5和jQuery插件Quicksand实现一个超酷的星际争霸2兵种分类展示效果

日期:2011/11/01 来源:GBin1.com 因为本人是星际争霸系列游戏的忠实拥簇,所以在今天的jQuery教程中,我们将使用HTML5和jQuery插件Quicksand来创建一个超酷的星际争霸兵种效果图。希望大家...

gbin1
2011/11/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

微信小程序Java登录流程(ssm实现具体功能和加解密隐私信息问题解决方案)

文章有不当之处,欢迎指正,如果喜欢微信阅读,你也可以关注我的微信公众号:好好学java,获取优质学习资源。 一、登录流程图 二、小程序客户端 doLogin:function(callback = () =>{}){let ...

公众号_好好学java
7分钟前
0
0
流利阅读笔记28-20180717待学习

“我不干了!” 英国脱欧大臣递交辞呈 雪梨 2018-07-17 1.今日导读 7 月 6 日,英国政府高官齐聚英国首相的官方乡间别墅——契克斯庄园,讨论起草了一份关于英国政府脱欧立场的白皮书。可是没...

aibinxiao
37分钟前
2
0
OSChina 周二乱弹 —— 理解超算排名这个事,竟然超出了很多人的智商

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @-冰冰棒- :分享Ed Sheeran/Beyoncé的单曲《Perfect Duet (with Beyoncé)》 《Perfect Duet (with Beyoncé)》- Ed Sheeran/Beyoncé 手机...

小小编辑
48分钟前
32
5
Android 获取各大音乐平台的真实下载地址

废话 电脑使用谷歌浏览器或者QQ浏览器的时候。。。。。。。说不清楚,还是看图吧 大概意思就是,只要网页上需要播放,只要能播放并且开始播放,这个过程就肯定会请求到相关的音乐资源,然后就...

她叫我小渝
今天
0
0
shell中的函数、shell中的数组、告警系统需求分析

shell中的函数 格式: 格式: function f_name() { command } 函数必须要放在最前面 示例1(用来打印参数) 示例2(用于定义加法) 示例3(用于显示IP) shell中的数组 shell中的数组1 定义数...

Zhouliang6
今天
2
0
用 Scikit-Learn 和 Pandas 学习线性回归

      对于想深入了解线性回归的童鞋,这里给出一个完整的例子,详细学完这个例子,对用scikit-learn来运行线性回归,评估模型不会有什么问题了。 1. 获取数据,定义问题     没有...

wangxuwei
今天
1
0
MAC安装MAVEN

一:下载maven压缩包(Zip或tar可选),解压压缩包 二:打开终端输入:vim ~/.bash_profile(如果找不到该文件新建一个:touch ./bash_profile) 三:输入i 四:输入maven环境变量配置 MAVEN_HO...

WALK_MAN
今天
0
0
33.iptables备份与恢复 firewalld的9个zone以及操作 service的操作

10.19 iptables规则备份和恢复 10.20 firewalld的9个zone 10.21 firewalld关于zone的操作 10.22 firewalld关于service的操作 10.19 iptables规则备份和恢复: ~1. 保存和备份iptables规则 ~2...

王鑫linux
今天
2
0
大数据教程(2.11):keeperalived+nginx高可用集群搭建教程

上一章节博主为大家介绍了目前大型互联网项目的系统架构体系,相信大家应该注意到其中很重要的一块知识nginx技术,在本节博主将为大家分享nginx的相关技术以及配置过程。 一、nginx相关概念 ...

em_aaron
今天
1
1
Apache Directory Studio连接Weblogic内置LDAP

OBIEE默认使用Weblogic内置LDAP管理用户及组。 要整理已存在的用户及组,此前办法是导出安全数据,文本编辑器打开认证文件,使用正则表达式获取用户及组的信息。 后来想到直接用Apache Dire...

wffger
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部