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

阳光穿透心脏的1/2处 2022-11-04 15:24 81阅读 0赞

在上篇博文中，我们获取到了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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70]  
接下来便是对分页信息与分页条进行操作  
这里的分页条构建十分麻烦，需要对Bootstrap的属性进行添加  
分页信息较为简单

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

翻页条  
![在这里插入图片描述][20210303122335854.png]

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("«"));
    		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);
    		//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");
    	}

完成该模块后，我们需要点击分页码来获取数据，并对原本的获取进行改写  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 2]  
这样，便实现了分页显示。示例图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 3]  
于原来的别无二致。  
码字不易，给个赞呗！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70]: /images/20221023/b123df15da074ab09ddfdb2c77c33b81.png
[20210303122335854.png]: /images/20221023/fc6ddea4f32f4a32ab12939710547f57.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 1]: /images/20221023/535e5af3a829427c97581d7cb033c02d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 2]: /images/20221023/7caedbd78be1426fba7b073f2df36017.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 3]: /images/20221023/211791cef2ab4f588d000182cab24bb1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，81人围观）

还没有评论，来说两句吧...

相关阅读

相关 Java构建字符串

文章目录 0 写在前面 1 介绍 2 举例 3 写在最后 0 写在前面有些时候，需要由较短的字符串构建字符串，例如，一个单词采用字符串拼

怼烎@/ 2024年03月30日 09:26/ 0 赞/ 24 阅读

相关为客户端Ajax请求构建服务器端代理

由于客户端浏览器的安全设置问题，从客户端JavaScript脚本中用XMLHttpRequest直接访问第三方的网址是被禁止的。如果从客户端脚本着手来解决这个问题，方案都不太理

古城微笑少年丶/ 2023年10月18日 10:02/ 0 赞/ 103 阅读

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

在上篇博文中，我们获取到了json字符串数据，那么接下来我们就需要在jsp页面中进行填充数据填充后的页面与原本相同这是在页面加载完成后发送ajax请求将获取到的数据

阳光穿透心脏的1/2处/ 2022年11月04日 15:24/ 0 赞/ 82 阅读

相关构建字符串（StringBilder）

构建字符串每次拼接字符串时都会构建一个String对象，既耗时，又浪费空间。使用StringBuilder类可以避免问题发生。需要用许多小段字符串来构建一个字符串

系统管理员/ 2022年10月30日 08:27/ 0 赞/ 159 阅读

相关 layui完美分页，ajax请求分页（真分页）【2.0版本】

强烈推荐分享一个大神的人工智能教程。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到人工智能的队伍中来！[http://www.captainbed.net][h

待我称王封你为后i/ 2022年06月06日 00:29/ 0 赞/ 248 阅读

相关 AJAX请求action返回JSON并进行渲染

AJAX请求 $.ajax({ type: "post", url: "/address/get.

谁践踏了优雅/ 2022年06月05日 12:28/ 0 赞/ 238 阅读

相关 jsp分页：使用Ajax+servlet+json实现分页

设计思路：数据分页在写web项目时是很重要的一个应用，通常找到的一些比如jquery的一些插件通常是所谓的“假分页”，我们说的分页是要点击某一页时，向后台提交请求得到那

╰半橙微兮°/ 2022年04月10日 13:31/ 0 赞/ 256 阅读

相关使用JSON数据在bootstrap构建dom列表

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <me

太过爱你忘了你带给我的痛/ 2022年02月18日 17:27/ 0 赞/ 135 阅读

相关基于Jquery+Ajax+Json+高效分页

首先我们创建一般处理程序，来读取数据库中内容，得到返回值. 创建文件，GetData.ashx. 我这里是用的存储过程，存储过程会再下面粘出来，至于数据只是实例，你们可根据

朴灿烈づ我的快乐病毒、/ 2022年01月06日 15:39/ 0 赞/ 223 阅读

相关 C#中构建一个分页的应用

1、SQL分页语法 SELECT FROM( SELECT ROW_NUMBER() OVER(ORDER BY 排序条件) AS RowNumber,

快来打我*/ 2021年09月10日 19:32/ 0 赞/ 306 阅读