• 单纯用JS做的分页插件


      最近公司需要用到分页插件,由于市面上大多都是jQuery的分页插件,而且项目中有自己的工具类,所以说我在工具类中又添加了不依赖jQuery的分页插件,而且分页插件来说对DOM的操作也不是很多,就是用JS来操作DOM还有有一点点蛋疼的,起码代码看上去不是特别的简洁美观。

       下面是插件的使用方法,这个是JS代码:

     1             pageUtil.initPage('page',{
     2                 totalCount:500,//总页数,一般从回调函数中获取。如果没有数据则默认为1页
     3                 curPage:1,//初始化时的默认选中页,默认第一页。如果所填范围溢出或者非数字或者数字字符串,则默认第一页
     4                 showCount:9,//分页栏显示的数量
     5                 pageSizeList:[5,10,15,20,25,30],//自定义分页数,默认[5,10,15,20,50]
     6                 defaultPageSize:10,//默认选中的分页数,默认选中第一个。如果未匹配到数组或者默认数组中,则也为第一个
     7                 isJump:true,//是否包含跳转功能,默认false
     8                 isPageNum:true,//是否显示分页下拉选择,默认false
     9                 isPN:true,//是否显示上一页和下一面,默认true
    10                 isFL:true,//是否显示首页和末页,默认true
    11                 jump:function(curPage,pageSize){//跳转功能回调,传递回来2个参数,当前页和每页大小。如果没有设置分页下拉,则第二个参数永远为0。这里的this被指定为一个空对象,如果回调中需用到this请自行使用bind方法
    12                     console.log(curPage,pageSize);
    13                 },
    14             });

       下面是html代码,page就是对应的id,如果不需要调整居中什么的话,就直接使用最简单的div就行了:

    1         <div style=" 100%;text-align: center;">
    2             <div id='page'></div>
    3         </div>

      下面就是效果图:

      

      这里基于简单的概念,所以我把样式都设置成了内联,如果需要更改颜色或者其他的样式,可能需要在js中更改或者使用Important强制覆盖,但是一般只需改一个颜色就行了,也不是特别的麻烦。

       具体代码怎么实现这里就不发了,有兴趣的同学可以下载代码看一下,这里是下载地址:http://pan.baidu.com/s/1mitDfnU,代码写的不好请勿喷····

  • 相关阅读:
    SQL CREATE DATABASE 语句
    SQL SELECT INTO 语句
    SQL UNION 和 UNION ALL 操作符
    复盘实战营一期毕业典礼----HHR计划----以太入门课--第一课
    抑郁研究所融资历程分享--以太一堂--直播课
    投资人分享答疑----HHR计划----以太直播课第三课
    重新理解《务实创业》---HHR计划--以太一堂第三课
    HHR计划---作业复盘-直播第三课
    电影推荐算法---HHR计划
    一堂优秀学员吕智钊分享----HHR计划----直播课第二课
  • 原文地址:https://www.cnblogs.com/cmxwt/p/7590709.html
Copyright © 2020-2023  润新知