html+js实现分页功能代码实例

最新推荐文章于 2024-04-18 11:41:43 发布
最新推荐文章于 2024-04-18 11:41:43 发布
阅读量1.9k 收藏 7
点赞数
文章标签： vue js javascript jquery html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39221436/article/details/115753936
版权

1、分页功能实现效果如下：

在这里插入图片描述

2、代码如下

<!DOCTYPE html >
<html>
<head>
	<title> 消息呈现 </title>
	<link rel="icon" href="picture.ico" type="image/x-icon" />
	<script src="../js/jquery.min.js"></script>
		<style type="text/css">
		.title {
		    padding:5px;
			background: #F7F7F7;
			text-align: center;
			vertical-align: middle;
			border-radius: 12px;
			margin-bottom: 16px;
			margin-top: 10px;
			color: #616161;
			font-size: 16px;
		}
 
		.font {
			color: #00a5e0;
			font-size: 14px;
		}
 
		.paging {
			width: 1660px;
			height: 40px;
			background: #EFF3F8;
			padding-top: 8px;
			padding-left: 30px;
			margin-top: 20px;
		}
 
		.page-font {
			color: #292929;
			font-size: 14px;
		}
	</style>
</head>
<body>
	<div class="ui-tab">
	<!-- 具体消息内容 -->
	</div>
	<div class="paging">
	<!-- 分页布局-->
		<table>
			<tr class="page-font">
				<td width=""><img src="../image/first.png" width="24px" height="25px" class="firstPage" onclick="page_click(this)" /></td>
				<td><img src="../image/before.png" width="27px" height="22px" class="beforePage" onclick="page_click(this)" /></td>
				<td>&nbsp;&nbsp;|&nbsp;第<input type="button" class="currentPage" value="1" readonly="readonly">页</td>
				<td>&nbsp;&nbsp;&nbsp;共<input type="button" class="totalPage" value="1" readonly="readonly">页&nbsp;|&nbsp;&nbsp;</td>
				<td><img src="../image/next.png" width="27px" height="26px" class="nextPage" onclick="page_click(this)" /></td>
				<td><img src="../image/last.png" width="27px" height="24px" class="lastPage" onclick="page_click(this)" /></td>
			</tr>
		</table>
	</div>
	<script type="text/javascript">
		var totalPage = 10; //一共多少页
		var currentPage = 1;//当前页码
		var information_lenght = []
		//前端获取后台数据并呈现方法
		function information_display() {
			var data = [
				{ "title": "第一页-今日日志"},
				{ "title": "第一页-今日日志"},
			];
			$(".ui-tab").empty()
			$.each(data, function (index, n) {
				var infor_title = "<table  class=\"title\">"
					+ "<tr >"
					+ "<td>" + data[index].title + "</td>"
					+ "</tr>"
					+ "</table>";
				$(".ui-tab").append(infor_title)
			})
		}
		//为测试分页功能代码，进行网络请求后便不需要
		function information_display2() {
			var data = [
				{ "title": "第二页-今日日志反反复复付付付"}
			];
			$(".ui-tab").empty()
			$.each(data, function (index, n) {
				var infor_title = "<table  class=\"title\">"
					+ "<tr >"
					+ "<td>" + data[index].title + "</td>"
					+ "</tr>"
					+ "</table>";
				$(".ui-tab").append(infor_title)
			})
		}
		//初始化加载，分页首页数据，输入：每页多少条数据，当前页（默认为1）；输出：当前页数据和总页数
		window.onload = function () {
			$(".totalPage").attr("value", totalPage)
			information_display()
		}
		//上一页、下一页，首页和尾页的单击触发事件
		function page_click(item) {
			console.log(item)
			//首页
			if ($(item).attr("class") == "firstPage") {
				console.log("firstPage")
				pageNumber = parseInt($(".currentPage").attr("value"));
				$(".currentPage").attr("value", 1)
			}
			//上一页
			else if ($(item).attr("class") == "beforePage") {
				console.log("beforePage")
				pageNumber = parseInt($(".currentPage").attr("value"));
				if (pageNumber > 1) {
					$(".currentPage").attr("value", pageNumber - 1)
					information_display()
				}
				else {
					$(".beforePage").attr("disabled", false)
				}
			}
			//下一页
			else if ($(item).attr("class") == "nextPage") {
				console.log("nextPage")
				pageNumber = parseInt($(".currentPage").attr("value"));
				if (pageNumber < totalPage) {
					$(".currentPage").attr("value", pageNumber + 1)
					information_display2()
				}
				else {
					$(".nextPage").attr("disabled", false)
				}
			}
			//尾页
			else {
				console.log("lastPage")
				pageNumber = parseInt($(".currentPage").attr("value"));
				$(".currentPage").attr("value", totalPage)
			}
		}
	</script>
</body>
</html>

完整项目：http://github.crmeb.net/u/defu

