SSM:七、基于ajax对分页数据的前端显示

新建一个list_1.jsp，引入相应的jQuery文件和bootstrap文件。

本人在cdn远程引入相应的文件。

    <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js">script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js">script>

搭建html页面。

 <div class="container">
    
    <div class="row">
        <div class="col-md-12">
            <h2>员工的增删改查h2>
        div>
    div>

    
    <div class="row">
        <div class="col-md-4 col-md-offset-8">
            <button class="btn btn-primary">编辑button>
            <button class="btn btn-danger">删除button>
        div>
    div>

    
    <div class="row">
        <table class="table table-striped" id="emp_table">
            <thead>
            <tr>
                <th>IDth>
                <th>姓名th>
                <th>性别th>
                <th>emailth>
                <th>部门th>
                <th>操作th>
            tr>
            thead>
            <tbody>

            tbody>
        table>
    div>

    
    <div class="row">
        <!-分页的文字信息-->
        <div class="col-md-6" id="page_info">
        div>
        
        <div class="col-md-6 col-sm-offset-6" id="page_nav">
        div>
    div>
div>

用js脚本处理ajax请求，对后端的数据进行显示。

  $(function () {
            //第一次运行跳转首页
            to_Page(1)
        })
        function to_Page(pn) {
            $.ajax({
                type: "GET",
                url: "${APP_PATH}/emp",
                data:"pn=" + pn,
                success:function (result) {
                    console.log(result);
                    //1、解析并显示员工数据
                    build_table(result);
                    //2、解析并显示分页文本数据
                    build_info_page(result)
                    //3、解析并显示分页的导航信息
                    build_nav_page(result)
                }
            })
        }

解析表格信息

对表格的信息进行添加，将ajax发送的请求进行解析并显示。

 //解析表格信息
        function build_table(result) {
            $('#emp_table tbody').empty();
            var emp = result.extend.page.list;
            $.each(emp,function (index,item) {
              //添加table属性
                //td属性
                var EmpIdTd = $('').append(item.empId);
                var EmpNameTd = $('').append(item.empName);
                var GenderTd = $('').append(item.gender = 'M' ? '男' : '女');
                var EmailTd = $('').append(item.email);
                var DeptTd = $('').append(item.department.deptName);
                var editTd = $('').addClass('btn btn-primary btn-sm')
                    .append('').addClass('glyphicon glyphicon-pencil')
                    .append('编辑')
                var delTd = $('').addClass('btn btn-danger btn-sm')
                    .append('').addClass('glyphicon glyphicon-trash')
                    .append('删除')
                var buttonTd = $('').append(editTd).append(' ').append(delTd)

                $('').append(EmpIdTd)
                    .append(EmpNameTd)
                    .append(GenderTd)
                    .append(EmailTd)
                    .append(DeptTd)
                    .append(buttonTd)
                    .appendTo($("#emp_table tbody"));
            })
        }

解析分页的文本信息

  function build_info_page(result) {
            $('#page_info').empty();
            $('#page_info').append('当前页码为第'+result.extend.page.pageNum+'页，总'+result.extend.page.pages+'页,总共有'+result.extend.page.total+'条记录');
        }

分页的导航信息

对分页的导航栏的信息进行增删改。

        //分页的导航信息
        function build_nav_page(result) {
            $('#page_nav').empty();
           //加入分页相应的样式
            v分页的导航信息ar navEl = $('
')
            var navUl = $('
').addClass('pagination');
            //首页的样式
           var firstLi = $('
').append($('').attr('href','#').append('首页'));

           //上一页的样式
            var preLi = $('
').append($('').attr('href','#').append('«'));

            //给第一页和上一页添加disable属性
            if(result.extend.page.hasPreviousPage == false) {
                firstLi.addClass('disabled');
                preLi.addClass('disabled');
            }else{
                //给首页和前一页添加点击监听
                firstLi.click(function () {
                    to_Page(1);
                });
                preLi.click(function () {
                    to_Page(result.extend.page.pageNum - 1);
                })
            }

            //下一页的样式
            var LaLi = $('
').append($('').attr('href','#').append('»'));

           //尾页的样式
            var lastLi = $('
').append($('').attr('href','#').append('尾页'));

            //给尾页和下一页添加disable属性
            if(result.extend.page.hasNextPage == false) {
                LaLi.addClass('disabled');
                lastLi.addClass('disabled');
            }else {
                LaLi.click(function () {
                    to_Page(result.extend.page.pageNum + 1);
                })

                lastLi.click(function () {
                    to_Page(result.extend.page.total);
                })
            }
            navUl.append(firstLi).append(preLi);
            //页码数
            $.each(result.extend.page.navigatepageNums,function (index,item){
                //遍历的页码数item
                var numLi = $('
').append($('').attr('href','#').append(item))
                if(result.extend.page.pageNum == item) {
                    numLi.addClass('active');
                }
                numLi.click(function () {
                    to_Page(item)
                })
                navUl.append(numLi)
            })
            navUl.append(LaLi).append(lastLi)
            navEl.append(navUl).appendTo($('#page_nav'))
        }

三天没联系了，emmmm。不知道如何开口。