分页demo

最新推荐文章于 2022-05-13 11:43:36 发布
最新推荐文章于 2022-05-13 11:43:36 发布
阅读量97 收藏
点赞数
文章标签： javascript html vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Almee211/article/details/120049921
版权 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <table border=1 width="500" align="center">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
  <div class="pagination"></div>
</body>
<script>
  //创建一个构建函数
  function Page(classname, obj = {}) {
    //创建好需要操作的对象
    this.box = document.querySelector('.' + classname)
    //自己创建一个div来放置分页
    this.container = document.createElement('div')
    this.setStyle(this.container, {
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center'
    })
    // container中不允许选中文字
    this.container.onselectstart = () => false
    this.container.onmouseover = () => this.container.style.cursor = 'pointer';
    //将做好的分页放入大的盒子中
    this.box.appendChild(this.container)
    //根据default创建div
    //设置obj为空，是为了防止用户没有传任何参数，在循环遍历时报错
    this.obj = obj
    //给对象添加一个属性，用来放创建好的页码
    this.pageList = ''
    //定义了一个当前页
    this.currentPage = 1

    this.default = {
      showTextObj: {
        first: '首页',
        prev: '上一页',
        list: '',
        next: '下一页',
        last: '尾页'
      },
      pageData: {
        total: 1000,
        pageSize: 10
      }
    }
    //处理参数
    this.setParams()
        // 定义一个属性 - 用来接收传进来的obj中的函数
        this.show = obj.show || function(){}
    //设置总页码
    this.totalPage = Math.ceil(this.default.pageData.total / this.default.pageData.pageSize)
    //根据default创建div
    this.createDiv()
    //创建页码
    this.createPage()
    //点击实现页码切换
    this.click()
    //设置禁用项
    this.setDisabled()
    //设置文本框和按钮
    this.form()
    this.show(this.currentPage)
  }
  //添加文本框和按钮的方法
  Page.prototype.form = function () {
    //创建文本框和按钮放在container里
    var input = document.createElement('input')
    input.setAttribute('type', 'number')
    this.container.appendChild(input)
    this.setStyle(input, {
      height: '27px',
      width: '50px',
      'padding-left': '6px',
      outline: 'none',
      margin: '5px',
    })
    var btn = document.createElement('button')
    btn.innerText = 'GO'
    this.container.appendChild(btn)
    this.setStyle(btn, {
      height: '33px',
      margin: '5px',
      outline: 'none',
      'background-color': 'skyblue',
      border: 'none',
    })
  }
  //处理用户传进来的参数，有就用，没有就使用默认值
  Page.prototype.setParams = function () {
    //如果用户没有传值，就是undefined，不会遍历；有就遍历
    for (var attr in this.obj.showTextObj) {
      //将用户的参数替换掉默认的参数
      this.default.showTextObj[attr] = this.obj.showTextObj[attr]
    }
    for (var attr in this.obj.pageData) {
      //将用户的参数替换掉默认的参数
      this.default.pageData[attr] = this.obj.pageData[attr]
    }
  }
  //创建div的代码
  Page.prototype.createDiv = function () {
    for (var attr in this.default.showTextObj) {
      var div = document.createElement('div')
      div.className = attr
      div.innerText = this.default.showTextObj[attr]
      this.container.appendChild(div)
      if (attr !== 'list') {
        this.setStyle(div, {
          margin: '5px',
          padding: '1px',
          border: '1px solid black'
        })
      } else {
        this.pageList = div
        this.setStyle(div, {
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center'
        })
      }
    }
  }
  //设置样式函数
  Page.prototype.setStyle = function (ele, styleObj) {
    for (var attr in styleObj) {
      ele.style[attr] = styleObj[attr]
    }
  }
  //创建页码
  Page.prototype.createPage = function () {
    //根据总页码来判断页数显示
    //创建页码时，先把之前创建的删除
    this.pageList.innerHTML = ''
    //小于5页时
    if (this.totalPage <= 5) {
      this.createp(1, this.totalPage)
    } else {
      //大于5页时
      // 当前页是前两页
      if (this.currentPage <= 2) {
        this.createp(1, 5)
      }
      // 当前页是后两页
      else if (this.currentPage >= this.totalPage - 1) {
        this.createp(this.totalPage - 4, this.totalPage)
      } else {
        //当前页是中间页
        this.createp(this.currentPage - 2, this.currentPage + 2)
      }
    }
  }
  //根据初始值和结束值将创建p标签的代码进行封装
  Page.prototype.createp = function (start, end) {
    for (var i = start; i <= end; i++) {
      var p = document.createElement('p')
      p.innerText = i
      this.pageList.appendChild(p)
      this.setStyle(p, {
        margin: '5px',
        padding: '1px',
        border: '1px solid black'
      })
      if (this.currentPage == i) {
        p.style.backgroundColor = 'rgb(255,165,0)'
        p.style.color = '#000'
      }
    }
  }
  //设置禁用项
  Page.prototype.setDisabled = function () {
    //当前页为第一页时，首页和上一页就不能用了
    if (this.currentPage == 1) {
      this.container.children[0].setAttribute('disabled', true)
      this.container.children[1].setAttribute('disabled', true)
      //给禁用的按钮增加样式
      this.container.children[0].style.backgroundColor = '#ccc'
      this.container.children[1].style.backgroundColor = '#ccc'
    }
    else {
      //当当前页不是第一页，清除样式
      this.container.children[0].removeAttribute('disabled')
      this.container.children[1].removeAttribute('disabled')
      //给禁用的按钮增加样式
      this.container.children[0].style.backgroundColor = 'transparent'
      this.container.children[1].style.backgroundColor = 'transparent'
    }
    if (this.currentPage == this.totalPage) {
      //当前页为最后一页时，尾页和下一页就不能用了
      this.container.children[3].setAttribute('disabled', true)
      this.container.children[4].setAttribute('disabled', true)
      //给禁用的按钮增加样式
      this.container.children[3].style.backgroundColor = '#ccc'
      this.container.children[4].style.backgroundColor = '#ccc'
    } else {
      //当当前不是最后一页时，清楚样式
      this.container.children[3].removeAttribute('disabled')
      this.container.children[4].removeAttribute('disabled')
      //给禁用的按钮增加样式
      this.container.children[3].style.backgroundColor = 'transparent'
      this.container.children[4].style.backgroundColor = 'transparent'
    }
  }
  //设置点击事件
  Page.prototype.click = function () {
    this.container.onclick = () => {
      var e = window.event
      var target = e.target || e.srcElement
      //点击尾页，跳转到最后一页
      if (target.className === 'last' && target.getAttribute('disabled') !== 'true') {
        this.currentPage = this.totalPage
        this.createPage()
        this.setDisabled()
        this.show(this.currentPage)
      }
      //点击下一页，跳转
      else if (target.className === 'next' && target.getAttribute('disabled') !== 'true') {
        this.currentPage++
        this.createPage()
        this.setDisabled()
        this.show(this.currentPage)
      }
      //点击上一页，跳转
      else if (target.className === 'prev' && target.getAttribute('disabled') !== 'true') {
        this.currentPage--
        this.createPage()
        this.setDisabled()
        this.show(this.currentPage)
      }
      //点击首页，跳转到第一页
      else if (target.className === 'first' && target.getAttribute('disabled') !== 'true') {
        this.currentPage = 1
        this.createPage()
        this.show(this.currentPage)
      }
      //点击标签，进行跳转
      else if (target.tagName === 'P') {
        this.currentPage = +target.innerText
        this.createPage()
        this.setDisabled()
        this.show(this.currentPage)
      }
      //点击按钮进行跳转
      else if (target.tagName === 'BUTTON' && +target.previousElementSibling.value !== this.currentPage) {
        if (target.previousElementSibling.value < 1) {
          target.previousElementSibling.value = 1
        } else if (target.previousElementSibling.value > this.totalPage) {
          target.previousElementSibling.value = this.totalPage
        }
        this.currentPage = +target.previousElementSibling.value
        this.createPage()
        this.setDisabled()
        this.show(this.currentPage)
      }
    }
  }
  // //new一个对象，传参
  // var p = new Page('pagination', {
  //   // showTextObj: {
  //   //   first: '|<',
  //   //   prev: '<<',
  //   //   next: '>>',
  //   //   last: '>|'
  //   // },
  //   pageData: {
  //     total: 100,
  //     pageSize: 10
  //   }
  // })
  // 准备数据
