• 分页组件是试用Javascript动态创建分页dom，主要使用在于ajax数据交互的场景。
  • 在ul元素上定义了pagination类就可以启动分页组件。
实例

page1


<!-- HTML结构 -->
<nav class="pagination-box">
    <ul class="paginations" id="j-page-deom1"  data-total-pages="20"></ul>
</nav>

<!-- js -->
$('#j-page-deom1').on('select.bp.pagination', function(e, page) {
  $('#j-page-text1').html('page'+ page)
})


配置参数

  • pagination插件可以通过jQuery的$(selector).pagination(option)绑定
  • 也可以通过data-toggle="timer-picker"绑定全局插件，可以配置data-*配置项参数。
  • 注意属性的转换，需用中划线隔开大写字母，比如totalPages需写成data-total-pages
  • $(selector).pagination('go', page) 方法可以直接调用跳转到某页
  • $(selector).pagination('reset', option) 方法可以直接调用跳转到某页
  • $(selector).pagination('render', pages) 方法可以重新更新分页数
  • $(selector).on('select.bp.pagination', function(e, page) {}) 页面跳转触发
实例
属性 默认值 描述
items 0 总记录数
itemsOnPage 5 每页记录数
totalPages 0 总页数
visiblePages 5 显示页码区间长度
edges 1 边缘页码
currentPage 1 初始化当前页
pageStr { show: false, template: '' } 分页总码数字符
show - 是否显示
template 字符模板
disabledPages [] 不可用页码
prev '‹' 上一页文字
next '›' 下一页文字
first '«' 首页页码文字
last '»' 尾页文字
onSelectPage $.noop 选择页码切换后回调函数
  • 当我们设置禁用页码时，该页码将不可点击切换。
实例
            
$('#j-page-demo2').on('select.bp.pagination', function(e, page) {
  $('#j-page-text2').html('demo2-page'+ page)
})
//$('#j-page-demo2').pagination('reset', { disabledPages: [2, 5] })
$('#j-page-demo2').pagination('reset', { 
    currentPage: 2,
    disabledPages: (function() {
      var res = [], i = 0
      for(; i < 20; i++) {
        if(i % 5 === 0) res.push(i)
      }

      return res
    })()
})
  • 通过组合控件，更方便用户可以自定每页记录数或者直接跳转到某一页。
实例

page1


            
$('#j-page-demo3').on('select.bp.pagination', function(e, page) {
  $('#j-page-text3').html('demo3-page'+ page)
})

$('#j-page-demo3').pagination('reset', {
  items: 200,
  pageStr: {
    show: true
  }
})

// 控制跳转
$('#j-page-btn3').on('click', function() {
  var page = $.trim($('#j-page-input-3').val())
  if(page !== '') {
    $('#j-page-demo3').pagination('go', parseInt(page))
    $('#j-page-input-3').val('')
  }
})

// 每页记录数
$('#j-page-itempage-3').on('change', function() {
  var itemsOnPage = $(this).val()
  $('#j-page-demo3').pagination('reset', { itemsOnPage: itemsOnPage })
})