bs_pagination——基于bootstrap+jquery的分页插件bs_pagination的使用方法

如果我们的项目采用了bootstrap前端框架,可以考虑这款基于bootstrap+jquery的分页插件。本文将为你介绍该款分页插件的使用方法。

一、引入bs_pagination用到的文件(HTML代码)

  1. <link rel="stylesheet" href="jquery.bs_pagination.css"> 
  2. <script type="text/javascript" src="jquery.js"></script> 
  3. <script type="text/javascript" src="jquery.bs_pagination.min.js"></script> 

 二、bs_pagination的汉化配置(JS代码)

  1. rsc_bs_pag.go_top_text = '首页'
  2. rsc_bs_pag.go_prev_text = '上一页'
  3. rsc_bs_pag.go_next_text = '下一页'
  4. rsc_bs_pag.go_last_text = '末页'

三、bs_pagination()的使用方法(JS代码)

  1. $('#page').bs_pagination({ 
  2.     totalPages:5,//总页数:由接口返回(AJAX) 
  3.     currentPage:1,//当前页:由前端指定 
  4.     visiblePageLinks:5,//显示的最多分页链接数 
  5.     showGoToPage:false
  6.     showRowsPerPage: false
  7.     showRowsInfo: false
  8.     showRowsDefaultInfo: false
  9.     mainWrapperClass:'dataPage clearfix'
  10.     navListContainerClass:''
  11.     navListClass:'pagination-sm pagination'
  12.     containerClass:''
  13.     onChangePage:function(e,obj){//returns page_num and rows_per_page 
  14.         //当分页被点击的时候,事件回调 
  15.         //obj.currentPage;//获取点击对象里的当前页 
  16.          
  17.     } 
  18. }); 

说明:$('#page')里的page是我们的分页容器ID

最终的bootstrap分页效果类似这样:

bootstrap分页效果
bootstrap分页效果1(不足5页的时候)
 
bootstrap分页效果(超过5页的时候)
bootstrap分页效果2(超过5页的时候)

 

插件默认配置是最多显示5页。不足5页的时候如图1所示;超过5页的时候如图2所示,会出现首页、上一页、下一页、末页(文案完全可以自定义)!

 

----------------------------以下代码项目中无需引用----------------------------

附:bs_pagination插件设置的默认参数(default setting)

  1. var default_settings = { 
  2.     currentPage: 1, 
  3.     rowsPerPage: 10, 
  4.     maxRowsPerPage: 100, 
  5.     totalPages: 100, 
  6.     totalRows: 0, 
  7.      
  8.     visiblePageLinks: 5, 
  9.      
  10.     showGoToPage: true
  11.     showRowsPerPage: true
  12.     showRowsInfo: true
  13.     showRowsDefaultInfo: true
  14.      
  15.     directURL: false// or a function with current page as argument 
  16.     disableTextSelectionInNavPane: true// disable text selection and double click 
  17.      
  18.     bootstrap_version: "3"
  19.      
  20.     // bootstrap 3 
  21.     containerClass: "well"
  22.      
  23.     mainWrapperClass: "row"
  24.      
  25.     navListContainerClass: "col-xs-12 col-sm-12 col-md-6"
  26.     navListWrapperClass: ""
  27.     navListClass: "pagination pagination_custom"
  28.     navListActiveItemClass: "active"
  29.      
  30.     navGoToPageContainerClass: "col-xs-6 col-sm-4 col-md-2 row-space"
  31.     navGoToPageIconClass: "glyphicon glyphicon-arrow-right"
  32.     navGoToPageClass: "form-control small-input"
  33.      
  34.     navRowsPerPageContainerClass: "col-xs-6 col-sm-4 col-md-2 row-space"
  35.     navRowsPerPageIconClass: "glyphicon glyphicon-th-list"
  36.     navRowsPerPageClass: "form-control small-input"
  37.      
  38.     navInfoContainerClass: "col-xs-12 col-sm-4 col-md-2 row-space"
  39.     navInfoClass: ""
  40.      
  41.     // element IDs 
  42.     nav_list_id_prefix: "nav_list_"
  43.     nav_top_id_prefix: "top_"
  44.     nav_prev_id_prefix: "prev_"
  45.     nav_item_id_prefix: "nav_item_"
  46.     nav_next_id_prefix: "next_"
  47.     nav_last_id_prefix: "last_"
  48.      
  49.     nav_goto_page_id_prefix: "goto_page_"
  50.     nav_rows_per_page_id_prefix: "rows_per_page_"
  51.     nav_rows_info_id_prefix: "rows_info_"
  52.      
  53.     onChangePage: function() { // returns page_num and rows_per_page after a link has clicked 
  54.     }, 
  55.     onLoad: function() { // returns page_num and rows_per_page on plugin load 
  56.     } 

说明:由于它是基于bootstrap框架的分页插件,因此很多class命名来自bootstrap。

另外,上面英文写的很明确,在此就不翻译啦,不明白的同学可以在底下留言!

立即下载bs_pagination分页插件 (ps:来自我的云盘分享,当然你也可以上GitHub搜索下载)

相关阅读:关于使用bs_pagination插件出现的错误

 

相关经验

导读书签
书签初始化中…