var arr = [];
// 随机的姓
var firstName = '赵钱孙李周吴郑王冯陈褚卫蒋沈韩杨朱秦尤许何吕施张孔曹严华金魏陶姜戚谢邹喻柏水窦章云苏潘葛奚范彭郎鲁韦昌马苗凤花方俞任袁柳酆鲍史唐费廉岑薛雷贺倪汤滕殷罗毕郝邬安常乐于时傅皮卞齐康伍余元卜顾孟平黄和穆萧尹姚邵湛汪祁毛禹狄米贝明臧计伏成戴谈宋茅庞熊纪舒屈项祝董梁杜阮蓝闵席季麻强贾路娄危江童颜郭梅盛林刁钟徐邱骆高夏蔡田樊胡凌霍虞万支柯昝管卢莫';
var secondName = '天地玄黄宇宙洪荒日月盈昃辰宿列张寒来暑往秋收冬藏闰余成岁律吕调阳云腾致雨露结为霜金生丽水玉出昆冈剑号巨阙珠称夜光果珍李柰菜重芥姜海咸河淡鳞潜羽翔龙师火帝鸟官人皇始制文字乃服衣裳推位让国有虞陶唐吊民伐罪周发殷汤坐朝问道垂拱平章爱育黎首臣伏戎羌遐迩一体率宾归王鸣凤在竹白驹食场化被草木赖及万方盖此身发四大五常';
var thirdName = '人之初性本善性相近习相远苟不教性乃迁教之道贵以专昔孟母择邻处子不学断机杼窦燕山有义方教五子名俱扬养不教父之过教不严师之惰子不学非所宜幼不学老何为玉不琢不成器人不学不知义为人子方少时亲师友习礼仪香九龄能温席孝于亲所当执融四岁能让梨弟于长宜先知首孝悌次见闻知某数识某文一而十十而百百而千千而万三才者天地人三光者日月星三纲者君臣义父子亲夫妇顺曰春夏曰秋冬此四时运不穷曰南北曰西东此四方应乎中曰水火木金土此五行本乎数';
for(var i=0;i<1000;i++){
    // 创建一个对象放在arr中
    var obj = {
        id:i+1,
        name:firstName[Math.floor(Math.random() * firstName.length)] + secondName[Math.floor(Math.random() * secondName.length)] + thirdName[Math.floor(Math.random() * thirdName.length)],
        age:Math.floor(Math.random() * (80-18))+18,
        sex:'男女'[Math.floor(Math.random()*2)]
    }
    arr.push(obj)
}
// console.log(arr);

