详细笔记的第一遍：学习ssm的整合-CRUD的第5天（2021-11-25）2

20、新增_创建员工新增的模态框

现在是已经把员工的分页查询做完了，使用的是ajax版本。

详细笔记的第一遍：学习ssm的整合-CRUD的第5天（2021-11-25）2_mybatis


实现的效果就是：

点击分页条里面的任意一个按钮，都会查询对应页面的数据，并展示在表格里面。

整个系统的CRUD都是使用Ajax版本。不再进行页面的跳转了。
现在开始做新增。

预计功能：

1、点击新增按钮：

详细笔记的第一遍：学习ssm的整合-CRUD的第5天（2021-11-25）2_springmvc_02


2、弹出员工新增的对话框：

详细笔记的第一遍：学习ssm的整合-CRUD的第5天（2021-11-25）2_mybatis_03


部门数据，是要从数据库查出来，然后显示给用户去选择。

详细笔记的第一遍：学习ssm的整合-CRUD的第5天（2021-11-25）2_springmvc_04


填写完成之后点击保存，就会对数据入库。

详细笔记的第一遍：学习ssm的整合-CRUD的第5天（2021-11-25）2_mybatis_05


用户新增的逻辑

1、在index.jsp页面点击新增

2、弹出新增的对话框

3、去数据库里面查询部门列表，显示在新增对话框里面

4、用户输入完数据之后，完成保存。

这个对话框是bootstrap前端框架提供的模态框。

​​https://v3.bootcss.com/javascript/​​

详细笔记的第一遍：学习ssm的整合-CRUD的第5天（2021-11-25）2_springmvc_06

​​https://v3.bootcss.com/javascript/#modals​​

详细笔记的第一遍：学习ssm的整合-CRUD的第5天（2021-11-25）2_mybatis_07

详细笔记的第一遍：学习ssm的整合-CRUD的第5天（2021-11-25）2_数据_08

点击新增按钮，打开新增员工的模态框。
复制模板：

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

1、把这个代码粘贴到index.jsp页面的body标签的

详细笔记的第一遍：学习ssm的整合-CRUD的第5天（2021-11-25）2_springmvc_09


2、给新增按钮准备一个id

详细笔记的第一遍：学习ssm的整合-CRUD的第5天（2021-11-25）2_数据_10

<button class="btn btn-primary" id="emp_add_modal_btn">新增</button>

3、使用js触发新增模态框弹出。

也就是绑定新增button的点击事件：

详细笔记的第一遍：学习ssm的整合-CRUD的第5天（2021-11-25）2_bootstrap_11

$("#emp_add_modal_btn").click(function(){
        
        
    });

2、点击按钮之后，使用js的方式：触发模态框的弹出：

$("#emp_add_modal_btn").click(function(){
        //点击新增按钮，触发新增模态框的弹出，并设置一些属性
        $("#empAddModal").modal({
            //这个属性的意思：弹出的模态框永远置于屏幕顶部，就算鼠标点击其他地方，这个模态框也不会消失
            backdrop:"static"
        });

    });

详细笔记的第一遍：学习ssm的整合-CRUD的第5天（2021-11-25）2_bootstrap_12


详细笔记的第一遍：学习ssm的整合-CRUD的第5天（2021-11-25）2_mybatis_13


测试：

详细笔记的第一遍：学习ssm的整合-CRUD的第5天（2021-11-25）2_springmvc_14


详细笔记的第一遍：学习ssm的整合-CRUD的第5天（2021-11-25）2_数据_15


并且鼠标点击其他地方也不会消失。

总的index.jsp页面内容：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<html>
<head>
    <title>首页</title>
    <%
        pageContext.setAttribute("APP_PATH",request.getContextPath());
    %>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</head>
<body>
<!-- 员工新增按钮的模态框 -->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <%--显示标题--%>
    <div class="row">
        <div class="col-md-12">
            <h1>SSM_CRUD</h1>
        </div>
    </div>
    <%--按钮--%>
    <div class="row">
        <div class="col-md-4 col-md-offset-8">
            <button class="btn btn-primary" id="emp_add_modal_btn">新增</button>
            <button class="btn btn-danger">删除</button>
        </div>
    </div>
    <%--表格数据--%>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover" id="emps_table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>empName</th>
                        <th>email</th>
                        <th>gender</th>
                        <th>deptName</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>

            </table>
        </div>
    </div>
    <%--分页信息--%>
    <div class="row">
        <%--分页文字信息--%>
        <div class="col-md-6" id="page_info_area"></div>
        <%--分页条信息--%>
        <div class="col-md-6" id="page_nav_area">

        </div>
    </div>
