ajax请求json字符串构建员工列表并构建分页条

在上篇博文中，我们获取到了json字符串数据，那么接下来我们就需要在jsp页面中进行填充数据
填充后的页面与原本相同
这是在页面加载完成后发送ajax请求将获取到的数据添加到页面表格中 append()用法十分重要
具体可以参考W3School或者菜鸟编程

	<script type="text/javascript">
	//1.页面加载完成后，去发送一个ajax请求，得到分页数据
	$(function(){
    
    
		$.ajax({
    
    
			url:"${APP_PATH}/list",
			data:"pn=1",
			type:"get",
			success:function(result){
    
    
				//1.解析并显示数据   2.解析并显示分页数据
				build_emps_table(result);
			}
		});
	});
	
	function build_emps_table(result){
    
    
		var emps=result.extend.pageinfo.list;
		$.each(emps,function(index,item){
    
    
			var eid=$("<td></td>").append(item.userId);
			var ename=$("<td></td>").append(item.userName);
			var dept=$("<td></td>").append(item.dept.deptName);
			var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
			.append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
			//为编辑按钮添加一个自定义的属性，来表示当前员工id
			editBtn.attr("edit-id",item.empId);
			var delBtn =  $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
			.append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");
//为删除按钮添加一个自定义的属性来表示当前删除的员工id
			delBtn.attr("del-id",item.empId);
			var btn=$("<td></td>").append(editBtn).append("  ").append(delBtn);
			//append方法执行完后还是返回原来的元素
			$("<tr></tr>").append(eid).append(ename).append(dept).append(btn).appendTo("#emps");
		});
	}
	function build_page_nav(){
    
    
		
	}
	
	
	</script>

接下来便是对分页信息与分页条进行操作
这里的分页条构建十分麻烦，需要对Bootstrap的属性进行添加
分页信息较为简单

//解析显示分页信息
	function page_info(result){
    
    
		$("#page_info").append("当前"+result.extend.pageinfo.pageNum+"页,总"+result.extend.pageinfo.pages+"页,总 "+result.extend.pageinfo.total+"条记录")
	}

翻页条

function build_page_nav(result){
    
    
		//page_nav_area
		$("#page_nav_area").empty();
		var ul = $("<ul></ul>").addClass("pagination");
		
		//构建元素
		var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
		var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
		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("&raquo;"));
		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);
		//1,2，3遍历给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");
	}

完成该模块后，我们需要点击分页码来获取数据，并对原本的获取进行改写


这样，便实现了分页显示。示例图：

于原来的别无二致。
码字不易，给个赞呗！