纯jquery如何实现分页效果？本篇文章给大家带来的内容是纯jquery实现简单的分页效果（代码实例）。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所助。
我们在前端页面开发过程中，如果一个页面显示的数据过多、页面过长，会让用户的体验感下降。这个时候，我们就需要把数据分成好几页来显示，也就是所谓的分页。
下面我们就通过简单的代码示例，为大家详细介绍用纯jquery实现一个前端超简单的分页效果！
css代码：
ul.pagination { display: inline-block; padding: 0; margin: 0;} ul.pagination li {display: inline;} ul.pagination li a { color: black; float: left; padding: 8px 16px; text-decoration: none; border: 1px solid blue;border-radius:3px;}.active{background-color: #7FFFAA;}
登录后复制
html代码：
最简单的分页
登录后复制
js脚本文件
1、引用Jquery和分页脚本
登录后复制
2、编写jquery.PageBar.js脚本
$().ready(function(){var curPage =$("#currentPage").val();var last =$("#totalPage").val();var page =Math.ceil(curPage/10);//调用绘制分页样式函数draw(page,curPage);//绑定点击页码事件$(document).on("click",".pagination li a",function(){var str =$(this).html();if(!isNaN(str)){//移除之前的active$(".pagination li a").removeClass("active");$(this).attr("class","active");$("#currentPage").val(str);}});//绑定下一页点击事件$(document).on("click","#nextPage",function(){var num =$(".active").html();var curPage =$("#currentPage").val();var last =$("#totalPage").val();var page =Math.ceil((parseInt(num))/10);if(num 上一页";$("#currentPage").val(curPage);if(page "+i+""}}else{var start =pageSize*(page-1)+1;var end =page*pageSize;if(page == totalPage){for(i=start; i"+i+""}}else{for(i=start; i"+i+""}}}}liStr +="
登录后复制下一页”;$(“.pagination”).append(liStr);}})
我们来看看效果图：
上图只是静态图片，没办法展示效果，大家可以自己动手试试效果。希望对需要的朋友有所帮助！
想要了解更多前端相关知识、获取跟多相关教程，可以访问：jQuery视频教程，jquery特效大全，bootstrap视频教程！
以上就是纯jquery实现简单的分页效果（代码实例）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2738613.html
