bootstrap_pagination插件使用

最新推荐文章于 2024-04-20 22:10:42 发布

终有弱水替沧海i

最新推荐文章于 2024-04-20 22:10:42 发布

阅读量587

点赞数 1

分类专栏： bootstrap 文章标签： bootstrap java 前端

本文链接：https://blog.csdn.net/qq_64431576/article/details/126392512

版权

bootstrap 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

分页插件：bootstrap_pagination
前端插件使用步骤：
1)引入开发包：.js,.css
下载开发包，拷贝到项目webapp目录下
把开发包引入到jsp文件中：<link><script>
2)创建容器：<input type="text"><div>
3)当容器加载完成之后，对容器调用工具函数.

以下是分页插件使用具体的测试实例

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <%--
        http://127.0.0.1:8080/crm/
        request.getScheme()用来获取协议
        request.getServerName()用来获取主机ip
        request.getServerPort()用来获取端口号
        request.getContextPath()用来获取资源跟路径
    --%>
    <base href="<%=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/"%>">
    <meta charset="UTF-8">
    <%--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插件--%>
    <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/zh-CN.js"></script>--%>

    <title>bs_pagination插件演示</title>
    <script type="text/javascript">
        //语言包
        let rsc_bs_pag = {
            go_to_page_title: '跳转到',
            rows_per_page_title: '每页显示',
            current_page_label: '页',
            current_page_abbr_label: 'p.',
            total_pages_label: 'of',
            total_pages_abbr_label: '/',
            total_rows_label: 'of',
            rows_info_records: '记录',
            go_top_text: '首页',
            go_prev_text: '上一页',
            go_next_text: '下一页',
            go_last_text: '尾页'
        };
        $(function (){
            $("#myDiv").bs_pagination({
                currentPage:2, //打开时显示到第几页，默认显示首页
                totalPages:34, //必须填，默认为100，表示显示多少页，应该自己算好再填
                totalRows:500, //数据总条数，默认1000
                visiblePageLinks: 10, //设置显示多少个按钮，默认为5
                showGoToPage: true,//是否显示“跳转到”部分，默认为true，表示显示
                showRowsInfo: true, //是否显示记录的信息，默认是true
                showRowsPerPage: true, //是否显示“每页显示条数”的部分，默认是true
                //用户每次切换页号都会执行本函数
                //该函数每次返回切换页号之后的pageNo和pageSize
                onChangePage:function (event,pageObj){
                  alert(event);
                  alert(pageObj.currentPage);//当前页面
                  alert(pageObj.rowsPerPage);//当前页面的数据条数
                },
                rowsPerPage:15 //每页显示的数据条数，默认为10条
            });
        });
    </script>
</head>
<body>
    <div id="myDiv"></div>
</body>
</html>