最近開始接觸Bootstrap前端框架，在使用bootstrap+jquery實現表格數據分頁功能時，需要導入相關插件：bs_pagination-master。要使用該插件實現分頁，主要需要使用到其中的：jquery.bs_pagination.min.js 和 jquery.bs_pagination.css 兩個文件。但是，在各大網站找了大半天，要麼找不到這兩個文件，要麼找到了，卻無法下載，或者下載需要嘛金幣呀、積分呀.....哎......
千呼萬喚始出來 ...... 終於！！！在某處找到了此文件, 而且可以下載。
關於此插件的使用方法介紹如下：
一、引入bs_pagination用到的文件（HTML代碼）
<link rel="stylesheet" href="jquery.bs_pagination.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.bs_pagination.min.js"></script>
二、bs_pagination的漢化配置（JS代碼，源文件是文件包中的el.js文件）
/**
* bs_pagination simple localization - ENGLISH
*
* DO NOT CHANGE this file, as it will be overwritten in next update.
* To use different values, write and use a similar structure js file.
*
*/
var rsc_bs_pag = {
go_to_page_title: 'Go to page',
rows_per_page_title: 'Rows per page',
current_page_label: 'Page',
current_page_abbr_label: 'p.',
total_pages_label: 'of',
total_pages_abbr_label: '/',
total_rows_label: 'of',
rows_info_records: 'records',
// go_top_text: '«',
// go_prev_text: '←',
// go_next_text: '→',
// go_last_text: '»'
// 對以上四行進行漢化
go_top_text : '首頁',
go_prev_text : '上一頁',
go_next_text : '下一頁',
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分頁效果類似這樣：
插件默認配置是最多顯示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。