bs_pagination翻页插件

<%@page contentType="text/html;charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<base
    href="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/">
<meta charset="UTF-8">

<%-- jquery --%>
<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>

<%--bootstrap --%>
<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>

<%-- pagination plugin --%>
<link href="jquery/bs_pagination/jquery.bs_pagination.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery/bs_pagination/jquery.bs_pagination.min.js"></script>
<script type="text/javascript" src="jquery/bs_pagination/en.min.js"></script>

<script type="text/javascript">
    $(function(){
        
        var pageNo = 1;
        var pageSize = 5;
        var total = 37;
        // js中parseInt()函数用来取整
        var totalPages = (total % pageSize == 0 ? total / pageSize : parseInt(total / pageSize) + 1);
        
        $("#pagination").bs_pagination({
            // options
            currentPage: pageNo,    // 页码
            rowsPerPage: pageSize,    // 每页显示的记录条数
            maxRowsPerPage: 50,    // 每页最多显示的记录条数
            totalPages: totalPages, // 总页数
            totalRows: total,    // 总记录条数
            visiblePageLinks: 3, // 设置显示的卡片个数
            showGoToPage: true,
            showRowsPerPage: true,
            showRowsInfo: true,
            onChangePage : function(event , data){
                // 翻页时被调用。
                alert(data.currentPage + "," + data.rowsPerPage);
            }
        });
    });    
</script>

</head>
<body>
    <div id="pagination"></div>
</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值