jq分页功能。

最新推荐文章于 2024-09-01 14:04:36 发布

前段小白

最新推荐文章于 2024-09-01 14:04:36 发布

阅读量1.5k

点赞数 1

文章标签： jq分页事件委托事件绑定和解除

本文链接：https://blog.csdn.net/qq_38622264/article/details/80917473

版权

该博客介绍如何利用JQ实现分页效果，特别是针对后端分页并在前端改变页码请求数据的场景。内容包括HTML结构、JS逻辑以及CSS样式。还提到了在存在筛选条件和动态生成分页的情况下，如何使用JQ的事件委托和解除绑定(on/off)来确保正确切换页码，并添加了跳转到任意页的功能。

摘要由CSDN通过智能技术生成

分页效果（后端分页，前端改变参数‘页码’请求数据）

html：

<div style="float: left;margin-right: 30px;" class="tcdPageCode"></div>

JS：

$(".tcdPageCode").createPage({
    pageCount://总页数,
    current:1,
    backFn:function(p){
	//p为返回的当前页码
    }
});

css：

* {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		a {
			text-decoration: none;
		}
		a:hover {
			text-decoration: none;
		}
		.tcdPageCode {
			padding: 15px 5px;
			text-align: left;
			color: #ccc;
			text-align: center;
		}
		.tcdPageCode a {
			display: inline-block;
			color: #6699cc;
			display: inline-block;
			height: 25px;
			line-height: 25px;
			padding: 0 5px;
			border: 1px solid #ddd;
			margin: 0 2px;
			border-radius: 4px;
			vertical-align: middle;
		}
		.tcdPageCode a:hover {
			text-decoration: none;
			border: 1px solid #6699cc;
		}
		.tcdPageCode span.current {
			font-size: 12px;
			display: inline-block;
			height: 25px;
			line-height: 25px;
			padding: 0 5px;
			margin: 0 2px;
			color: #fff;
			background-color: #6699cc;
			border: 1px solid #6699cc;
			border-radius: 4px;
			vertical-align: middle;
		}
		.tcdPageCode span.disabled {
			font-size: 12px;
			display: inline-block;
			height: 25px;
			line-height: 25px;
			padding: 0 5px;
			margin: 0 2px;
			color: #bfbfbf;
			background: #f2f2f2;
			border: 1px solid #bfbfbf;