基于EasyHelper的分页效果(原创)

所属分类:导航-分页

 29096  319  查看评论 (43)
分享到微信朋友圈
X
基于EasyHelper的分页效果(原创) ie兼容9

注:jQuery库,要求其最低版本不得低于3.2.0

使用方法

1. 引入样式文件:

<link rel="stylesheet" href="easyhelper.min.css">

2. 引入脚本文件:

// es6-shim 针对的是不支持 es6 语法的浏览器
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>
<script src="jquery.transit.min.js"></script>
<script src="es6-shim.min.js"></script>
<script src="easyhelper.min.js"></script>

3. 设置内容区域:    

<div id="content"></div>

4. 设置分页区域:

<div id="page"></div>

5. 调用分页代码:

// 调用分页功能 [ 基础版 ]
Helper.ui.page("#page-1", {
    total: 2000,
    pageSize: 10,
    change: function ( i ) {
        createContent( i, 0 );
    }
});

参数说明:

属性

说明

类型

默认值

total

数据总量

Number

0

pageSize

每页的数据量

Number

0

showTotal

是否在分页按钮左侧显示数据总量

Boolean

false

showTo

是否在分页按钮右侧显示直接跳转至某一页

Boolean

false

currentPage

默认处于哪一页

Number

1

change

页码发生变化时触发的函数,函数参数是变化后的页码

Function

空函数

相关插件-分页

jQuery仿淘宝分页插件(原创)

根据淘宝分页样式简洁美观功能全面兼容性好易用性好维护简单多个分页互不干扰的分页插件
  分页
 35311  351

超实用精简的分页插件

精简实用的分页插件跨域调用的聚合的api分页逻辑简单易懂接口已经写好
  分页
 30395  296

一款非常简洁漂亮方便调用的jQuery前端分页

一款非常简洁漂亮方便调用的jQuery前端分页,没有多余的JS和文件。
  分页
 94746  375

jQuery分页插件

根据获取内容显示不同页数并可输入页码跳转
  分页
 56363  528

讨论这个项目(43)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    ?林夕之梦? 0
    2019/4/13 17:05:46
    跳转页面需要按enter键才可执行,
        星空1
        2019/4/13 20:22:08
        您好,感谢您的反馈。对于手动输入页码数的情况下,是需要按下 enter 键才能跳转到相应的页码
    回复
    Dawn 0
    2019/3/29 9:12:53
    还想请问一下 最大分页数设为5页怎么修改哪个参数呀
        星空0
        2019/3/29 9:16:24
        可前往 http://easyhelper.applinzi.com/page/ui/page/ 查看相关参数
        Dawn0
        2019/3/29 9:20:46
        pageMaxCount不可以设置吗
        Dawn0
        2019/3/29 9:23:14
        一页最多显示的分页码 onepageMaxCount
        星空1
        2019/3/29 9:24:46
        暂无此参数,当前只能设置每页显示的数据量
        Dawn0
        2019/4/11 8:39:22
        你好 请问一下 咱的前端分页怎么和后端分页结合呢
    回复
    Dawn 0
    2019/3/28 15:42:20
    怎么改变点击分页按钮颜色? 急求 默认蓝色改为绿色
        星空0
        2019/3/28 15:44:54
        您好,感谢您的反馈。您可以通过重置样式中的 .helper-page-wrapper i.active{ background: 您的颜色 } 来实现。
        星空1
        2019/3/28 15:47:04
        您好,感谢您的反馈。您可以设置 .helper-page-wrapper i.active{background:颜色值}
        Dawn0
        2019/3/28 15:49:30
        感谢 我还有一个问题 触发按钮的页数颜色改哪个呀
        星空0
        2019/3/28 15:52:43
        您是指选中页码之后的数字颜色吗?
        Dawn0
        2019/3/28 15:53:45
        对的 鼠标移上数字的高亮显示
        星空1
        2019/3/28 15:55:47
        选中状态: .helper-page-wrapper i.active { color: | background: }
        鼠标悬浮: .helper-page-wrapper i:hover { color: }
        Dawn0
        2019/3/28 15:58:17
        很棒。十分感谢!
        Dawn0
        2019/3/29 9:12:05
        还想请问一下 最大分页数设为5页怎么修改哪个参数呀
    回复
    思途-龚建兴 0
    2019/1/21 17:20:59
    j.size is not a function 报这个错是什么情况啊? 以前用这个插件都没有这个问题,该引入的都引入了的诶!
        星空0
        2019/1/21 17:23:30
        您好,感谢您的反馈。能提供一下 demo 示例或控制台信息吗?以便于我快速定位问题所在。
        思途-龚建兴0
        2019/1/21 17:46:29
        不是插件问题,已解决
    回复
    sam先生 0
    2018/12/21 21:15:07
    咨询一个事情,插件整体不错,简单好用,但是个人觉得有个缺陷,举例:如果我翻页的时候也要带上条件去请求后台数据,回来数据总数目发生变化,change事件不能修改total
        星空1
        2018/12/21 21:26:31
        您好,感谢您的反馈。此插件当前还真不具备您所描述的功能,你可以先尝试:当点击某个页码时,在 change 事件中根据返回的最新数据重新绑定分页功能,以此来模拟实现您所说的功能。
    回复
    ???JustWait?? 0
    2018/12/6 18:09:12
    请问一下当前页码是哪个属性?
        星空0
        2018/12/6 18:11:39
        currentPage
    回复
    流沙 0
    2018/12/6 18:04:52
    当跳转到尾页数时,不是整十数,再点击最非整十的页码时,再点击上一页,页码数需要到整十时才会更新页码样式
        星空0
        2018/12/7 10:17:41
        感谢您的反馈,经测试确认了此bug,目前正在修复中......
    回复
    sumWe 0
    2018/11/28 9:52:04
    请问怎么设置只显示五个页号按钮,我把它的整体变大之后,只显示12345,然后到第六页就看不见了,怎么只显示到12345的页号
        星空0
        2018/12/7 11:49:16
        您好,感谢您的反馈,目前暂不支持自定义显示页码数的功能。
    回复
    触手12435465 0
    2018/11/23 11:00:53
    你好,我这个写完后在火狐下可以用,在ie下就不显示分页了,是怎么回事呀
        星空1
        2018/11/23 11:03:14
        您好,首先在 ie 下要引入 es6-shim 文件,其次不兼容 ie9-
        触手124354650
        2018/11/23 17:20:00
        哦 刚才发现了问题 是这样的 html下火狐和ie都能用 但在jsp下ie下就出不来了
    回复
    逆向。 0
    2018/11/7 10:46:35
    使用过程中发生了一种情况,这个插件放进div中,如果div隐藏后再显示,分页的页码就会失去宽度导致页码不显示
        星空1
        2018/11/7 11:00:27
        您好,感谢您的反馈!经测试确实存在这个问题,您目前可以暂时通过一种变通的方式来隐藏 div 容器,如:将 opacity 设置为 0,以此来模拟隐藏,这样的话分页按钮可以正常显示。后续我会升级整个 easyhelper 程序库,来解决发现的一些问题,谢谢!
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复