CRMEB定制开发
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
css+html+js 分页列表 2020-12-12
XQ_corn的博客
12-12 583
分页显示1(css+html+js) 1.html代码 一个ul和盛放分页的盒子 <ul class="newslist"> </ul> <div class="btn-box"> </div> 2.css ul, li { padding: 0; margin: 0; list-style: none; } ul {...
html+js实现分页功能
qq_42554719的博客
02-14 4547
js代码 <script> $(function () { //获取上一页html传递过来的id信息 var search = location.search; var cid = search.split("=")[1]; //调用异步交互方法 loa...
基于js分页实现（简单）
01-10
使用javacript实现分页技术，简单明了。没有多以的步骤！
利用js制作html table分页示例(js实现分页)
12-12
有时候table的列数太长，不利于使用者查询，所以利用JS做了一个table的分页，以下为相关代码 一、JS代码 代码如下:[removed]            var pageSize = 15;    //每页显示的记录条数             var curPage=0;        //当前页             var lastPage;        //最后页             var direct=0;        //方向            var len;            //总行数       
html+vue编写分页功能
最新发布
xingchenyv的博客
04-18 382
html+vue+mongodb编写分页功能
ASP.NET MVC4 HtmlHelper扩展类，实现分页功能
10-22
本文主要做了一个HtmHelper类的分页扩展函数，方便在视图中调用，有需要的朋友可以参考一下，希望对大家有所帮助。
javascript分页代码实例分享(js分页)
01-19
调用： 代码如下:var pageChange = function (index) {            var html = pager(“divid”, index, 5, 1000, pageChange, { showGoTo: false, showFirst: false });        } 实现： 代码如下:pager = function (divPager, pageIndex, pageSize, totalCount, pageChange, opt) {     var theOpt = {         barSize: 5, //分页条显示的页码数
MVC HtmlHelper扩展类(PagingHelper)实现分页功能
10-19
主要为大家详细介绍了MVC HtmlHelper扩展，实现分页功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
html前台分页,静态分页,使用及其简单,支持多个列表
05-24
html前台分页,静态分页,使用及其简单,支持多个列表
html无刷新分页代码,javascript 新闻标题静态分页代码 (无刷新)_javascript技巧
weixin_39977776的博客
06-07 109
一个模板，从数据库取n条记录，生成静态。做单页面的静态化,索引页面是用JS对数组进行组合的。因为记录只是一个标题，一个链接，字节数不会太大，那么用js去用这个大数组进行分页，貌似不错,很节约带宽!还是很棒的，简单，实用，值得推荐！JS代码：function title_array(title, link_add, store_time) {this.title = title;this.l...
html分页效果怎么加,CSS 分页效果制作实例教程
weixin_35202718的博客
06-03 641
这个教程也包含有实现Flickr、Digg式的简洁分页样式的HTML/CSS代码，随时可以应用于你的WEB项目中。Update as March 17, 2008:My friends Simone Saveri solved some issuse with IE6 and IE7.Download this tutorial (original)Download this tutorial (...
BootStrap分页
qq_39529315的博客
05-31 282
&lt;nav&gt;元素作为标注一个导航的链接区域。增强语义化。普通类型的分页：使用pagination，有pagination-lg、pagination-sm等改变大小的方法&lt;nav&gt;  &lt;ul class="pagination"&gt;    &lt;li&gt;      &lt;a href="#" &gt;        &lt;span &amp
详解Python odoo中嵌入html简单的分页功能
09-19
在odoo中，通过iframe嵌入 html，页面数据则通过controllers获取，使用jinja2模板传值渲染。这篇文章主要介绍了Python odoo中嵌入html简单的分页功能 ,需要的朋友可以参考下
javaweb mysql实现分页功能
09-20
javaweb中我们常常用到分页功能，这里我写了一个小例子，供大家参考，
纯JS前端实现分页代码
11-25
先给大家展示下效果图，如果大家感觉效果不错，请参考实现代码： 因为这是我自己第一次动手用js写分页，写的应该也不是很完美，有些公共的没有抽取出来，但是用起来还是可以的，这块代码是可以把它当做公共的分页去处理的，我就是用这块代码写了两个稍微不同一些的分页！公共的代码抽取的也差不多，主要就是ajax后台以及返回的值不同而已，只要把总页码的值获取到，点击首页/下一页等传值正确的话，基本上分页是不会出什么问题的  网上确实有很多分页的插件以及开源代码，单本是一个后台开发猿，前台css等样式还驾驭不住，所以就开始自己去写了。其实这个分页原理很简单，就是用ajax往后台传值(当前页码)，后台使用lim
JS+HTML分页代码
05-22
通过JS和HTML实现的分页功能代码，有首页，前页，后页，尾页和分页页号等功能，
Angular+Bootstrap+Spring Boot实现分页功能实例代码
12-09
angular.js（用angular.min.js会导致分页控件不显示） ui-bootstrap-tpls.min.js angular-animate.js 需要用到的css bootstrap.min.css 由于本项目使用了路由，所以讲js以及css文件的应用都放在一个主html，请同学们...
javascript实现json页面分页实例代码
01-19
下午有个朋友问json 数据怎么分页 就捣鼓了一个东东出来 下面直接代码： 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...
js实现ajax分页完整实例
12-09
本文实例讲述了js实现ajax分页的方法。分享给大家供大家参考，具体如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <...
html表格分页代码实例
05-02
以下是一个简单的 HTML 表格分页代码实例： ```html <!DOCTYPE html> <html> <title>Table Pagination Example table { border-collapse: collapse; width: 100%; } th, td { text-align: left;...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CRMEB定制开发

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值