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

提问 未结
8 374
10年
10年 2017-8-11
悬赏: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年
    2017-8-11
    @快乐浪子哥 帮忙看看
    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年
    2017-8-11
    @快乐浪子哥
    $(function() {
    test();//默认加载一次
    //再次加载一次
    $('#test').click(function(){
    test();
    })
    });
    忘记粘贴了,就是单击按钮 再加载一次 就会出现问题
    0 回复
  • 10年
    2017-8-11
    @快乐浪子哥 就是单击重新调用一下 test();方法时,不会重新加载。
    0 回复
  • @10年 你自己调试下有没有执行test函数啊。。
    0 回复
  • 10年
    2017-8-11
    @快乐浪子哥 执行了。通过firebug 调试过。执行第一步把所有行删除,执行get请求 ,数据都获取到了,但是没有在页面呈现,只有一个 加载更多按钮。 点击加载更多按钮 ,加载的 还是 第一次加载的数据的下一页
    0 回复
  • @10年 看看page有没有传递过去啊。。得你自己调试。。。
    0 回复