</div>
<script type="text/javascript">
    $(function (){
        //首页加载结束就去第一页
       to_page(1);
    });
    function to_page(pn){
        $.ajax({
            url:"${APP_PATH}/emps",
            data:"pn="+pn,
            type:"GET",
            success:function (result) {
                // console.log(result);
                //1、解析员工数据：
                build_emp_table(result);
                //显示分页数据：
                build_page_info(result);
                //显示分页条数据
                build_page_nav(result);
            }
        });
    }
    //这个方法是用来显示员工数据的。
    function build_emp_table(result){
        $("#emps_table tbody").empty();
        var emps = result.extend.pageInfo.list;
        $.each(emps,function (index, item) {
            var empIdTd = $("<td></td>").append(item.empId);
            var empNameTd = $("<td></td>").append(item.empName);
            var genderTd = $("<td></td>").append(item.gender=='M'?"男":"女");
            var emailTd = $("<td></td>").append(item.email);
            var deptNameTd = $("<td></td>").append(item.department.deptName);

            var editBtnId = $("<button></button>")
                                    .addClass("btn btn-primary btn-sm")
                                    .append($("<span></span>").addClass("glyphicon glyphicon-pencil"))
                                    .append("编辑");

            var delBtnId = $("<button></button>")
                                    .addClass("btn btn-danger btn-sm")
                                    .append($("<span></span>").addClass("glyphicon glyphicon-trash"))
                                    .append("删除");

            var btnTd = $("<td></td>")
                                    .append(editBtnId)
                                    .append(" ")
                                    .append(delBtnId);

            $("<tr></tr>").append(empIdTd)
                            .append(empNameTd)
                            .append(emailTd)
                            .append(genderTd)
                            .append(deptNameTd)
                            .append(btnTd)
                            .appendTo("#emps_table tbody");
        });
    }

    //这个方法是用来显示分页信息的。
    function build_page_info(result){
        $("#page_info_area").empty();
        $("#page_info_area")
            .append("当前第"+result.extend.pageInfo.pageNum +"页，" +
                "总共"+ result.extend.pageInfo.pages+"页，" +
                "总共"+ result.extend.pageInfo.total+"条记录");
    }

    //这个方法是用来显示分页条数据的。并且绑定动作，可以具体跳到相应的页面。
    function build_page_nav(result){
        $("#page_nav_area").empty();
        //page_nav_area
        var ul = $("<ul></ul>").addClass("pagination");
        var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));

        var prePageLi = $("<li></li>").append($("<a></a>").append("«"));

        if(result.extend.pageInfo.hasPreviousPage == false){
            firstPageLi.addClass("disabled");
            prePageLi.addClass("disabled");
        }else{
            firstPageLi.click(function(){
                to_page(1);
            });

            prePageLi.click(function(){
                to_page(result.extend.pageInfo.pageNum - 1);
            });
        }
        var nextPageLi = $("<li></li>").append($("<a></a>").append("»"));

        var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));

        if(result.extend.pageInfo.hasNextPage == false){
            nextPageLi.addClass("disabled");
            lastPageLi.addClass("disabled");
        }else{
            nextPageLi.click(function(){
                to_page(result.extend.pageInfo.pageNum + 1);
            });

            lastPageLi.click(function(){
                to_page(result.extend.pageInfo.pages);
            });
        }
        //构造添加首页和前一页
        ul.append(firstPageLi).append(prePageLi);
        //遍历给ul添加页码提示
        $.each(result.extend.pageInfo.navigatepageNums,function(index,item){
            var numLi = $("<li></li>").append($("<a></a>").append(item ));
            if(result.extend.pageInfo.pageNum == item){
                numLi.addClass("active");
            }
            numLi.click(function(){
               to_page(item);
            });
            ul.append(numLi);
        });
        //最后添加下一页和末页提示。
        ul.append(nextPageLi).append(lastPageLi);
        //把ul添加到nav中
        var navEle = $("<nav></nav>").append(ul);
        navEle.appendTo("#page_nav_area");
    }

    $("#emp_add_modal_btn").click(function(){
        //点击新增按钮，触发新增模态框的弹出，并设置一些属性
        $("#empAddModal").modal({
            //这个属性的意思：弹出的模态框永远置于屏幕顶部，就算鼠标点击其他地方，这个模态框也不会消失
            backdrop:"static"
        });

    });

