分页阅读html,html分页

article/2025/8/15 17:10:36

1 (function($, window, document, undefined) {

2 //定义分页类

3 function Paging(element, options) {

4 this.element = element;

5 //传入形参

6 this.options = {

7 pageNo: options.pageNo||1,

8 totalPage: options.totalPage,

9 totalSize:options.totalSize,

10 callback:options.callback

11 };

12 //根据形参初始化分页html和css代码

13 this.init();

14 }

15 //对Paging的实例对象添加公共的属性和方法

16 Paging.prototype = {

17 constructor: Paging,

18 init: function() {

19 this.creatHtml();

20 this.bindEvent();

21 this.pageBtnHover();

22 },

23 //分页翻页按钮hover效果

24 pageBtnHover: function () {

25 $("#nextPage")

26 .on("mouseout",

27 function () {

28 $(this).find("img").attr("src", "/img/rightButtonPage.png");

29 });

30 $("#prePage")

31 .on("mouseout",

32 function () {

33 $(this).find("img").attr("src", "/img/leftButtonPage.png");

34 });

35 $("#nextPage")

36 .on("mouseover",

37 function () {

38 $(this).find("img").attr("src", "/img/pa_right_per.png");

39 });

40 $("#prePage")

41 .on("mouseover",

42 function () {

43 $(this).find("img").attr("src", "/img/pa_left_per.png");

44 });

45 },

46 creatHtml: function () {

47

48 var me = this;

49 var content = "";

50 var current = me.options.pageNo;

51 var total = me.options.totalPage;

52 var totalNum = me.options.totalSize;

53 content += "显示 102550100 项结果显示第1至" + totalNum+"项结果,共"+total+"页";

54 content += "leftButtonPage.png";

55

56 //总页数大于6时候

57 if(total > 6) {

58 //当前页数小于5时显示省略号

59 if(current < 5) {

60 for(var i = 1; i < 6; i++) {

61 if(current == i) {

62 content += "" + i + "";

63 } else {

64 content += "" + i + "";

65 }

66 }

67 content += ". . .";

68 content += ""+total+"";

69 } else {

70 //判断页码在末尾的时候

71 if(current < total - 3) {

72 for(var i = current - 2; i < current + 3; i++) {

73 if(current == i) {

74 content += "" + i + "";

75 } else {

76 content += "" + i + "";

77 }

78 }

79 content += ". . .";

80 content += ""+total+"";

81 //页码在中间部分时候

82 } else {

83 content += "1";

84 content += ". . .";

85 for(var i = total - 4; i < total + 1; i++) {

86 if(current == i) {

87 content += "" + i + "";

88 } else {

89 content += "" + i + "";

90 }

91 }

92 }

93 }

94 //页面总数小于6的时候

95 } else {

96 for(var i = 1; i < total + 1; i++) {

97 if(current == i) {

98 content += "" + i + "";

99 } else {

100 content += "" + i + "";

101 }

102 }

103 }

104 content += "rightButtonPage.png";

105 me.element.html(content);

106 },

107 //添加页面操作事件

108 bindEvent: function() {

109 var me = this;

110 me.element.off('click', 'a');

111 me.element.on('click', 'a', function() {

112 var num = $(this).html();

113 var id=$(this).attr("id");

114 if(id == "prePage") {

115 if(me.options.pageNo == 1) {

116 me.options.pageNo = 1;

117 } else {

118 me.options.pageNo = +me.options.pageNo - 1;

119 }

120 } else if(id == "nextPage") {

121 if(me.options.pageNo == me.options.totalPage) {

122 me.options.pageNo = me.options.totalPage

123 } else {

124 me.options.pageNo = +me.options.pageNo + 1;

125 }

126

127 } else if(id =="lastPage") {

128 me.options.pageNo = me.options.totalPage;

129 }else{

130 me.options.pageNo = +num;

131 }

132 me.creatHtml();

133 if(me.options.callback) {

134 me.options.callback(me.options.pageNo);

135 }

136 });

137 }

138 };

139 //通过jQuery对象初始化分页对象

140 $.fn.paging = function(options) {

141 return new Paging($(this), options);

142 }

143 })(jQuery, window, document);


