SSM项目用ajax来显示数据

 <script type="text/javascript">
             //1:页面加载完成后，直接去发送ajax请求，要到分页的数据
             $(function(){
                 $.ajax({
                     url:"${APP_PATH}/emps",
                     data:"pn=1",
                     type:"GET",
                     success:function(result){
                         //1:解析并显示员工数据。
                         build_emps_table(result);
                     }
                 });
             });

             function build_emps_table(result){
　　　　　　　　　　　　//result是一个返回结果集。数据是在Controller层的时候就返回的是一个JSON对象。然后页面上直接取出来就行了。
                 var emps=result.map.pageInfo.list;
　　　　　　　　　　　　//ajax的foreach遍历。
                 $.each(emps,function(index,item){
                     //$("<td></td>")这是创建一个<td>标签。<th>表示行。<td>表示列。
                     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);
                     /**
                     <button class="">
                                         <span class="" aria-hidden="true"></span>
                                         编辑
                                     </button>
                     */
                     var editBtn=$("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
                                             .append($("<span></span>").addClass("glyphicon glyphicon-pencil"))
                                             .append("编辑");
                     var delBtn =  $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
                             .append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");
                     var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
                     //先在<tbody>下创建<tr>标签。然后创建的<td>标签追加到<tr>的后面。
                     $("<tr></tr>").append(empIdTd)
                                 .append(empNameTd)
                                 .append(genderTd)
                                 .append(emailTd)
                                 .append(deptNameTd)
                                 .append(btnTd)
                                 .appendTo("#emps_table tbody");

                 });
             }

48         </script>

 PageHelper.startPage(pn, 5);
         // startPage后面紧跟的这个查询就是一个分页查询
         List<Employee> emps = employeeService.getAllEmployees();
         // 使用pageInfo包装查询后的结果，只需要将pageInfo交给页面就行了。
         // 封装了详细的分页信息,包括有我们查询出来的数据，传入连续显示的页数
         PageInfo page = new PageInfo(emps, 5);
         return Msg.success().add("pageInfo", page);

map是我们写的JSON类中，用来存储返回结果集的。Controller中的数据是直接返回的是这个JSON的类。

pageInfo是保存处理后的数据。

 package com.ssm.curd.bean;

 import java.util.HashMap;
 import java.util.Map;

 /*
  * 通用的返回类
  */
 public class Msg {

     //返回码，100表示成功。200表示失败
     private int code;
     //提示信息
     private String msg;
     //用户要返回的数据
     private Map<String, Object> map=new HashMap<String, Object>();

     public int getCode() {
         return code;
     }
     public void setCode(int code) {
         this.code = code;
     }
     public String getMsg() {
         return msg;
     }
     public void setMsg(String msg) {
         this.msg = msg;
     }
     public Map<String, Object> getMap() {
         return map;
     }
     public void setMap(Map<String, Object> map) {
         this.map = map;
     }

     //100的返回
     public static Msg success(){
         Msg result = new Msg();
         result.setCode(100);
         result.setMsg("处理成功");
         return result;
     }
     public static Msg fail(){
         Msg result = new Msg();
         result.setCode(200);
         result.setMsg("处理失败");
         return result;
     }

     public Msg add(String key,Object value){
         this.getMap().put(key, value);
         return this;
     }
 }

2：ajax中分页条的添加

