分页插件——bs_pagination

一.效果

二.文档

官方文档：https://labs.pontikis.net/bs_pagination/docs/

三.操作步骤

3.1 引入开发包

• bootstrap.min.css
• jQuery.min.js
• bootstrap.min.js
• jquery.bs_pagination.min.css
• jquery.bs_pagination.min.js
• en.min.js（英化，可自行修改为汉语）

<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
<script type="text/javascript" src="jquery/bs_pagination-master/localization/en.min.js"></script>

有可能存在汉化不成的情况，可以将汉化包中的内容自行编写到<script>标签中!!! 如下：

<script type="text/javascript">
	//解决分页乱码
	var rsc_bs_pag = {
		go_to_page_title: '跳转到',
		rows_per_page_title: '每页显示',
		current_page_label: '页',
		current_page_abbr_label: 'p.',
		total_pages_label: 'of',
		total_pages_abbr_label: '/',
		total_rows_label: 'of',
		rows_info_records: '记录',
		go_top_text: '首页',
		go_prev_text: '上一页',
		go_next_text: '下一页',
		go_last_text: '尾页'
	};
</script>

3.2 创建容器

<div id="demo_pag1"></div>

3.3 当容器加载完成之后，对容器调用工具函数

$("#demo_pag1").bs_pagination({
	currentPage:pageNo,//当前页号,相当于pageNo

	rowsPerPage:pageSize,//每页显示条数,相当于pageSize
	totalRows:data.totalRows,//总条数
	totalPages: totalPages,  //总页数,必填参数.

	visiblePageLinks:5,//最多可以显示的卡片数

	showGoToPage:true,//是否显示"跳转到"部分,默认true--显示
	showRowsPerPage:true,//是否显示"每页显示条数"部分。默认true--显示
	showRowsInfo:true,//是否显示记录的信息，默认true--显示

	//用户每次切换页号，都自动触发本函数;
	//每次返回切换页号之后的pageNo和pageSize
	onChangePage: function(event,pageObj) { // returns page_num and rows_per_page after a link has clicked
		//js代码
		//alert(pageObj.currentPage);
		//alert(pageObj.rowsPerPage);
		queryActivityByConditionForPage(pageObj.currentPage,pageObj.rowsPerPage);
	}
});

补充：
    在js中可以通过通过选择器,选择当前的分页容器(div),通过bs_pagination方法可以当前对象的参数,两个形参,第一个为固定值,第二为对象中的属性名,从而得到属性的值()

$("#demo_pag1").bs_pagination("getOption","rowsPerPage")

例如：
    查询所有符合条件数据的第一页以及所有符合条件数据的总条数

queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));

    查询所有符合条件数据的当前页以及所有符合条件数据的总条数

queryActivityByConditionForPage($("#demo_pag1").bs_pagination('getOption', 'currentPage'),$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'));

end：想要了解更多，请去官方文档自行查询！！！！