使用ajax做分页查询，怎么更新页面的列表

wanjia19 2017-02-12 06:05:17

数据库的分页查询已经做好了，每次根据传入的页码查询该页的数据，
现在不知道怎么更新页面的数据。
比如页面每一页显示五条数据，列表是这样：

<div class="row">

<span>第一行数据</span>

<span>第二行数据</span>

<span>第三行数据</span>

<span>第四行数据</span>

<span>第五行数据</span>

</div>

想要用查询回来的数据更新当前的五条，要怎么做。
没有用分页插件，自己写了一个按钮显示第几页，上一页，下一页。
最初想的是在java查询出数据后把整个div拼成一个StringBuffer，然后替换整个div，但是这样的话div中绑定的事件就失效了，而且我觉得这样做也并不合适。
没有过这方面的经验，请教下各位。
是否有某种方法可以在js中或者整个div的元素，然后循环这些元素替换其中的文本。

...全文

308 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

wanjia19 2017-02-13

打赏
举报

问题已解决，用ajax请求的数据渲染到一个新页面，然后将新页面load到显示数据的div中。 $("#dataDiv").load("/xxx/getNextPage?pageNum=num); 谢谢楼上各位。

清风文人 2017-02-13

打赏
举报

你不会迭代数据么 jstl或者struts标签库都有的而且可以自定义size的一看就是学的纯后台

wanjia19 2017-02-13

打赏
举报

引用 5 楼 hanpoyangtitan 的回复:

[quote=引用 4 楼 hanpoyangtitan 的回复:]

$("#btn_qury").bind("click", function(){
    $.ajax(type:"post", url:url, {pageNo:2, queryCondition1:'1', queryCondition:'2'},dataType:'json',success:function(responseData){
        if(resonseData.flag == "Y"){
            $(responseData.data, function(k, row) {
                  $("#data-table").append('<div class="row"><span>'+row.column1+'...'+row.columnN+'</span></div>');
            }
        }
    })
});

ps：加一个 $("#data-table").html('');[/quote] 谢谢，我也想到了循环标签去赋值，可是如果列表一行的样式很复杂，比如div-div-div-span-ul-li这种的，嵌套好多层标签才是数据，比如这种：

<div class="width100 float_l border_b quchu_bb del_this padding_t20 color_shenhui">
	        	<div class="width100 float_l margin_b15 huifu1">
	       			<span class="float_l fon_siz12 line_hei12 color_qls">${leaveWord.memLeaveUser }</span>
	       			<c:if test="${obj['isOwn'] == '1' }">
	       				<span class="float_r fon_siz12 line_hei12 color_qls xiaoshou cl_delbig"  onclick="setId('${leaveWord.id }', 1)">删除</span>
	        			<span class="float_r fon_siz12 line_hei12 color_qls xiaoshou dianwohuifu margin_r8">
	        				<c:if test="${empty leaveWord.pwldr }">回复  |</c:if>
	        			</span>
	       			</c:if>
	        	</div>
	       		<div class="width100 float_l margin_b15">
	       			<p class="width100 float_l fon_siz14 line_hei24">
	       				${leaveWord.memLeaveWord }
	       			</p>
	       		</div>
	       		<div class="width100 float_l fon_siz12 line_hei12 margin_b20">
	       			<span class="float_l">日期：
	       				<span>
	       					<fmt:formatDate value="${leaveWord.createdDate }" pattern="yyyy-MM-dd HH:mm:ss"/>
	       				</span>
	       			</span>
	       		</div>
	       		<c:if test="${empty leaveWord.pwldr }">
	       			<div class="width100 float_l fon_siz12 line_hei12 color_hhs border padding_tb9lr12 posi_relative hf_lew margin_b20 huifuk dis_none" >
	         			<img class="posi_abojantou" src="../img/uiz74.png">
	         			<div class="width100 float_l hf_haoduo">
	         				<div class="width100 float_l margin_b7">
	         					<span class="color_qls float_l mingcheng"></span>
	         					<span class="float_l margin_l6 neirong"></span>
	         				</div>
	         				<div class="width100 float_l">
	         					<span class="reply_date float_l"></span>
	         					
	         				</div>
	         			</div>
	         		</div>
	       		</c:if>
	       		<div class="width100 float_l margin_b20 dhf_wxs dis_none">
	         		<div class="width100 float_l margin_b10 posi_relative">
	         			<textarea class="fabiaos jiaodian posi_relative" id="memLeaveWordReply"></textarea>
	         			<input type="hidden" id="leaveWordId" value="${leaveWord.id }"/>
	         		</div>
	         		<div class="width100 float_l"><!-- id="saveLeaveWordReplyButton" -->
						<span class="tijiao float_r">提交</span>
					</div>
				</div>
			</div>

这么多标签才是一行数据，这样情况也必须是循环标签么？有其他的解决方案么

什么都不能 2017-02-12

打赏
举报

引用 4 楼 hanpoyangtitan 的回复:

$("#btn_qury").bind("click", function(){
    $.ajax(type:"post", url:url, {pageNo:2, queryCondition1:'1', queryCondition:'2'},dataType:'json',success:function(responseData){
        if(resonseData.flag == "Y"){
            $(responseData.data, function(k, row) {
                  $("#data-table").append('<div class="row"><span>'+row.column1+'...'+row.columnN+'</span></div>');
            }
        }
    })
});

ps：加一个 $("#data-table").html('');

什么都不能 2017-02-12

打赏
举报

$("#btn_qury").bind("click", function(){
    $.ajax(type:"post", url:url, {pageNo:2, queryCondition1:'1', queryCondition:'2'},dataType:'json',success:function(responseData){
        if(resonseData.flag == "Y"){
            $(responseData.data, function(k, row) {
                  $("#data-table").append('<div class="row"><span>'+row.column1+'...'+row.columnN+'</span></div>');
            }
        }
    })
});