代码实现：

 //显示分页条信息
             /*
             *<nav aria-label="Page navigation">
               <ul class="pagination">
                 <li>
                   <a href="#" aria-label="Previous">
                     <span aria-hidden="true">&laquo;</span>
                   </a>
                 </li>
                 <li><a href="#">1</a></li>
                 <li><a href="#">2</a></li>
                 <li><a href="#">3</a></li>
                 <li><a href="#">4</a></li>
                 <li><a href="#">5</a></li>
                 <li>
                   <a href="#" aria-label="Next">
                     <span aria-hidden="true">&raquo;</span>
                   </a>
                 </li>
               </ul>
             </nav>
             */
             function build_page_fenyetiao(result){
                 var ul=$("<ul></ul>").addClass("pagination");
                 //1:定义首页
                 var frist=$("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
                 //2:定义前一页
                 var qianYiYe=$("<li></li>").append($("<a></a>").append("&laquo;"));
                 //在ul下添加首页和前一页的信息。
                 ul.append(frist).append(qianYiYe);
                 //3:定义分页条
                 $.each(result.map.pageInfo.navigatepageNums,function(index,item){
                     var numLi=$("<li></li>").append($("<a></a>").append(item));
                     ul.append(numLi);
                 });
                 //4:定义后一页
                 var houYiYe=$("<li></li>").append($("<a></a>").append("&raquo;"));
                 //5:定义末页
                 var last=$("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
                 //把后一页和末页也添加上。
                 ul.append(houYiYe).append(last);
                 //定义nav标签。并添加上ul标签
                 var nav=$("<nav></nav>").append(ul);
　　　　　　　　　　//添加到div中的id属性。
                 nav.appendTo("#page_fenyetiao");
             }

<!-- 分页 -->
        <div class="row">
            <div class="col-md-6" align="center" id="page_xinxi"></div>
            <div class="col-md-6" align="center" id="page_fenyetiao"></div>
        </div>
        </div>

3:完整的分页，技术点

　　1）：每次构建的时候，都要清空。

　　2）：如果 第一页的话，上一页的框和首页不能被选定。最后一页的话，下一页的框和末页不能被选定。

　　3）：翻页。给翻页的按钮加上一个事件。.click(); 上一页的话，pageInfo中的pageNum-1；下一页pageInfo中的pageNum+1;

 //进来后先进入第一页
         $(function(){
             to_page(1);
         });
         function to_page(pn){
             $.ajax({
                 url:"${APP_PATH}/emps",
                 data:"pn="+pn,
                 type:"GET",
                 success:function(result){
                     //1:解析并显示员工数据。
                     build_emps_table(result);
                     //分页信息
                     build_page_nav(result);
                     //分页条信息。
                     build_page_fenyetiao(result);
                 }
             });
         }

             //这个方法是显示所有员工数据的。
             function build_emps_table(result){
                 //每次构建的时候都要清空数据。
                 $("#emps_table tbody").empty();
                 var emps=result.map.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);
                     /**
                     <button class="">
                                         <span class="" aria-hidden="true"></span>
                                         编辑
                                     </button>
                     */
                     var editBtn=$("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
                                             .append($("<span></span>").addClass("glyphicon glyphicon-pencil"))
                                             .append("编辑");
                     var delBtn =  $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
                             .append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");
                     var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
                     //先在<tbody>下创建<tr>标签。然后创建的<td>标签追加到<tr>的后面。
                     $("<tr></tr>").append(empIdTd)
                                 .append(empNameTd)
                                 .append(genderTd)
                                 .append(emailTd)
                                 .append(deptNameTd)
                                 .append(btnTd)
                                 .appendTo("#emps_table tbody");

                 });
             }
             //这个方法是显示分页信息的。
             function build_page_nav(result){
                 //每次构建前，都要清空。
                 $("#page_xinxi").empty();
                 $("#page_xinxi").append("当前"+result.map.pageInfo.pageNum+"页，总"+
                         result.map.pageInfo.pages+"页，总"+
                         result.map.pageInfo.total+"条"
                         );
             }

             //显示分页条信息
             /*
             *<nav aria-label="Page navigation">
               <ul class="pagination">
                 <li>
                   <a href="#" aria-label="Previous">
                     <span aria-hidden="true">&laquo;</span>
                   </a>
                 </li>
                 <li><a href="#">1</a></li>
                 <li><a href="#">2</a></li>
                 <li><a href="#">3</a></li>
                 <li><a href="#">4</a></li>
                 <li><a href="#">5</a></li>
                 <li>
                   <a href="#" aria-label="Next">
                     <span aria-hidden="true">&raquo;</span>
                   </a>
                 </li>
               </ul>
             </nav>
             */
             function build_page_fenyetiao(result){
                 //每次构建的时候都要清空。只显示想要展示的数据。
                 $("#page_fenyetiao").empty();
                 var ul=$("<ul></ul>").addClass("pagination");

                 //1:定义首页
                 var frist=$("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
                 //设置跳转到首页

                 //2:定义前一页
                 var qianYiYe=$("<li></li>").append($("<a></a>").append("&laquo;"));
                 //去判断是否有前一页，如果有前一页，不可以选定。
                 if(result.map.pageInfo.hasPreviousPage == false){
                     frist.addClass("disabled");
                     qianYiYe.addClass("disabled");
                 }else{
                     frist.click(function(){
                         to_page(1);
                     });
                     qianYiYe.click(function(){
                         to_page(result.map.pageInfo.pageNum-1);
                     });
                 }
                 //在ul下添加首页和前一页的信息。
                 ul.append(frist).append(qianYiYe);
                 //3:定义分页条
                 $.each(result.map.pageInfo.navigatepageNums,function(index,item){

                     var numLi=$("<li></li>").append($("<a></a>").append(item));
                     //pageInfo里的pageNum和当前页一样的时候，我们会标记出来。标深。
                     if(result.map.pageInfo.pageNum == item){
                         numLi.addClass("active");
                     }
                     //为numLi添加一个事件。
                     numLi.click(function(){
                         to_page(item);
                     });
                     ul.append(numLi);
                 });
                 //4:定义后一页
                 var houYiYe=$("<li></li>").append($("<a></a>").append("&raquo;"));
                 //5:定义末页
                 var last=$("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
                 ////去判断是否有下一页，如果没有下一页，不可以选定。
                 if(result.map.pageInfo.hasNextPage == false){
                     houYiYe.addClass("disabled");
                     last.addClass("disabled");
                 }else{
                     houYiYe.click(function(){
                         to_page(result.map.pageInfo.pageNum+1);
                     });
                     last.click(function(){
                         to_page(result.map.pageInfo.pages);
                     });
                 }

                 //把后一页和末页也添加上。
                 ul.append(houYiYe).append(last);
                 //定义nav标签。并添加上ul标签
                 var nav=$("<nav></nav>").append(ul);
                 nav.appendTo("#page_fenyetiao");
             }