简单易用的分页插件 原生HTML分页功能 JS ajax对接后台数据接口的调用

简单易用的分页插件 原生HTML分页功能 JS ajax对接后台数据接口的调用

先来看一下整体的效果图如下：

今天给大家推荐jQuery-Paging插件，一个用于简化网页分页的轻量级工具，包含自定义样式、动态生成分页、事件处理和集成示例。详细说明了如何在HTML中使用该插件及其功能配置。

首页通过第三方的插件paging.min.js进行快速高效的实现原生html分页功能

插件功能性：

1. 支持自定义主题样式；
2. 可以根据数据总数动态生成分页；
3. 提供多种事件回调函数；
4. 轻松集成到现有的 Web 应用中；
5. 兼容主流浏览器。

引用下载 paging.min.js在使用中必须得包函

<!-- 本地引用 -->
<link rel="stylesheet" type="text/css" href="./paging/css/paging.css" />
<script src="./paging/js/paging.min.js" type="text/javascript" charset="utf-8"></script>

<!-- 线上引用 -->
<link rel="stylesheet" href="https://gitcode.net/assets/css/jquery.paging.css">
<script src="https://gitcode.net/assets/js/jquery.paging.min.js"></script>

其次，需要在您的 HTML 页面中添加一个用于显示分页的容器元素，并编写以下代码：

<div id='page'></div>

接下来，在需要再 <script> 标签内创建 JavaScript 对象并调用 pagehtml() 方法初始化分页：

function pagehtml(nums,counts=10){
		//unmnums 总数
		//counts 每页个数
		var p = new Page({
			el: '#page',
			nums: nums,
			counts: counts,
			defaultPage: 1,
			showHeadFoot: !false, // 显示首页尾页
			head: '首', // 更改首页文字
			foot: '尾', // 更改尾页文字
			jumpToOrder: true, // 跳转到指定页
			showNowAndAll: true, // 当前页/共几页
			clickEvent: function(currectPage, _this) {
				getlist(currectPage,0);
			}
		});
	}

最后直接调用getlist()方法进行展示渲染数据列表

function getlist(page=1,status=1){
		$.ajax({
			url: '', // 你的API或服务器端点
			type: 'GET',
			data: {
				page:page
			},
			success: function(res) {
				// 请求成功时的回调函数
				console.success(res);
			},
			error: function(xhr, status, error) {
				// 请求失败时的回调函数
				console.error(error);
			}
		});
	}

以上代码将会在页面加载完成后自动执行。您只需将数据接口替换为您自己的API接口就好，并按需配置其他选项即可实现分页效果。

史上最全CSS命名规则总结及公用常见的CSS前端整理小知识

前端axios全局配置 请求拦截器 响应拦截器 封装各种请求方式

七牛云、阿里云和腾讯云云存储基础环境搭建教程