MUI 中使用 ajax下拉刷新时，数据怎么才能做到累加呢，谢谢

Question

第一次加载10条成功，我在执行下拉刷新时，怎么让查询到的数据累加呢？下面是我的代码：

html:

    mui.init({
        pullRefresh: {
            container: '#pullrefresh',
            down: {
                callback: pulldownRefresh
            }
        }
    });
    function pulldownRefresh() {
        var page = 1;
        var size = 10;
        
        /*第一次加载时取得所有的li*/
        var table = jQuery('.mui-table-view');
        var cells = table.find('.mui-table-view-cell');
        var newCells = {};
        var url = MyAnviz.baseUrl + '/product/ajax/productlist.html';
        //查询参数,因为是假数据，因此这个对象没有作为查询参数使用
           var dataEntity = {
            "userId": "1",
            "page": page,
            "size": size
        };
        //刷新加载,更改page
        dataEntity.page = parseInt(dataEntity.page) + 1;
        console.log('page:' + dataEntity.page);
        
        mui.ajax({
        type: "GET",
        url: url,
        data: dataEntity,
        dataType: "json",
        success: function (data) {
            console.log('data' + data.data);
            
            for (var i = 0; i < data.data.length; i++) {
                var item = data.data[i];
                if(item){
                    var p_id = item.contentId;
                    var p_img = item.productorImg;
                    var p_name = item.productorName;
                    var p_des = item.productorDes;
                    var p_url = item.productorUrl;
                }
                
                /*新的 数组列表*/
                var li = jQuery('<li class="mui-table-view-cell mui-media js-media" data-id="' + p_id + '">' + '<img class="mui-media-object mui-pull-left js-img" src="' + p_img + '" /><div class="mui-media-body js-media-body">' + p_name + '</div>' + '<div class="anviz-ellipsis js-des js-info">' + p_des + '</div></li>');
                
                /*改变cells的length*/
                console.log('新的li为：' + li.length);
                
                /*新的li数组添加到第一次加载的10条li的后面*/
                /*执行到这一步时报错，原来的数据会被替换掉，这里要怎么改？cells返回的是"[object Object]11"，看最后面的11应该是push进一条数据，但是这样的数据会报错*/
                cells += cells.push(li);
                /*将第二次刷新的数据一起append到table中*/
                table.append(cells);
            }

             table.last().addClass('anviz-media');
             mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
             if (mui.os.plus) {
                mui.plusReady(function() {
                    setTimeout(function() {
                        mui('#pullrefresh').pullRefresh().pullupLoading();
                    }, 1000);

                });
            } else {
                mui.ready(function() {
                    mui('#pullrefresh').pullRefresh().pullupLoading();
                });
            }
           
        },
        error: function (data) {
            mui.alert('Error 500--Internal Server Error!');
        }
    })
 }

Answer 1

下面是答案，整个粘贴：

<script type="text/javascript" charset="utf-8">
    mui.init({
        pullRefresh: {
            container: '#pullrefresh',
            down: {
                callback: pulldownRefresh
            }
        }
    });


    function pulldownRefresh() {
        var page = 1;
        var size = 10;
        
        /*第一次加载时取得所有的li*/
        var table = jQuery('.mui-table-view');
        var cells = table.find('.mui-table-view-cell');
        var newCells = {};
        var url = MyAnviz.baseUrl + '/product/ajax/productlist.html';
        //查询参数,因为是假数据，因此这个对象没有作为查询参数使用
           var dataEntity = {
            "userId": "1",
            "page": page,
            "size": size
        };
        //刷新加载,更改page
        dataEntity.page = parseInt(dataEntity.page) + 1;
        console.log('page:' + dataEntity.page);
        
        mui.ajax({
        type: "GET",
        url: url,
        data: dataEntity,
        dataType: "json",
        success: function (data) {
            console.log('data' + data.data);
            
            for (var i = 0; i < data.data.length; i++) {
                var item = data.data[i];
                if(item){
                    var p_id = item.contentId;
                    var p_img = item.productorImg;
                    var p_name = item.productorName;
                    var p_des = item.productorDes;
                    var p_url = item.productorUrl;
                }
                
                /*新的 数组列表*/
                var li = jQuery('<li class="mui-table-view-cell mui-media js-media" data-id="' + p_id + '">' + '<img class="mui-media-object mui-pull-left js-img" src="' + p_img + '" /><div class="mui-media-body js-media-body">' + p_name + '</div>' + '<div class="anviz-ellipsis js-des js-info">' + p_des + '</div></li>');
                /*改变cells的length*/
                console.log('新的li为：' + li.length);
                
                /*新的li数组添加到第一次加载的10条li的后面,这里怎么搞*/
                cells.push(li[0]);
                console.log('新的li数量' + cells.length);
                table.append(cells);
            }
            
             table.last().addClass('anviz-media');
             mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
             
        },
        error: function (data) {
          
        }
    })
    
</script>

Answer 2

不应该是append在这个元素尾部添加元素么，html函数不是直接刷新？

另外也应该先组装完liDiv这个字符串，然后循环外面再执行追加，你现在循环一次就刷一次，一直刷新不说，效率也很低。

---

for (var i = 0; i < data.data.length; i++) {

    var item = data.data[i];
    var p_id = item.contentId;
    var p_img = item.productorImg;
    var p_name = item.productorName;
    var p_des = item.productorDes;
    var p_url = item.productorUrl;

    
    liDiv += '<li class="mui-table-view-cell mui-media js-media" data-id="' + p_id + '">' + '<img class="mui-media-object mui-pull-left js-img" src="' + p_img + '" /><div class="mui-media-body js-media-body">' + p_name + '</div>' + '<div class="anviz-ellipsis js-des js-info">' + p_des + '</div></li>';   
}
jsView.append(liDiv);

Answer 3

我用的笨办法，直接在数组中push进新的数据 然后渲染数组

Answer 4

jquery对增删改查的操作
改：html API： http://jquery.cuishifeng.cn/h...
增：append API: http://jquery.cuishifeng.cn/a...
删：remove API: http://jquery.cuishifeng.cn/c...
插：find API：http://jquery.cuishifeng.cn/f...
......

Answer 5

泻药，其实我没怎么用过MUI，但是这里可能仅仅是个jquery问题。

var cells = table.find('.mui-table-view-cell');
cells += cells.push(li);

以上代码报错是因为cells是jq对象，也不能通过push添加节点。
看来lz对于jq的文档节点操作还是很熟悉，可以去看一下 @Aaron 提供的api资料。

@pommy 的回答已经差不多了,以下代码稍微就加了点注释。

var liDiv;
for (var i = 0; i < data.data.length; i++) {
    var item = data.data[i];
    if(item){
        var p_id = item.contentId;
        var p_img = item.productorImg;
        var p_name = item.productorName;
        var p_des = item.productorDes;
        var p_url = item.productorUrl;
    }
    liDiv += '<li class="mui-table-view-cell mui-media js-media" data-id="' + p_id + '">' + '<img class="mui-media-object mui-pull-left js-img" src="' + p_img + '" /><div class="mui-media-body js-media-body">' + p_name + '</div>' + '<div class="anviz-ellipsis js-des js-info">' + p_des + '</div></li>';
}
table.append(liDiv); // 此处table不一定正确，应该是原有li的parent