var pageSize = 8
new Page('pagination',{
    pageData:{
        total:arr.length,
        pageSize
    },
    show:function(currentPage){
        console.log(currentPage);
        /*
        1   0,10
        2   10,20
        3   20,30
        4   30,40
        */

        var brr = arr.slice((currentPage-1)*pageSize, currentPage*pageSize)
        // console.log(brr);
        // 显示页面中
        var str = '';
        brr.forEach(v=>{
            str += `
                <tr>
                    <td>${v.id}</td>
                    <td>${v.name}</td>
                    <td>${v.sex}</td>
                    <td>${v.age}</td>
                    <td>删除</td>
                </tr>
            `
        })
        document.querySelector('tbody').innerHTML = str;
    }
})
</script>

</html>

Almee211
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
分页实例-demo
06-01
分页demo
js分页demo
08-03
js分页的demo封装，详细讲述了js做页码切换，带有首页、尾页和输入框输入后的页码计算和跳转
最简单的分页Demo
weixin_61503139的博客
05-13 204
1.控制层 @PostMapping("/find") public Result find(int CurPage,int PageSize){ // 调用服务添加 PageInfo<CheckGroup> list=checkGroupService.find(CurPage,PageSize); return new Result(true, MessageConstant.ADD_CHECKGROUP_SUCCESS,list); } 2.se
关于分页的一个小demo
午后阳光的专栏
10-25 326
<span style="font-family:宋体;mso-ascii-font-family:"Times New Roman";mso-hansi-font-family:"Times New Roman"">分页的思路是很简单的，它的复杂在于页面传输的属性太多，很容易把人搞糊涂，造成这样那样的错误。 <p class="MsoNormal" style="margin
前端分页实现demo
09-13
前端分页实现思路，采用java在控制台输出，可替换相应的输出为html，即实现前端的分页输出，输出的页号只依赖与当前页号和总页数
一个doT分页的demo
dashao6757的博客
03-26 131
除了jQuery外，需要导入3个js，<script type="text/javascript" src="js/doT.min.js"></script> <script type="text/javascript" src="js/jquery.pagination.js"></script>...
jQuery分页Demo
02-26
jquery.pagination.js创建一个漂亮的分页条
网站分页demo
黎成诃月的博客
01-24 231
//分页     $("#page").paging({         pageNo:5,         totalPage: 9,         totalSize: 300,         callback: function(num) {             alert(num)         }     }) /* 分页样式 */ .page {h
简单的分页小demo
weixin_33895604的博客
08-16 88
public class Demo { public static void main(String[] args) { Scanner sc = new Scanner(System.in); System.out.println("请输入总记录数"); int total = sc.nextInt(); ...
java 分页demo
07-10
java分页完整damo，直接下载，可以在开发平台上运行
实现分页效果Demo
04-15
两个用UGUI实现的建议分页功能小Demo，其中一个使用了重新加载的方法，一个使用了摧毁重新创建的方法
js html动态分页
03-20
NULL 博文链接：https://cailin.iteye.com/blog/783376
能用漂亮分页控件及Demo源码
12-12
1、支持通过Url进行分页： AspNetPager除提供默认的类似于DataGrid和GridView的PostBack分页方式外，还支持通过Url进行分页，象大多数asp程序中分页一样， Url分页方式允许用户通过在浏览器地址栏中输入相应的地址即可直接进入指定页面，也可以使搜索引擎搜索到所有分页的页面的内容，因此具有用户友好和搜索引擎友好的优点，关于Url分页与PostBack分页方式的差异，请参考Url与PostBack分页方式的对比。 2、支持Url分页方式下的Url重写（UrlRewrite）功能 Url重写技术可以使显示给用户的Url不同于实际的Url，Url重写技术被广泛应用于搜索引擎优化（SEO）、网站重组后重定向页面路径以及提供用户友好的Url等方面， AspNetPager支持Url重写技术使您可以自定义分页导航的Url格式，实现Url重写； 3、支持使用用户自定义图片做为导航元素： 您可以使用自定义的图片文件做为分页控件的导航元素，而不仅仅限于显示文字内容。 4、功能强大灵活、使用方便、可定制性强： AspNetPager分页控件的所有导航元素都可以由用户进行单独控制，从6.0版起，AspNetPager支持使用主题（Theme）与皮肤（Skin）统一控件的整体样式，配合asp.net 2.0中的DataSource控件，AspNetPager只需要编写短短几行代码，甚至无需编写任何代码，只需设置几个属性就可以实现分页功能。 5、增强的 Visual Studio 2005/2008设计时支持 增强的设计时支持使控件在设计时更加直观，易于使用，开发快捷方便。 6、兼容IE6.0+及FireFox 1.5+等浏览器 7、丰富而完整的控件文档和示例项目： 控件附带的完整的帮助文档及示例项目能够帮助您快速上手，熟悉AspNetPager控件的使用，您还可以通过给作者留言以及论坛提问等方式解决控件使用中遇到的问题。 Demo的主要功能有： 基本功能 分页按钮属性效果 使用自定义信息区 居中当前页索引按钮 Repeater分页 DataList分页 Url分页 使用Url重写技术 Url逆向分页 N层结构应用 使用XML文件数据源 图片浏览示例 使用AccessDataSource 使用SqlDataSource 使用ObjectDataSource 自定义数据呈现逻辑 使用图片按钮 查询结果分页 查询结果Url分页 克隆属性及事件 页索引输入/选择框 自定义导航按钮 在用户控件中实现分页
分页查询Demo
Adger
04-15 590
前言 因为学了框架之后，前面知识，也是快忘记差不多了，我觉得框架这些东西你用来用去，还是用的别人的，你说你一直使用框架带来的便捷，但是你只会使用框架，我感觉你不能造出自己的框架，写原生的写多了，这些人觉得麻烦才会去写个框架用，避免重复造轮子，重复造轮子的意思是：重复造轮子就是指别人都已经写好了，有现成的可以用，不过那些框架的思想还是可取的，精髓，一直使用别人的框架，我感觉自己会做不出框架给别人用 ...
html分页器的实现原理,一个html分页器的demo
weixin_39530437的博客
05-31 278
String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";%>int defaultSizePerPage = 5;List films = (...
分页工具类demo
搬砖刘疯狂
01-05 617
此次demo是用的servlet+jsp+jdbc写的没有使用框架。mvc部分没有展示。 自己封装的分页工具类： package com.pagetest.utils; import java.util.ArrayList; import java.util.List; /** * @author liuzhe * */ public class PageHelper { //...
pagination分页插件demo
weixin_41571007的博客
06-05 928
直接上代码：        var size = 6; var count; $(function(){ Init(0); $("#Pagination").pagination(count, { num_edge_entries:3, //边缘页数 nu...
前端分页demo
qq_38387487的博客
12-20 647
分页                         .table{border:solid #FFAEB9; border-width:1px 0px 0px 1px;width: 100%;font-size: 12px;line-height: 21px;text-align:center;}           .table thead td{border:solid #FFAEB
SpringBoot2+Mybatis3+pagehelper分页demo
qxianx的博客
07-11 1167
两年多没碰spring框架，最近项目刚换了SpringBoot2+Mybatis+Vue前后端分离的架构；对于一些基本的设置做一些记录，这里的分页用到了插件pagehelper，具体步骤如下： 1 pom依赖，pagehelper 配置 1.1 pom添加pagehelper 依赖 <!-- https://mvnrepository.com/artifact/com.github...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值