</script>
</body>
</html>

现在对于模态框的内容进行修改：

修改之前：

详细笔记的第一遍：学习ssm的整合-CRUD的第5天（2021-11-25）2_数据_16


想要的样子：

详细笔记的第一遍：学习ssm的整合-CRUD的第5天（2021-11-25）2_springmvc_17


修改之前模态框的代码：

<!-- 员工新增按钮的模态框 -->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

modal-body，模态框里面的内容。我们需要一个横排的表单：

详细笔记的第一遍：学习ssm的整合-CRUD的第5天（2021-11-25）2_mybatis_18


参考：

​​https://v3.bootcss.com/css/​​​​ https://v3.bootcss.com/css/#forms​​

详细笔记的第一遍：学习ssm的整合-CRUD的第5天（2021-11-25）2_数据_19


详细笔记的第一遍：学习ssm的整合-CRUD的第5天（2021-11-25）2_springmvc_20


拷贝模板代码：

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

直接将模板表单拷贝进modal-body。

详细笔记的第一遍：学习ssm的整合-CRUD的第5天（2021-11-25）2_mybatis_21


详细笔记的第一遍：学习ssm的整合-CRUD的第5天（2021-11-25）2_spring_22


对模板表单进行修改：

里面元素标签的name属性需要和Employee和Department属性名保持一致。

empName和email都是text类型。

gender是radio类型

默认选中男状态。

checked="checked"

deptName是下拉列表。

下拉列表这个组件的name=dId

详细笔记的第一遍：学习ssm的整合-CRUD的第5天（2021-11-25）2_springmvc_23

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

其中下拉列表里面的选项内容不能写死，需要从DB里面去查。
这个功能后面完善。

测试一下新增模态框效果：

详细笔记的第一遍：学习ssm的整合-CRUD的第5天（2021-11-25）2_spring_24

详细笔记的第一遍：学习ssm的整合-CRUD的第5天（2021-11-25）2_spring_25


发现deptName框有点长。

详细笔记的第一遍：学习ssm的整合-CRUD的第5天（2021-11-25）2_mybatis_26


详细笔记的第一遍：学习ssm的整合-CRUD的第5天（2021-11-25）2_springmvc_27


测试：

详细笔记的第一遍：学习ssm的整合-CRUD的第5天（2021-11-25）2_mybatis_28

模态框代码：

<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="myModalLabel">员工添加</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">empName</label>
                        <div class="col-sm-10">
                            <input type="text" name="empName" class="form-control" id="empName_add_input" placeholder="empName">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">email</label>
                        <div class="col-sm-10">
                            <input type="text" name="email" class="form-control" id="email_add_input" placeholder="email@qq.com">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">gender</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender1_add_input" value="M" checked="checked"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender2_add_input" value="F"> 女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">deptName</label>
                        <div class="col-sm-4">
                            <select class="form-control" name="dId">
                                <option>1</option>

                            </select>
                        </div>
                    </div>

                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

整体的index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<html>
<head>
    <title>首页</title>
    <%
        pageContext.setAttribute("APP_PATH",request.getContextPath());
    %>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</head>
<body>
<!-- 员工新增按钮的模态框 -->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="myModalLabel">员工添加</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">empName</label>
                        <div class="col-sm-10">
                            <input type="text" name="empName" class="form-control" id="empName_add_input" placeholder="empName">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">email</label>
                        <div class="col-sm-10">
                            <input type="text" name="email" class="form-control" id="email_add_input" placeholder="email@qq.com">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">gender</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender1_add_input" value="M" checked="checked"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender2_add_input" value="F"> 女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">deptName</label>
                        <div class="col-sm-4">
                            <select class="form-control" name="dId">
                                <option>1</option>

                            </select>
                        </div>
                    </div>

                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <%--显示标题--%>
    <div class="row">
        <div class="col-md-12">
            <h1>SSM_CRUD</h1>
        </div>
    </div>
    <%--按钮--%>
    <div class="row">
        <div class="col-md-4 col-md-offset-8">
            <button class="btn btn-primary" id="emp_add_modal_btn">新增</button>
            <button class="btn btn-danger">删除</button>
        </div>
    </div>
    <%--表格数据--%>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover" id="emps_table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>empName</th>
                        <th>email</th>
                        <th>gender</th>
                        <th>deptName</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>

            </table>
        </div>
    </div>
    <%--分页信息--%>
    <div class="row">
        <%--分页文字信息--%>
        <div class="col-md-6" id="page_info_area"></div>
        <%--分页条信息--%>
        <div class="col-md-6" id="page_nav_area">

        </div>
    </div>