http://chatgpt.dhexx.cn/article/aeC6RSLL.shtml

相关文章

JS实现前端分页

一、HTML部分 <!doctype html> <html> <head><meta charsetutf-8><script src"js/jquery.js"></script><style type"text/css">a{text-decoration: none;}table {border-collapse:collapse;width: 100%;font-s…

html中的分页条怎么写,html如何制作分页

一般的制作页面都会使用到分页&#xff0c;那么你知道分页功能是怎么实现的吗&#xff1f;让我们一起来学习一下html如何制作分页吧。 新建html页面。如图&#xff1a; 在html页面找到body标签&#xff0c;在body标签里新建一个div标签&#xff0c;然后在div标签中新建a标签&am…

html分页功能

&#xff08;代码来源 http://www.xwcms.net/&#xff0c;非原创&#xff01;&#xff09; 1、导入css、js文件 2、根据index.html中的页面进行相应的修改 主要函数实现&#xff08;其中&#xff0c;#exampletable为需要分页的table的id&#xff09; <script type"te…

HTML+CSS实现网页分页页码

直角分页页码实现 <!doctype html> <html> <head> <meta charset"utf-8"> <title>直角分页页码</title> <style type"text/css">/*设置 a 标签的css样式*/.page-normal a{border: 1px solid #ff6500;padding: …

前端 利用html实现分页切换效果

本篇文章主要要实现的功能效果如下&#xff1a; 包含首页 尾页 上一页 下一页 总计的页数以及总计的条数还有跳转的功能 整体思想&#xff1a;先定位一个中心页 上一页、下一页就是根据定位中心页然后加减就可以实现 首页就是要根据一次要展示几页&#xff0c;然后分别展示…

HTML实现分页功能

思路 主要是通过display: block和display: none来实现页面的切换。 将每个页面用一个div包起来&#xff0c;默认第一个页面的样式是display: block&#xff0c;其他页面的样式是display: none&#xff0c;然后通过JavaScript获取鼠标点击事件来隐藏其他页面&#xff0c;显示当…

html+js实现分页功能

1、分页功能实现效果如下&#xff1a; 2、代码如下 <!DOCTYPE html > <html> <head><title> 消息呈现 </title><link rel"icon" href"picture.ico" type"image/x-icon" /><script src"../js/jquer…

阿里云服务器Windows系统搭建Java Web网站教程

一、首先首先搜索阿里云官网&#xff0c;购买服务器 二、 打开控制台-云服务器ECS-实例&#xff0c;先停止运行&#xff0c;再选择更换系统盘&#xff0c;选择带有jdk和tomcat和MySQL的系统镜像安装。 三、 待服务器重启后&#xff0c;打开Windows自带的远程连接软件&#xff0…

关于阿里云Centos服务器搭建Java网站不能访问的问题

转载请注明出处&#xff1a;http://blog.csdn.net/l1028386804/article/details/73864773 首先阿里云提供的手册是没问题的 手工搭建 然后我在地址栏输入服务器地址之后总是提示无法访问&#xff01; 输入命令 netstat -tunlp&#xff0c;80端口确实是在监听&#xff08;这…

【阿里云】基于ECS搭建Java Web开发环境

点击右侧 切换至Web Terminal&#xff0c;执行以下命令&#xff0c;查看yum源中JDK版本。 yum list java* 执行以下命令&#xff0c;使用yum安装JDK1.8。 yum -y install java-1.8.0-openjdk* 执行以下命令&#xff0c;查看是否安装成功。 java -version 如果显示如下图内…

一、申请阿里云服务器及搭建Java开发环境教程 -- 购买阿里云服务器(1)

注&#xff1a;云服务器开发环境如下 &#xff08;CentOS JDK1.7 Mysql ZooKeeper Redis Nginx maven中央库Nexus&#xff09; 一、购买阿里云服务器 1、百度搜索阿里云官网或地址栏输入 https://www.aliyun.com 进入阿里云官网&#xff0c;登录或注册进入&#xff0c;…

阿里云搭建网站

首次搭建个人小站&#xff0c;建议购买域名和服务器到知名商家&#xff0c;比如阿里云&#xff0c;百度云等。因为阿里云绑定了个人淘宝账号&#xff0c;所以成为本人首选&#xff0c;嘿嘿。 购买域名。点击打开http://www.aliyun.com/ 链接地址。并点击右上角的“万网”标记。…

阿里云服务器部署javaweb

1.首先购买服务器和域名 服务器类型选择&#xff1a;云服务器ecs&#xff08;不要选择突发性能型&#xff09;&#xff0c;域名自便&#xff08;注&#xff1a;域名解析需要备案&#xff0c;此类型服务器要求有效期大于三个月才可以备案&#xff09;。 服务器设置&#xff1a…

教你从0开始部署阿里云服务器,阿里云服务器搭建网站教程

教你从0开始部署阿里云服务器&#xff0c;阿里云服务器部署网站的办法&#xff0c;阿里云搭建项目的办法&#xff0c;阿里云服务器搭建网站教程 1.购买 登录官网点击下面链接&#xff1a;阿里云注册链接 查看云服务器购买列表&#xff0c;购买时选择地区、操作系统镜像等&…

阿里云搭建java web

1.首先进入ECS实例&#xff0c;开启实例并且使用XShell连接 2.安装JDK 执行以下命令&#xff0c;查看yum源中JDK版本。 yum list java*执行以下命令&#xff0c;使用yum安装JDK1.8。 yum -y install java-1.8.0-openjdk*执行以下命令&#xff0c;查看是否安装成功。 java …

如何使用阿里云搭建个人网站

国内比较早的几个个人网站有阮一峰、月光博客等。他们都会定期的更新一些文章&#xff0c;阮一峰的更新频率大概在每月4篇&#xff0c;月光博客每天一篇。他们每天的浏览量在2万以上&#xff0c;每月最低收入都在2万以上。作为一个程序员&#xff0c;我一直想给自己找点事情做。…

如何利用阿里云ECS服务器和域名,搭建部署自己的网站(Windows系统)

前言 建站简单方法 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、购买服务器和域名 根据自己的需求购买相应级别的服务器 示例&#xff1a;ECS共享型n4 二、服务器创建实例和域名备案 详细过程自行百度即可&#xff0c;再此不详细说明&…

【网站搭建】阿里云搭建个人网站详细流程

1. 工具的选择 因为直接网页操作实例的话不是很方便&#xff0c;鉴于有Linux和大数据开发经验。使用以下工具 winscp&#xff1a;文件传输&#xff0c;可以实现本地和远程端的文件传输&#xff0c;也可以直接修改远程端文件&#xff0c;不用在终端里了XSHELL:安全终端模拟软件…

教你快速在阿里云服务器上搭建网站!

前文概述 出于好奇&#xff0c;我用学生优惠租了一台阿里云服务器&#xff0c;打算做一些Java web的开发&#xff0c;但是毕竟是第一次接触这样的东西&#xff0c;还是比较陌生&#xff0c;在这个过程中遇到了一些问题(肯定会遇到问题的)&#xff0c;但是呢&#xff0c;在网上搜…

使用阿里云ECS服务器搭建java环境

服务器搭建java 第一步 安装java环境 首先使用Linux命令 yum list java*截图如下 在这里可以选择自己想要的版本。这里我选择java8 yum install java-1.8.0-openjdk.x86_64出现如下截图&#xff0c;则表示安装完毕 接下来可以查看java的版本号&#xff0c;以证明安装完毕…