一、引入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插件出现的错误
本站声明：本站部分文章来自网络，由用户上传分享，如若内容侵犯了您的合法权益，可联系我们进行处理。文章仅供大家学习与参考,不**本站立场。