</div>
<script type="text/javascript">
    $(function (){
        //首页加载结束就去第一页
       to_page(1);
    });
    function to_page(pn){
        $.ajax({
            url:"${APP_PATH}/emps",
            data:"pn="+pn,
            type:"GET",
            success:function (result) {
                // console.log(result);
                //1、解析员工数据：
                build_emp_table(result);
                //显示分页数据：
                build_page_info(result);
                //显示分页条数据
                build_page_nav(result);
            }
        });
    }
    //这个方法是用来显示员工数据的。
    function build_emp_table(result){
        $("#emps_table tbody").empty();
        var emps = result.extend.pageInfo.list;
        $.each(emps,function (index, item) {
            var empIdTd = $("<td></td>").append(item.empId);
            var empNameTd = $("<td></td>").append(item.empName);
            var genderTd = $("<td></td>").append(item.gender=='M'?"男":"女");
            var emailTd = $("<td></td>").append(item.email);
            var deptNameTd = $("<td></td>").append(item.department.deptName);

            var editBtnId = $("<button></button>")
                                    .addClass("btn btn-primary btn-sm")
                                    .append($("<span></span>").addClass("glyphicon glyphicon-pencil"))
                                    .append("编辑");

            var delBtnId = $("<button></button>")
                                    .addClass("btn btn-danger btn-sm")
                                    .append($("<span></span>").addClass("glyphicon glyphicon-trash"))
                                    .append("删除");

            var btnTd = $("<td></td>")
                                    .append(editBtnId)
                                    .append(" ")
                                    .append(delBtnId);

            $("<tr></tr>").append(empIdTd)
                            .append(empNameTd)
                            .append(emailTd)
                            .append(genderTd)
                            .append(deptNameTd)
                            .append(btnTd)
                            .appendTo("#emps_table tbody");
        });
    }

    //这个方法是用来显示分页信息的。
    function build_page_info(result){
        $("#page_info_area").empty();
        $("#page_info_area")
            .append("当前第"+result.extend.pageInfo.pageNum +"页，" +
                "总共"+ result.extend.pageInfo.pages+"页，" +
                "总共"+ result.extend.pageInfo.total+"条记录");
    }

    //这个方法是用来显示分页条数据的。并且绑定动作，可以具体跳到相应的页面。
    function build_page_nav(result){
        $("#page_nav_area").empty();
        //page_nav_area
        var ul = $("<ul></ul>").addClass("pagination");
        var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));

        var prePageLi = $("<li></li>").append($("<a></a>").append("«"));

        if(result.extend.pageInfo.hasPreviousPage == false){
            firstPageLi.addClass("disabled");
            prePageLi.addClass("disabled");
        }else{
            firstPageLi.click(function(){
                to_page(1);
            });

            prePageLi.click(function(){
                to_page(result.extend.pageInfo.pageNum - 1);
            });
        }
        var nextPageLi = $("<li></li>").append($("<a></a>").append("»"));

        var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));

        if(result.extend.pageInfo.hasNextPage == false){
            nextPageLi.addClass("disabled");
            lastPageLi.addClass("disabled");
        }else{
            nextPageLi.click(function(){
                to_page(result.extend.pageInfo.pageNum + 1);
            });

            lastPageLi.click(function(){
                to_page(result.extend.pageInfo.pages);
            });
        }
        //构造添加首页和前一页
        ul.append(firstPageLi).append(prePageLi);
        //遍历给ul添加页码提示
        $.each(result.extend.pageInfo.navigatepageNums,function(index,item){
            var numLi = $("<li></li>").append($("<a></a>").append(item ));
            if(result.extend.pageInfo.pageNum == item){
                numLi.addClass("active");
            }
            numLi.click(function(){
               to_page(item);
            });
            ul.append(numLi);
        });
        //最后添加下一页和末页提示。
        ul.append(nextPageLi).append(lastPageLi);
        //把ul添加到nav中
        var navEle = $("<nav></nav>").append(ul);
        navEle.appendTo("#page_nav_area");
    }

    $("#emp_add_modal_btn").click(function(){
        //点击新增按钮，触发新增模态框的弹出，并设置一些属性
        $("#empAddModal").modal({
            //这个属性的意思：弹出的模态框永远置于屏幕顶部，就算鼠标点击其他地方，这个模态框也不会消失
            backdrop:"static"
        });

    });

</script>
</body>
</html>