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>
---------------------------------------
//在js中可以通过通过选择器,选择当前的分页容器(div),通过bs_pagination方法可以当前对象的参数,两个形参,第一个为固定值,第二为对象中的属性名,从而得到属性的值()
$("#demo_pag1").bs_pagination("getOption","rowsPerPage")

__EOF__

本文作者：尼古拉斯_帅气
本文链接：https://www.cnblogs.com/yfs1024/p/16272528.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   yfs1024  阅读(114)  评论(0)  编辑  收藏  举报
相关博文：
· datatimepicker插件
· 前端三剑客基础入门(html css js)
· jQuery分页插件bs_pagination
· jquery分页插件am-pagination.js
· mybatis分页插件示例
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示