jQuery根据后台查询到的数据动态往div中ul里面的li添加数据(同时动态添加li)

直接看图和代码
页面:
js
下面这种写固定个数的li很不好,也不符合要求,如下
在这里插入图片描述
我们需要根据后台查到的数据,比如查到5条数据,那就页面显示5个li行数,查到3个就显示3个。
修改 注意id 我们的操作是根据id进行绑定的
在这里插入图片描述
JS代码:

$(function(){
   $.ajax({
	            url :'这里写传到后台的路径',        
	            type: 'post',                 //获取数据方式:post/get           
	            async: false,                  //加载方式默认异步,true为同步
	            dataType:'json',            //数据格式
	            data : {
				//这里可以向请求路径携带数据传送 格式如:  startDate :startTime,
				},
	            success:function(data){
				if(data.res==1){//请求成功    res是返回数据的元素 (你们要换)
					if(data.obj!=null){//有数据  data.obj代表的是当前行数据的元素 (你们要换) 
						var parkName = data.obj.parkName; //获取景点名称
						var numberOfEntrance  = data.obj.numberOfEntrance;//获取进入人数
						var numberOfExit = data.obj.numberOfExit; //获取出去人数
						
						//动态添加li 同时动态添加数据
						 var str="";
						 for(var i=0;i<parkName.length;i++){
					    		str+="<li class='item'><p>"+parkName[i]+"</p><div class='text'><span class='in'>"+numberOfEntrance[i]+"</span><span class='out''>"+numberOfExit[i]+"</span></div></li>";
					            document.getElementById("parkNumber").innerHTML = str; 
					      };
						 //计算进入总人数  同时动态添加内容
						 var inTotal=0;
						 for(var i=0;i<numberOfEntrance.length;i++){
							 inTotal+=numberOfEntrance[i];
					      };
						 document.getElementById("span1").innerText=inTotal;
						 
					 //计算出去总人数  同时动态添加内容
						 var inTotal2=0;
						 for(var i=0;i<numberOfExit.length;i++){
							 inTotal2+=numberOfExit[i];    
					      };
						 document.getElementById("span2").innerText=inTotal2;
						
					}else{//无数据
					}
				}else{//代请求失败
				}
			},error:function(){
				//请求出错处理
			},    
	        });
});

后台代码:

@RequestMapping(value="映射名", method={RequestMethod.POST, RequestMethod.GET})
	@ResponseBody
	public AjaxRes getTourTicketStatFlow() {
		AjaxRes ar=getAjaxRes();
		Map<String, Object> map=new HashMap<String, Object>();		
	String sql = “这里写sql语句”;

	List<封装的实体> list =XXXXXervice.findBySql(sql);

	if(listIsEmpty(list)){
		ar.setFailMsg(Const.DATA_FAIL);
	}else{
		//景区名、进出总数
		String[] parkName = new String[list.size()];
		Integer[] numberOfEntrance = new Integer[list.size()];
		Integer[] numberOfExit = new Integer[list.size()];

		for(int i=0;i<list.size();i++){
			DwdTourTicketStatFlowD o = list.get(i);
			parkName[i] = o.getGroundName();
			numberOfEntrance[i] =o.getNumberOfEntrance();
			numberOfExit[i] = o.getNumberOfExit();
		}		
		map.put("parkName", parkName);
		map.put("numberOfEntrance", numberOfEntrance);
		map.put("numberOfExit", numberOfExit);
		ar.setSucceed(map, Const.DATA_SUCCEED);
	}
	return ar;
}
  • 7
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
好的,下面是使用 jQuery 实现 ul-li 分页功能的代码示例: HTML 代码: ```html <div id="pagination"> <ul> <li class="prev"><a href="#">Prev</a></li> <li class="page"><a href="#">1</a></li> <li class="page"><a href="#">2</a></li> <li class="page"><a href="#">3</a></li> <li class="page"><a href="#">4</a></li> <li class="page"><a href="#">5</a></li> <li class="next"><a href="#">Next</a></li> </ul> </div> ``` CSS 代码: ```css #pagination { text-align: center; } #pagination ul { display: inline-block; margin: 0; padding: 0; } #pagination li { display: inline-block; margin: 0; padding: 0; } #pagination li a { display: inline-block; margin: 0 5px; padding: 5px 10px; border: 1px solid #ccc; text-decoration: none; color: #333; } #pagination li.active a { background-color: #333; color: #fff; } ``` JavaScript 代码: ```javascript $(document).ready(function() { var pageSize = 10; // 每页显示的记录数 var pageCount = 5; // 分页栏显示的页码数 var $pagination = $('#pagination ul'); var $prev = $pagination.find('.prev'); var $next = $pagination.find('.next'); var $pages = $pagination.find('.page'); // 计算总页数 var totalRecords = 100; // 总记录数 var totalPages = Math.ceil(totalRecords / pageSize); // 初始化分页栏 function initPagination() { $pages.hide(); $pages.filter(':lt(' + pageCount + ')').show(); $pagination.find('.active').removeClass('active'); $pages.eq(0).addClass('active'); $prev.addClass('disabled'); $next.toggleClass('disabled', totalPages <= pageCount); } // 显示指定页码的记录 function showPage(page) { var start = (page - 1) * pageSize; var end = start + pageSize; // 显示分页数据 // ... } // 点击分页栏页码 $pages.click(function() { var $this = $(this); if (!$this.hasClass('active')) { var page = $this.text(); showPage(page); $pagination.find('.active').removeClass('active'); $this.addClass('active'); $prev.toggleClass('disabled', page == 1); $next.toggleClass('disabled', page == totalPages); if (page > pageCount && page < totalPages) { $pages.hide(); $pages.filter(':lt(' + (pageCount - 2) + ')').show(); $pages.filter(':eq(0),:eq(-1)').show(); } else if (page >= totalPages - pageCount + 2) { $pages.hide(); $pages.filter(':gt(' + (totalPages - pageCount - 1) + ')').show(); $pages.filter(':eq(0),:eq(-1)').show(); } } }); // 点击上一页 $prev.click(function() { var $this = $(this); if (!$this.hasClass('disabled')) { var page = $pagination.find('.active').text(); showPage(page - 1); $pagination.find('.active').removeClass('active').prev().addClass('active'); $prev.toggleClass('disabled', page == 2); $next.toggleClass('disabled', false); if (page > pageCount && page <= totalPages) { $pages.hide(); $pages.filter(':lt(' + (pageCount - 2) + ')').show(); $pages.filter(':eq(0),:eq(-1)').show(); } } }); // 点击下一页 $next.click(function() { var $this = $(this); if (!$this.hasClass('disabled')) { var page = $pagination.find('.active').text(); showPage(parseInt(page) + 1); $pagination.find('.active').removeClass('active').next().addClass('active'); $prev.toggleClass('disabled', false); $next.toggleClass('disabled', page == totalPages - 1); if (page >= 1 && page < totalPages - pageCount + 1) { $pages.hide(); $pages.filter(':gt(' + (page - 2) + '):lt(' + (pageCount - 2) + ')').show(); $pages.filter(':eq(0),:eq(-1)').show(); } } }); // 初始化分页栏和显示第一页数据 initPagination(); showPage(1); }); ``` 这段代码实现了一个简单的分页功能,其 `totalRecords` 变量表示总记录数,`pageSize` 变量表示每页显示的记录数,`pageCount` 变量表示分页栏显示的页码数,可以根据实际情况进行调整。在 `showPage` 函数可以实现分页数据的显示逻辑,具体实现可以根据实际情况进行编写。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值