移动端下拉插件的使用-----dropload

定义一个div.no_data当无数据的时候进行显示,在定义一个div.data_box承载拉去回来的内容

<div class='no_data'>
    <p>暂无任何记录</p>
</div>
<div class='data_box'>
    <table>
          <thead>
                  <th>表头一</th>
                  <th>表头一</th>
          </thead>
          <tbody> 
                    <td>内容一</td>
                    <td>内容一</td>
          </tbody>
    </table>
</div>

下拉相关的逻辑代码

var now_page = 0, pageSize = 10;
    function do_ajax(){
       $.ajax({
          url :   '/report/get-activity-list',
          method :  'post',
          data : {
               'name' : '必传参数一',
                'age' :  '必传参数二'
          },
          success : function(res){
                 set_table();
          }  
     })
}

//成功拉去到数据后进行表格填充

var str = '', totalPage=1;
function set_table(res){
    if(res.data.count!=0){
        $('.data_box').show();
        totalPage = Math.ceil(res.data.count/pageSize);
        res.data.data.forEach(function (i,index) {
            str += '<tr>';
            str += '<td>'+formatDateTime(i['created_at']*1000)+'</td>';
            str += '<td class="status_ok">转账成功</td>';
            str += '</tr>';
        });
        $("#transferBox").html(str);
    }else{
        $('.no_res').show();
        $('.data_res_box').hide();
        //$("#transferBox").html('<tr><td colspan="4">暂无记录</td></tr>');
    }
}

下拉时触发的函数

 function loadData(){
    $('.dropload-down').remove();
    $('#transferBox').html('');
    str='';
    now_page = 0;
    $('.data_res_box').dropload({
        scrollArea : window,
        domDown:{
            domNoData:"<div class='dropload-noData'>没有更多数据了</div>"
        },
        loadDownFn : function(me){
            if(now_page < totalPage){
                now_page++;
                do_ajax();
            }else{
                // 锁定
                me.lock();
                // 无数据
                me.noData();
            }

            setTimeout(function(){
                // 每次数据插入,必须重置
                me.resetload();
            },1000);
        }
    })
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • 前一段时间看高晓松的《鱼羊野史》,就看他谈到了,曾经在厦门大学学习过一段时间,并且那段在厦大的日子,在他的记忆里面...
    紫玉葡萄不吐葡萄阅读 498评论 0 0
  • 满夜的星辰 仿佛是我对你的思念 延展在无尽的宇宙 我在寻找着 那个叫做宝宝星的地方 寻找着那个属于我们的世界
    王不烦阅读 137评论 0 0