jquerypagination多样式分页插件代码资源-CSDN文库

共8个文件

js：5个

css：2个

html：1个

需积分: 5 110 浏览量 2022-12-23 20:24:25 上传评论收藏 83KB RAR 举报

在IT行业中，分页是网页设计中不可或缺的一部分，特别是在处理大量数据时，它能帮助用户更有效地浏览和导航。jQuery是一个流行的JavaScript库，提供了一系列工具和插件来简化Web开发，其中包括分页功能。本篇文章将详细介绍“jQuery Pagination”这个多样式分页插件，并探讨如何在HTML页面中应用它。 jQuery Pagination插件允许开发者创建多种样式的分页，以适应不同的网站设计需求。这些样式可能包括经典的数字按钮、带有箭头的滑块或者更加现代的卡片样式等。这极大地提高了用户体验，使用户能够轻松地在多个页面间切换。在HTML页面中引入jQuery Pagination插件，你需要首先确保已经引入了jQuery库。你可以通过CDN（内容分发网络）链接或本地文件路径来实现这一点。例如： ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``` 接下来，需要引入pagination插件的CSS和JS文件。这些文件通常位于`jquery pagination多样式分页插件代码_files`目录下。例如： ```html <link rel="stylesheet" href="jquery pagination多样式分页插件代码_files/pagination.css"> <script src="jquery pagination多样式分页插件代码_files/pagination.js"></script> ``` 在HTML结构中，你需要一个容器来放置分页组件，可以是一个简单的无序列表： ```html <ul id="pagination"></ul> ``` 现在，我们可以通过JavaScript来初始化和配置分页插件。以下是一个基本的示例： ```javascript $(document).ready(function() { var total_pages = 50; // 假设总共有50页 $('#pagination').pagination({ pages: total_pages, // 设置总页数 displayedPages: 5, // 显示的分页数 hrefTextPrefix: '?page=', // 分页链接的前缀 cssStyle: 'light-theme', // 选择预定义的样式 onClickCallback: function(page_number) { // 当点击分页按钮时执行的回调函数，这里可以更新内容 console.log('切换到第' + page_number + '页'); } }); }); ``` 在上面的代码中，`onClickCallback`函数是一个可选的回调，当用户点击分页按钮时会被调用。你可以在这里根据页码加载对应的数据，例如通过Ajax请求。此外，插件还提供了许多其他配置选项，如`prevText`和`nextText`用于自定义上一页和下一页的文本，`ellipseText`用于在省略号处显示的文本，以及`currentPage`用于设置初始显示的页码等。 “jQuery Pagination”插件是一个强大且灵活的工具，可以帮助开发者轻松实现网页的分页功能。通过调整配置选项和样式，可以轻松定制出符合网站风格的分页组件，提升用户的浏览体验。在实际项目中，你可以根据具体需求对其进行深入研究和应用。

资源推荐

资源详情

资源评论

收起资源包目录

jquery pagination多样式分页插件代码_files.rar （8个子文件）

jquery pagination多样式分页插件代码_files

style.css 7KB

demo.css 4KB

jquery.min(1).js 91KB

pagination.min.js 8KB

jquery.qrcode.min.js 14KB

index.html 25KB

hm.js 24KB

jquery.min.js 94KB

<!DOCTYPE html>  <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>index</title> <meta http-equiv="Expires" content="0"> <meta http-equiv="Cache" content="no-cache"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache"> <link rel="stylesheet" type="text/css" href="./style.css"> <script type="text/javascript" src="./jquery.min(1).js"></script> <script type="text/javascript" src="./pagination.min.js"></script> <style> .cib{ padding: 5px 8px; } .cib input{ vertical-align: bottom; height: 20px; color: #567e84; margin: 2px 0px; } .cib button{ vertical-align: bottom; height: 26px; cursor: pointer; background-color: #cbefff; border: 1px solid #44a8d6; color: #567e84; margin: 2px 0px; } .desc{ padding-left: 8px; color: #657e9a; } </style> </head> <body> <div class="desc">总页数为零时，不显示分页插件，可自定义显示文字及css</div> <div id="pagination_1"></div> <br> <div id="pagination_2"><div class="whj_jqueryPaginationCss-1"><div class="whj_border whj_padding whj_bgc whj_hoverDisable" name="whj_firstPage">first</div><div class="whj_border whj_padding whj_bgc whj_hoverDisable" name="whj_previousPage">previous</div><div class="whj_border whj_padding whj_bgc whj_checked" name="whj_page" data-page="1">1</div><div class="whj_border whj_padding whj_bgc whj_hover" name="whj_page" data-page="2">2</div><div class="whj_border whj_padding whj_bgc whj_hover" name="whj_page" data-page="3">3</div><div class="whj_border whj_padding whj_bgc whj_hover" name="whj_page" data-page="4">4</div><div class="whj_border whj_padding whj_bgc whj_hover" name="whj_page" data-page="5">5</div><div class="whj_border whj_padding whj_bgc whj_hover" name="whj_nextPage">next</div><div class="whj_border whj_padding whj_bgc whj_hover" name="whj_lastPage">last</div><select class="whj_border whj_bgc whj_hover" name="whj_pageSize"><option value="5" selected="">5/page</option><option value="10">10/page</option><option value="15">15/page</option><option value="20">20/page</option></select><div class="whj_padding whj_color">skip</div><input type="text" class="whj_border whj_color" name="whj_toPage"><div class="whj_border whj_padding whj_bgc whj_hover" name="whj_confirm">go</div><div class="whj_border whj_padding whj_bgc whj_hover" name="whj_refresh">refresh</div><div class="whj_padding whj_color">the total 18 pages</div></div></div> <br> <div id="pagination_3"><div class="whj_jqueryPaginationCss-1"><div class="whj_border whj_padding whj_bgc whj_hoverDisable" name="whj_firstPage">首页</div><div class="whj_border whj_padding whj_bgc whj_hoverDisable" name="whj_previousPage">上一页</div><div class="whj_border whj_padding whj_bgc whj_checked" name="whj_page" data-page="1">1</div><div class="whj_border whj_padding whj_bgc whj_hover" name="whj_page" data-page="2">2</div><div class="whj_border whj_padding whj_bgc whj_hover" name="whj_page" data-page="3">3</div><div class="whj_border whj_padding whj_bgc whj_hover" name="whj_page" data-page="4">4</div><div class="whj_border whj_padding whj_bgc whj_hover" name="whj_page" data-page="5">5</div><div class="whj_border whj_padding whj_bgc whj_hover" name="whj_nextPage">下一页</div><div class="whj_border whj_padding whj_bgc whj_hover" name="whj_lastPage">尾页</div><select class="whj_border whj_bgc whj_hover" name="whj_pageSize"><option value="5" selected="">5条/页</option><option value="10">10条/页</option><option value="15">15条/页</option><option value="20">20条/页</option></select><div class="whj_padding whj_color">跳至</div><input type="text" class="whj_border whj_color" name="whj_toPage"><div class="whj_border whj_padding whj_bgc whj_hover" name="whj_confirm">确认</div><div class="whj_border whj_padding whj_bgc whj_hover" name="whj_refresh">刷新</div><div class="whj_padding whj_color">共18页</div></div></div> <br> <div id="pagination_4"><div class="whj_jqueryPaginationCss-1"><div class="whj_border whj_padding whj_bgc whj_hoverDisable" name="whj_previousPage">上一页</div><div class="whj_border whj_padding whj_bgc whj_checked" name="whj_page" data-page="1">1</div><div class="whj_border whj_padding whj_bgc whj_hover" name="whj_page" data-page="2">2</div><div class="whj_border whj_padding whj_bgc whj_hover" name="whj_page" data-page="3">3</div><div class="whj_border whj_padding whj_bgc whj_hover" name="whj_page" data-page="4">4</div><div class="whj_border whj_padding whj_bgc whj_hover" name="whj_page" data-page="5">5</div><div class="whj_border whj_padding whj_bgc whj_hover" name="whj_nextPage">下一页</div><select class="whj_border whj_bgc whj_hover" name="whj_pageSize"><option value="5" selected="">5条/页</option><option value="10">10条/页</option><option value="15">15条/页</option><option value="20">20条/页</option></select><div class="whj_padding whj_color">跳至</div><input type="text" class="whj_border whj_color" name="whj_toPage"><div class="whj_border whj_padding whj_bgc whj_hover" name="whj_confirm">确认</div><div class="whj_border whj_padding whj_bgc whj_hover" name="whj_refresh">刷新</div><div class="whj_padding whj_color">共18页</div></div></div> <br> <div id="pagination_5"><div class="whj_jqueryPaginationCss-1"><div class="whj_border whj_padding whj_bgc whj_hoverDisable" name="whj_previousPage">上一页</div><div class="whj_border whj_padding whj_bgc whj_checked" name="whj_page" data-page="1">1</div><div class="whj_border whj_padding whj_bgc whj_hover" name="whj_page" data-page="2">2</div><div class="whj_border whj_padding whj_bgc whj_hover" name="whj_page" data-page="3">3</div><div class="whj_border whj_padding whj_bgc whj_hover" name="whj_page" data-page="4">4</div><div class="whj_border whj_padding whj_bgc whj_hover" name="whj_page" data-page="5">5</div><div class="whj_border whj_padding whj_bgc whj_hover" name="whj_nextPage">下一页</div><div class="whj_padding whj_color">跳至</div><input type="text" class="whj_border whj_color" name="whj_toPage"><div class="whj_border whj_padding whj_bgc whj_hover" name="whj_confirm">确认</div><div class="whj_border whj_padding whj_bgc whj_hover" name="whj_refresh">刷新</div><div class="whj_padding whj_color">共18页</div></div></div> <br> <div id="pagination_6"><div class="whj_jqueryPaginationCss-1"><div class="whj_border whj_padding whj_bgc whj_hoverDisable" name="whj_previousPage">上一页</div><div class="whj_border whj_padding whj_bgc whj_checked" name="whj_page" data-page="1">1</div><div class="whj_border whj_padding whj_bgc whj_hover" name="whj_page" data-page="2">2</div><div class="whj_border whj_padding whj_bgc whj_hover" name="whj_page" data-page="3">3</div><div class="whj_border whj_padding whj_bgc whj_hover" name="whj_page" data-page="4">4</div><div class="whj_border whj_padding whj_bgc whj_hover" name="whj_page" data-page="5">5</div><div class="whj_border whj_padding whj_bgc whj_hover" name="whj_nextPage">下一页</div><div class="whj_border whj_padding whj_bgc whj_hover" name="whj_refresh">刷新</div><div class="whj_padding whj_color">共18页</div></div></div> <br> <div id="pagination_7"><div class="whj_jqueryPaginationCss-1"><div class="whj_border whj_padding whj_bgc whj_hoverDisable" name="whj_previousPage">上一页</div><div class="whj_border whj_padding whj_bgc whj_checked" name="whj_page" data-page="1">1</div><div class="whj_border whj_padding whj_bgc whj_hover" name="whj_page" data-page="2">2</div><div class="whj_border whj_padding whj_bgc whj_hover" name="whj_page" data-page="3">3</div><div class=

评论收藏

内容反馈