关于 boostrap框架提供的日期插件datetimepicker和分页插件bs_pagination使用步骤


前端插件的使用步骤

1.引入开发包：.css、.js，拷贝到webapp目录下，在jsp页面引入开发包：link、script
注意：引入js包时在jsp页面必须先引入被依赖的 js，是有顺序的！！
2.创建容器：用来显示插件的运行结果，以及定位插件的显示视图的元素。input type=“text” 用于插件运行结果是一个单行字符串的情况，div 用于插件运行结果是一个html网页片段 。
3.当容器加载完成之后，对容器调用工具函数

dateTimePicker

有可能会出现中文乱码：
解决办法：
拷贝bootstrap-datetimepicker.min.js和bootstrap-datetimepicker.zh-CN.js两个js文件用文本编辑器打开，将文件另存为时选择“UTF-8+BOM”编码格式，再将文件拷贝到项目中覆盖掉原来的文件，使用maven启动Lifecycle插件下的clean、compile清空和重编译，再启动服务器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <%--导入开发包，注意先导入被依赖--%>
    <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    <link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js" ></script>
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js" ></script>
    <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js" ></script>
    <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"  ></script>
   
    <title>测试bs_datetimepicker插件</title>
    <script type="text/javascript">
        $(function () {
            //当页面加载完成，容器一定也已经加载完成，调用工具函数
            $("#birthday").datetimepicker({
                language:'zh-CN',//语言
                format:'yyyy-mm-dd',//日期格式
                minView:'month',//日期选择器上最小能选择的日期的视图
                initialDate:new Date(),// 日历的初始化显示日期，此处默认初始化当前系统时间
                autoclose:true,//选择日期之后，是否自动关闭日历
                todayBtn:true,//是否显示当前日期的按钮
                clearBtn:true//是否显示清空按钮
            });
        })
    </script>
</head>
<body>
<%--创建容器，这里使用单行字符串容器--%>
<input type="text" id="birthday" readonly>
</body>
</html>

bs_pagination

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <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 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>
    <title>演示分页插件</title>
    <script type="text/javascript">
        $(function() {

            $("#demo_pag1").bs_pagination({
                currentPage:1,//当前页

                rowsPerPage:10,//每页显示条数
                totalRows:1000,//总条数
                totalPages: 100,//总页数

                visiblePageLinks:5,//显示的翻页卡片数

                showGoToPage:true,//是否显示"跳转到第几页"
                showRowsPerPage:true,//是否显示"每页显示条数"
                showRowsInfo:true,//是否显示"记录的信息"

                //每次切换页号都会自动触发此函数，函数能够返回切换之后的页号和每页显示条数
                onChangePage: function(e,pageObj) { // returns page_num and rows_per_page after a link has clicked
                    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>