pagination分页插件使用demo
作者:互联网
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String basePath = request.getScheme() + "://" +
request.getServerName() + ":" + request.getServerPort() +
request.getContextPath() + "/";
%>
<html>
<head>
<base href="<%=basePath%>"/>
<title>pagination插件使用</title>
<!-- 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>
<script type="text/javascript">
$(function() {
$("#demo_pag1").bs_pagination({
currentPage:1,//当前页号,相当于pageNo
totalPages: 100, // 总页数, 必填参数(计算得)
totalRows:1000, // 总条数
rowsPerPage:100, // 每页显示条数
visibility:5, //可以显示的显示的页面条数 1,2,3,4,5,6
showGoToPage: true, // 设置是否显示"跳转到"部分,默认true
showRowsPerPage: true, // 设置是否显示每页显示条数的信息 默认true
showRowsInfo: true, // 是否显示记录的条数
// 当用户每次切换页号都会自动触发本操作
// 每次返回换页之后的pageNo 和 pageSize ,由此可以通过这两个参数查询数据库
// limit (pageNo -1)*pageSize pageSize
onChangePage:function (event,pageObj) {
alert(pageObj.currentPage)
alert(pageObj.rowsPerPage)
}
});
});
</script>
</head>
<body>
<!-- Just create a div and give it an ID -->
<div id="demo_pag1"></div>
</body>
</html>
标签:插件,pageSize,pageNo,pageObj,demo,pagination,条数,true 来源: https://www.cnblogs.com/yfs1024/p/16272528.html