js实现简单分页导航栏效果

前端  /  管理员 发布于 4年前   427

本文实例为大家分享了js实现分页导航栏效果的具体代码，供大家参考，具体内容如下

最终的效果: 

1. 分页需要的几个重要参数:

总记录条数: totalCount (查数据库)

每页记录数: pageSize  (自己设置)

总页数: totalPageNum  (根据上面的参数计算) 

当前页: currentPageNum (前台传入)

当前页要显示的内容 : List (查数据库: pageSize和currentPageNum每页的计算起始记录索引  

2. 在html页面中添加分页导航条的

3. 编写分页逻辑的js

4. 添加css样式

.page {  height: 34px;  line-height: 34px; }.page a { display: inline-block; border: 1px solid #ededed; padding: 0 12px; color: #3e3e3e;  font-size: 14px; font-family: tahoma,simsun; text-decoration: none; }.page a:hover {  color: #f40; border-color: #f40; }.page .active,.page .active:hover { color: #fff; background: #f40; border: solid 1px #f40;}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• vue.js 2.0实现简单分页效果
• vue+vuex+json-seiver实现数据展示+分页功能
• Vue.js结合bootstrap前端实现分页和排序效果
• 基于vue.js实现分页查询功能
• JS实现的简单分页功能示例
• JS 使用 window对象的print方法实现分页打印功能
• 基于vue.js实现的分页
• js简单的分页器插件代码实例