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

 一、引入bs_pagination用到的文件（HTML代码）

 二、bs_pagination的汉化配置（JS代码）

rsc_bs_pag.go_top_text = '首页'; 
rsc_bs_pag.go_prev_text = '上一页'; 
rsc_bs_pag.go_next_text = '下一页'; 
rsc_bs_pag.go_last_text = '末页'; 

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

$('#page').bs_pagination({ 
    totalPages:5,//总页数：由接口返回（AJAX） 
    currentPage:1,//当前页：由前端指定 
    visiblePageLinks:5,//显示的最多分页链接数 
    showGoToPage:false, 
    showRowsPerPage: false, 
    showRowsInfo: false, 
    showRowsDefaultInfo: false, 
    mainWrapperClass:'dataPage clearfix', 
    navListContainerClass:'', 
    navListClass:'pagination-sm pagination', 
    containerClass:'', 
    onChangePage:function(e,obj){//returns page_num and rows_per_page 
        //当分页被点击的时候，事件回调 
        //obj.currentPage;//获取点击对象里的当前页 
         
    } 
}); 

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

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

bootstrap分页效果1（不足5页的时候）

bootstrap分页效果2（超过5页的时候）

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

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

附：bs_pagination插件设置的默认参数（default setting）

var default_settings = { 
    currentPage: 1, 
    rowsPerPage: 10, 
    maxRowsPerPage: 100, 
    totalPages: 100, 
    totalRows: 0, 
     
    visiblePageLinks: 5, 
     
    showGoToPage: true, 
    showRowsPerPage: true, 
    showRowsInfo: true, 
    showRowsDefaultInfo: true, 
     
    directURL: false, // or a function with current page as argument 
    disableTextSelectionInNavPane: true, // disable text selection and double click 
     
    bootstrap_version: "3", 
     
    // bootstrap 3 
    containerClass: "well", 
     
    mainWrapperClass: "row", 
     
    navListContainerClass: "col-xs-12 col-sm-12 col-md-6", 
    navListWrapperClass: "", 
    navListClass: "pagination pagination_custom", 
    navListActiveItemClass: "active", 
     
    navGoToPageContainerClass: "col-xs-6 col-sm-4 col-md-2 row-space", 
    navGoToPageIconClass: "glyphicon glyphicon-arrow-right", 
    navGoToPageClass: "form-control small-input", 
     
    navRowsPerPageContainerClass: "col-xs-6 col-sm-4 col-md-2 row-space", 
    navRowsPerPageIconClass: "glyphicon glyphicon-th-list", 
    navRowsPerPageClass: "form-control small-input", 
     
    navInfoContainerClass: "col-xs-12 col-sm-4 col-md-2 row-space", 
    navInfoClass: "", 
     
    // element IDs 
    nav_list_id_prefix: "nav_list_", 
    nav_top_id_prefix: "top_", 
    nav_prev_id_prefix: "prev_", 
    nav_item_id_prefix: "nav_item_", 
    nav_next_id_prefix: "next_", 
    nav_last_id_prefix: "last_", 
     
    nav_goto_page_id_prefix: "goto_page_", 
    nav_rows_per_page_id_prefix: "rows_per_page_", 
    nav_rows_info_id_prefix: "rows_info_", 
     
    onChangePage: function() { // returns page_num and rows_per_page after a link has clicked 
    }, 
    onLoad: function() { // returns page_num and rows_per_page on plugin load 
    } 
} 

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

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

立即下载bs_pagination分页插件 （ps：来自我的云盘分享，当然你也可以上GitHub搜索下载）

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

本站声明：本站部分文章来自网络，由用户上传分享，如若内容侵犯了您的合法权益，可联系我们进行处理。文章仅供大家学习与参考,不**本站立场。

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z