网站
使用步骤
1.引入开发包
下载插件
<%
String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<base href="<%=basePath %>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>演示分页插件的使用</title>
</head>
<!-- It is a good idea to bundle all CSS in one file. The same with JS -->
<!-- JQUERY -->
<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<!-- BOOTSTRAP -->
<link rel="stylesheet" type="text/css" href="jquery/bootstrap_3.3.0/css/bootstrap.min.css">
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<!-- PAGINATION plugin -->
<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>
2.创建容器< div >
<div id="demo_pag1"></div>
3.当容器加载完成之后,对容器调用工具函数
$(function() {
$("#demo_pag1").bs_pagination({
totalPages: 100
});
});
参数分析
totalPages :总页数 没有默认值必须填
currentPage 当前页号 默认为1 相当于以前的pageNo
rowsPerPage: 每页显示的条数 相当于以前的pageSize
totalRows: 总条数 默认1000
visiblePageLinks : 最多可以显示的卡片数 默认为5
showGoToPage:是否显示 跳转到第几页 默认为true
showRowsPerPage: 是否显示每页显示条数 默认为true
showRowsInfo是否显示记录的信息 默认为true
onChangePage: function() { }, 当用户每次切换页号时都会触发的事件,
每次也可以返回切换页号之后的pageSize和pageNo可以 接收onChangePage: function(event,pageObj) { } pageObj里面包含了翻页的所有信息 例如 pageObj.currentPage pageObj.rowsPerPage
$(“#element_id”).bs_pagination(‘getOption’, ‘option_name’); 可以获取分页条中的信息 其中第一个参数固定 第二个参数就是你想获取的值
例如
$(“#element_id”).bs_pagination(‘getOption’, ‘rowsPerPage’)