Display on the settlement date of return josn data conversion problems and Ajax pagination

On the settlement date of return josn data conversion issues

// 1, after the page loaded directly ajax request to send to the paged data
$ (function () {
// go home
to_page (1);
});

/* 页面加载之后发送Ajax请求 */
function to_page(pageNum){
	$.ajax({
		   type: "GET",
		   url:"${path}/empAll",
		   data:"pageNum="+pageNum,
		   success: function(result){
			   	//解析并显示员工数据
			   emp_table(result);
			   	//显示分页信息
			   page_info(result);
			   	//显示分页条数据
			   page_nav(result);
		   }
		});
}
//显示员工表格信息
function emp_table(result){
	$("#page_table tbody").empty();
	var emps = result.extend.pageInfo.list;
	//第一个参数表示要遍历的参数,index表示索引下表,emp表示当前遍历 到的数据
	$.each(emps,function(index,emp){
		//将emp中的取出
		var id=$("<td></td>").append(emp.id);
		var lastname=$("<td></td>").append(emp.lastname);
		var email=$("<td></td>").append(emp.email);
		var birth=transferTime(emp.birth);
		var birth=$("<td></td>").append(birth);
		var createtime=transferTime(emp.createtime);
		var createtime=$("<td></td>").append(createtime);
		var departmentname=$("<td></td>").append(emp.department.departmentname);
		/* <button class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-plus"/> 添加</button>
		<button class="btn btn-success btn-sm"><span class="glyphicon glyphicon-search"/> 查看</button>
		<button class="btn btn-info btn-sm"><span class="glyphicon glyphicon-pencil"/> 编辑 </button>
		<button class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash"/> 删除</button> */
		var btn_add=$("<button></button>").addClass("btn btn-primary btn-sm")
		.append("<span></span>").addClass("glyphicon glyphicon-plus").append(" 添加");
		var btn_search=$("<button></button>").addClass("btn btn-success btn-sm")
		.append("<span></span>").addClass("glyphicon glyphicon-search").append(" 查看");
		var btn_pencil=$("<button></button>").addClass("btn btn-info btn-sm")
		.append("<span></span>").addClass("glyphicon glyphicon-pencil").append(" 编辑");
		var btn_trash=$("<button></button>").addClass("btn btn-danger btn-sm")
		.append("<span></span>").addClass("glyphicon glyphicon-trash").append(" 删除");
		var caozuo=$("<td></td>").append(btn_add).append(btn_search).append(btn_pencil).append(btn_trash);
		var tr=$("<tr></tr>").append(id).append(lastname).append(email).append(birth)
		.append(createtime).append(departmentname).append(departmentname).append(caozuo).appendTo("#page_table tbody");
	});
}

/* 显示分页条信息 */
function page_info(result){
	$("#page_info").empty();
	$("#page_info").append("当前"+result.extend.pageInfo.pageNum+" 页,总"+result.extend.pageInfo.pages+" 页,总共 "+result.extend.pageInfo.total+"记录");
}

/* 显示分页条数据 */
function page_nav(result){
	//page_nav
	$("#page_nav").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");
}
          //改变时间
 function transferTime(cTime) {
        //将json串的一串数字进行解析
        var jsonDate = new Date(parseInt(cTime));
        //为Date对象添加一个新属性,主要是将解析到的时间数据转换为我们熟悉的“yyyy-MM-dd hh:mm:ss”样式
	        Date.prototype.format = function(format) {
		        var o = {
		        //获得解析出来数据的相应信息,可参考js官方文档里面Date对象所具备的方法
		        "y+" : this.getFullYear(),//得到对应的年信息
		        "M+" : this.getMonth() + 1, //得到对应的月信息,得到的数字范围是0~11,所以要加一
		        "d+" : this.getDate(), //得到对应的日信息
		        "h+" : this.getHours(), //得到对应的小时信息 
		        "m+" : this.getMinutes(), //得到对应的分钟信息
		        "s+" : this.getSeconds(), //得到对应的秒信息
		        }
		      //将年转换为完整的年形式
			     if (/(y+)/.test(format)) {
				    format = format.replace(RegExp.$1,
				    (this.getFullYear() + "")
				   .substr(4 - RegExp.$1.length));
			    }
		    //连接得到的年月日 时分秒信息
		   for ( var k in o) {
			   if (new RegExp("(" + k + ")").test(format)) {
			   format = format.replace(RegExp.$1,
			   RegExp.$1.length == 1 ? o[k] : ("00" + o[k])
			  .substr(("" + o[k]).length));
			   }
		   }
		    return format;
	    }
 	/* 開始转换 */
	 var newDate = jsonDate.format("yyyy-MM-dd");
	 return newDate;
 }        

Guess you like

Origin blog.csdn.net/weixin_41865602/article/details/89394614