流加载 给同一列表容器 加载多次

未结贴
8 193
10年
10年 7天前
悬赏:5飞吻
html代码
列表容器
<input type="button" id="test" value="再次加载"/>

<table width="100%" border="0" cellspacing="0" cellpadding="0"
id="tab1" class="operation_overview">
<tr>
<th scope="col">测试1</th>
</tr>
</table>

js方法:
function test(){
$('#tab1 tr:gt(0)').remove();
layui.use('flow', function(){
var $ = layui.jquery; //不用额外加载jQuery,flow模块本身是有依赖jQuery的,直接用即可。
var flow = layui.flow;
flow.load({
elem: '#tab1', //指定列表容器
scrollElem:".boxbg8",
done: function(page, next){ //到达临界点(默认滚动触发),触发下一页
var lis = [];
//以jQuery的Ajax请求为例,请求下一页数据(注意:page是从2开始返回)
$.get('/test/test_list?page='+page, function(res){
//假设你的列表返回在data集合中
$.each(res.data, function(index, item){
lis.push('<tr><td>'+ item +'</td></tr>');
});
//执行下一页渲染,第二参数为:满足“加载更多”的条件,即后面仍有分页
//pages为Ajax返回的总页数,只有当前页小于总页数的情况下,才会继续出现加载更多
next(lis.join(''), page < res.pages);
});
}
});
});
}
$(function() {
test();//默认加载一次
//再次加载一次
$('#test').click(function(){
$('#tab1 tr:gt(0)').remove();
})
});



springMVC 后台java代码
@RequestMapping("/test/test_list")
public @ResponseBody Map<String,Object> lineList(int page){
int pCount = 7;
List<String> spNameList = new ArrayList<String>();
for(int i=0;i<100;i++){
spNameList.add("test"+i);
}
Map<String,Object> datas = new HashMap<String,Object>();
datas.put("pages", 100/7);
datas.put("data", spNameList.subList((page-1)*7, page*7-1));
return datas;
}
默认是可以正常加载的,
但是当点击测试按钮时,缺没有从新加载,而是如下图所示

单击加载更多 ,仍是第一加载内容的 第二页。
求大神指点。
  • 10年
    7天前
    @快乐浪子哥 帮忙看看
    0 回复
  • @10年
    $(function() {
    test();//默认加载一次
    //再次加载一次
    $('#test').click(function(){
    $('#tab1 tr:gt(0)').remove();
    })
    });
    你点击按钮,是移除那个table,又没有做其它操作。。
    0 回复
  • $(function() {
    test();//默认加载一次
    //再次加载一次
    $('#test').click(function(){
    test();
    //$('#tab1 tr:gt(0)').remove();
    })
    });
    0 回复
  • 10年
    7天前
    @快乐浪子哥
    $(function() {
    test();//默认加载一次
    //再次加载一次
    $('#test').click(function(){
    test();
    })
    });
    忘记粘贴了,就是单击按钮 再加载一次 就会出现问题
    0 回复
  • 10年
    7天前
    @快乐浪子哥 就是单击重新调用一下 test();方法时,不会重新加载。
    0 回复
  • @10年 你自己调试下有没有执行test函数啊。。
    0 回复
  • 10年
    7天前
    @快乐浪子哥 执行了。通过firebug 调试过。执行第一步把所有行删除,执行get请求 ,数据都获取到了,但是没有在页面呈现,只有一个 加载更多按钮。 点击加载更多按钮 ,加载的 还是 第一次加载的数据的下一页
    0 回复
  • @10年 看看page有没有传递过去啊。。得你自己调试。。。
    0 回复
近期热议
layui 官网累计下载量突破 200000 72
(已结束)LayIM 3.x 标准版盛情巨惠,以最低门槛 加入 LayIM 会员群 57
很好奇社区里使用layui的程序员里面是前端的多还是后端的多 27
如果不能实现,请不要轻易允诺 23
字体图标是不是有点少了 16
php多久能学会 15
建议LayUI永久免费,不要发布收费版本 15
按照社区的模版用了一周时间,仿照了个系统,献丑了,晒晒哈 14
关于动态TABLE 12
贤心你好,请教几个技术问题? 11
layui

微信扫码关注 layui 公众号