插件官网地址:Bootstrap Pagination | labs.pontikis.net
该分页插件依赖jQuery和Bootstrap框架,所以需要保证jQuery和Bootstrap框架依赖已经引入:
<link href="jquery/bootstrap_3.3.0/css/bootstrap.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>
导入下载好的分页插件依赖:
<%-- 分页插件依赖--%>
<link rel="stylesheet" type="text/css" href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css">
<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.js"></script>
因为分页插件没有提供汉化,所以需要手动翻译:
具体使用:
//对容器调用bs_pagination工具函数,显示翻页信息
jQuery("#demo_pag1").bs_pagination({
currentPage: beginNum,//当前页号,相当于pageNo
rowsPerPage: pageSize,//每页显示条数,相当于pageSize
totalRows: data.activityTotal,//总条数
totalPages: totalPages, //总页数,必填参数.
visiblePageLinks: 5,//最多可以显示的卡片数(分页栏页数)
showGoToPage: true,//是否显示"跳转到"部分,默认true--显示
showRowsPerPage: true,//是否显示"每页显示条数"部分。默认true--显示
showRowsInfo: true,//是否显示记录的信息,默认true--显示
//用户每次切换页号,都自动触发本函数;
//每次返回切换页号之后的beginNum和pageSize
onChangePage: function (event, pageObj) {
//每次页码改变的时候重新执行分页查询函数(传入刚刚改变的页码和每页条数)页码无改变不会触发
queryActivityByConditionForPage(pageObj.currentPage, pageObj.rowsPerPage);
}
});