- 35
- 0
我用ajax做分页,vue做数据渲染,当我点击第二页时请求数据这个是没有问题的,但是当我回到第一页,页面事件就不生效了,我要怎样删除页面数据重新渲染??
<tbody>
<tr class="gradeX" v-for="(item,index) in mydatas">
<td class="expand tabclick">{{item.id}}</td>
<td class="">{{item.menuname}}</td>
<td>{{item.engname}}</td>
<td>{{item.path}}</td>
<td data-hide="default,phone,tablet">{{item.ord}}</td>
<td>
<div class="tpl-table-black-operation">
<a href="javascript:;" @click="edit(index)">
<i class="am-icon-pencil"></i>
编辑
</a>
<a href="javascript:;" class="tpl-table-black-operation-del" @click="delt(index)">
<i class="am-icon-trash"></i>
删除
</a>
</div>
</td>
</tr>
</tbody>
function pags(totalCount){
//分页
$('.M-box4').pagination({
totalData: totalCount,
showData: 10,
jump: true,
callback: function (api) {
var data = {
pageNum: api.getCurrent(),
pageSize:10
};
$.post('<%=basePath%>admin/resources/resourceList.jhtml', data, function (json) {
vmm.mydatas = json.datas;
vmm.$nextTick(function(){
$(".footable").footable();
});
});
}
},function (api) {
var this_page = api.getCurrent(); //1
if(this_page == 1){
$.post('<%=basePath%>admin/resources/resourceList.jhtml?pageNum=1&pageSize=10',function (json) {
vmm.mydatas = json.datas;
vmm.$nextTick(function(){
$(".footable").footable();
});
});
}
}); 0
打赏
收藏
点击回答
您的回答被采纳后将获得:提问者悬赏的 11 元积分
- 共 0 条
- 全部回答
-
朵烟熏的埖 普通会员 1楼
在使用Ajax进行分页时,每次切换页面时,你需要重新获取新的数据,并用新数据替换掉当前页面已有的数据。以下是一个基本的步骤:
-
清除原有数据:
javascript // 假设你的数据渲染在一个id为'container'的元素中 var container = document.getElementById('container'); container.innerHTML = ''; // 清空容器中的所有内容 -
发送Ajax请求获取新一页的数据:
javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'your-api-url?page=2', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var newData = JSON.parse(xhr.responseText); // 假设返回的是JSON格式数据 renderData(newData); // 调用渲染函数 } }; xhr.send(); - 根据新数据重新渲染页面:
javascript function renderData(data) { for (var i = 0; i < data.length; i++) { var item = document.createElement('div'); // 创建一个新的元素用于存放每条数据 item.innerHTML = data[i].content; // 假设data[i]是每一条记录 container.appendChild(item); // 将新元素添加到容器中 } }以上只是一个简单的示例,实际应用中,你可能需要根据你的API接口和页面结构做相应的调整。同时,现代前端开发中,建议使用fetch API或者jQuery.ajax等更便捷的Ajax方法,以及React、Vue、Angular等框架提供的数据绑定和组件更新机制来处理这类问题。
-
更多回答
网站公告
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
