分页器的使用-2 手写一个分页器

有时候项目中要求分页器样式自定义时，就需要自己去手写一个分页器了，怎么做呢，直接上代码，具体详情已经在注释里写清楚了。

注意：1. currentPage、count、pageCount为全局变量2. downloadData()函数第一次执行时，并不去进行if语句判断，自己看代码时可以直接从ajax请求看，因为if判断语句时在第二次执行时，也就是点击页码元素，进行回调时才执行的。3.downloadData(currentPage)  这个函数执行时，第一次传进去的是1。

我只用到了接口js文件和jquery的js文件，逻辑处理全部为自己手写。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><style>body{margin: 0;padding: 0;}ul,li{list-style: none;padding: 0;}.pagination-box li.active{background-color: #ccc;}.pagination-box{display: flex;}.pagination-box li{border: 1px solid black;padding: 3px;margin-left: 3px;cursor:pointer;}</style></head><body><section><ul class="tableview"></ul><ul class="pagination-box"></ul></section><script src="js/interface.js" type="text/javascript" charset="utf-8"></script><script src="lib/jquery/jquery.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">//定义当前页为1var currentPage = 1;//一页显示10条数据var count = 10;//总页数默认为0var pageCount = 0;// 下载数据，有一个形参，第一次执行函数时传进来的是1，在点击点击页码回调函数时表示拿到的页码元素的id值，function downloadData(page) {// 一下if语句都是在回调时候才判断的，// 首先定义一个新页面变量，把拿到的元素标签的id值赋给这个newPagevar newPage = 0;//first  表示点击的是首页这个标签if (page == 'first') {// 把1赋给newPage newPage = 1}//last  末页else if (page == 'last') {// 把最后一页赋给newPage   此时的 pageCount已经从数据中计算出总页码了newPage = pageCount}//prev 上一页else if (page == 'prev') {// 把当前页减去1newPage = currentPage - 1// 如果当前页-1小于1，则等于1if (newPage < 1) {newPage = 1}}//next 下一页else if (page == 'next') {newPage = currentPage + 1// 如果当前页+1大于总页数，则等于总页数if (newPage > pageCount) {newPage = pageCount}}//1~6  点击1~6时候，直接把拿到的id值，传给newPage即可，就是表示要跳转的页数else {newPage = page}// 如果总页数不为0 并且 新页码等于当前页码，退出  也就是在第二页时，你又点了一下2，则不做任何操作if (pageCount != 0 && newPage == currentPage) {console.log("页面未变")return}// 把新页码，赋给当前页码  当第一次加载DOM层结构时，传进来的是1，所这句话以及上面的if都没执行currentPage = newPage// start变量表示url接口里的start数据，表示开始页 因为第一页接口里我定义的start = 0，通过currentPage计算出来就行了var start = (currentPage - 1) * count// url接口var url = readListUrl + "&start=" + start + "&count=" + count// console.log("url =" + url)// ajax请求$.getJSON(url, {}, function(data) {// console.log(data)var list = data.data//显示内容  遍历数据显示在页面上var htmlContent = ""for (var index in list) {var item = list[index]htmlContent += "<li>" + item.title + "</li>"}$(".tableview").html(htmlContent)// 计算总页数  通过接口里的total值去计算var total = data.totalpageCount = Math.ceil(total / count)// console.log("pageCount=" + pageCount)//页码的html$(".pagination-box").html("")$(".pagination-box").append("<li id='first'>首页</li>")$(".pagination-box").append("<li id='prev'>上一页</li>")//遍历页码lifor (var i = 1; i <= pageCount; i++) {//当前页等于第i个页码时，给这个页码li标签添加一个样式为active，变色if (i == currentPage) {$(".pagination-box").append("<li id='" + i + "' class='active'>" + i + "</li>")} else {$(".pagination-box").append("<li id='" + i + "' >" + i + "</li>")}}$(".pagination-box").append("<li id='next'>下一页</li>")$(".pagination-box").append("<li id='last'>尾页</li>")//添加点击事件$(".pagination-box li").on("click", function() {// 当点击哪一个的时候，拿到页码li的id，传出去，var id = $(this).attr("id")// console.log("click id=" + id)// 这时候又去回调这个函数，就会执行if语句了，downloadData(id)})})}downloadData(currentPage)</script></body>
</html>

效果如下：

分页器的使用-2 手写一个分页器相关推荐

手写一个简单的分页器
封装分页器 1. 前言分页器基本上是任何网站必须要有的一个组件,为什么需要分页器,当后台传入了大量的数据,那么在前端拿到数据,如果直接展示很有可能或造成卡顿,同时消耗过多的内存,给用户带来的浏览效果 ...
【干货】JDK动态代理的实现原理以及如何手写一个JDK动态代理
动态代理代理模式是设计模式中非常重要的一种类型,而设计模式又是编程中非常重要的知识点,特别是在业务系统的重构中,更是有举足轻重的地位.代理模式从类型上来说,可以分为静态代理和动态代理两种类型. 在解 ...
vue @click 赋值_vue 手写一个时间选择器
vue 手写一个时间选择器最近研究了 DatePicker 的实现原理后做了一个 vue 的 DatePicker 组件,今天带大家一步一步实现 DatePicker 的 vue 组件. 原理 Da ...
肝一波 ~ 手写一个简易版的Mybatis，带你深入领略它的魅力！
零.准备工作 <dependencies><dependency><groupId>mysql</groupId><artifactId>m ...
硬核！手写一个优先队列
文章收录在首发公众号:bigsai 期待你的到访! 前言事情还要从一个故事讲起: 对于上面那只可爱的小狗狗不会,本篇即为该教程,首先,我要告诉这只可爱的小狗狗,这种问题你要使用的数据结构为优先队列, ...
ds查找—二叉树平衡因子_面试官让我手写一个平衡二叉树，我当时就笑了
平衡二叉树对于初学者一直是一个比较复杂的知识点,因为其里面涉及到了大量的旋转操作.把大量的同学都给转晕了.这篇文章最主要的特点就是通过动画的形式演示.确保大家都能看懂.最后是手写一个平衡二叉树. 一. ...
俄罗斯小方块游戏html,通过h5的canvas手写一个俄罗斯方块小游戏
开始自己手写一个好玩的俄罗斯方块吧,上变形,左右移动,下加速,空格瞬移等功能,无聊的时候学习下canvas,f12 修改分数,体验金手指的快乐吧 1.定义界面,和按钮上下左右 2.js部分 1 ...
vue 使用fs_模仿vue-cli，手写一个脚手架
vue-cli 在vue的开发的过程中,经常会使用到vue-cli脚手架工具去生成一个项目.在终端运行命令vue create hello-world后,就会有许多自动的脚本运行. 为什么会这样运行呢 ...
未能加载文件或程序集或它的某一个依赖项_手写一个miniwebpack
前言之前好友希望能介绍一下 webapck 相关的内容,所以最近花费了两个多月的准备,终于完成了 webapck 系列,它包括一下几部分: webapck 系列一:手写一个 JavaScript 打 ...

分页器的使用-2 手写一个分页器

分页器的使用-2 手写一个分页器相关推荐

最新文章

热门文章