简单易用的分页插件 原生HTML分页功能 JS ajax对接后台数据接口的调用
先来看一下整体的效果图如下:
今天给大家推荐jQuery-Paging插件,一个用于简化网页分页的轻量级工具,包含自定义样式、动态生成分页、事件处理和集成示例。详细说明了如何在HTML中使用该插件及其功能配置。
首页通过第三方的插件paging.min.js进行快速高效的实现原生html分页功能
插件功能性:
- 支持自定义主题样式;
- 可以根据数据总数动态生成分页;
- 提供多种事件回调函数;
- 轻松集成到现有的 Web 应用中;
- 兼容主流浏览器。
引用下载 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接口就好,并按需配置其他选项即可实现分页效果。
前端axios全局配置 请求拦截器 响应拦截器 封装各种请求方式
标签:function,插件,分页,HTML,counts,page From: https://blog.csdn.net/qq_34548883/article/details/140665676