BootStrap--CSS组件--分页(pagination)和翻页(pager)

几乎所有网站内容都需要分页显示,一个用户体验良好的分页组件会得到访问用户的良好评价。

//源码
.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 20px 0;
  border-radius: 4px;
}
.pagination > li {
  display: inline;
}
.pagination > li > a,
.pagination > li > span {
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.42857143;
  color: #337ab7;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #ddd;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
  margin-left: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.pagination > li:last-child > 
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery-pagination分页插件 1、引入pagination.css和jquery.pagination.js文件; 2、配置可参考jquery.pagination.js文件50行的配置默认参数,含参数注释; var defaults = { totalData: 0, //数据总条数 showData: 0, //每页显示的条数 pageCount: 9, //总页数,默认为9 current: 1, //当前第几页 prevCls: 'prev', //上一页class nextCls: 'next', //下一页class prevContent: '<', //上一页内容 nextContent: '>', //下一页内容 activeCls: 'active', //当前页选中状态 coping: false, //首页和尾页 isHide: false, //当前页数为0页或者1页时不显示分页 homePage: '', //首页节点内容 endPage: '', //尾页节点内容 keepShowPN: false, //是否一直显示上一页下一页 mode: 'unfixed', //分页模式,unfixed:不固定页码数量,fixed:固定页码数量 count: 4, //mode为unfixed时显示当前选中页前后页数,mode为fixed显示页码总数 jump: false, //跳转到指定页数 jumpIptCls: 'jump-ipt', //文本框内容 jumpBtnCls: 'jump-btn', //跳转按钮 jumpBtn: '跳转', //跳转按钮文本 callback: function () {} //回调 }; 3、使用: <link rel="stylesheet" href="./css/pagination.css"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script src="./js/jquery.pagination.js"></script> <ul id="filterTab"></ul> <script> function example(page, current = 1) { $('#filterTab').pagination({ totalData: page, //总页数 showData: showNum, //每页显示条数 coping: true, //首页和尾页 jump: true, //跳转至指定页数 current: current, //当前显示第几页 callback: function(api) { searchUsers(false, api.getCurrent()) //获取当前页 } }); }; </script>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值