ssm 开发经验 web 项目 前端开发小总结 (2)

1. 情景是这样：在后台返回来一个json数据， 在前端先写了一些组件，但是不填充数据，再在页面使用js来动态填充数据。
2. 静态代码，就是一些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>
   
   

    

3. 接下来就是动态填充数据了，用到了jquery 来创建元素，获取从后端传来的数据并且进行解析，最后一步是将函数里创建好的元素作为上边写好的静态元素的子元素。这样就完成了动态填充数据咯。

       //解析显示分页条
               function build_page_info(result){
                   $("#page_info_area").append("当前页数：" +result.extend.pageInfo.pageNum +" ,  总页数:" + result.extend.pageInfo.pages +" 总记录数 : "+ result.extend.pageInfo.total)
               }
   
               function build_page_var(result){
                   var ul  = $("<ul></ul>").addClass("pagination");
                   var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href", "#"));
                   var lastPageLi =  $("<li></li>").append($("<a></a>").append("末页").attr("href", "#"));
                   var prePageLi =   $("<li></li>").append($("<a></a>").append("&laquo;"));
                   var nextPageLi =  $("<li></li>").append($("<a></a>").append("&raquo;"));
                   ul.append(firstPageLi).append(prePageLi);
                   $.each(result.extend.pageInfo.navigatepageNums, function(index, item){
                      var numLi =  $("<li></li>").append($("<a></a>").append(item));
                      ul.append(numLi);
                   });
   
                   ul.append(nextPageLi).append(lastPageLi);
                   var navEle = $("<nav></nav>").append(ul);
                   navEle.appendTo("#page_nav_area")
               }