不要轻易放弃。学习成长的路上,我们长路漫漫,只因学无止境。学无止境

js拉取数据渲染(分页,懒加载)

碧羽墨轩 2019-02-15 09:43:16 136人围观
简介通过js封装实现打开页面拉取数据渲染,实现懒加载

//html代码如下:

<table class="matchOrderTable" id="pageData">
     <tr>
           <th></th>
           <th style="text-align:left;">&emsp;姓名</th>
           <th>加入时间</th>
           <th>操作</th>                    
      </tr>
</table>
<div id="pageHtml" data-container="pageData" href="获取数据的后端链接">
</div>

//js调用代码如下:

PagePlugin.each_data(function (index,item) {
        PagePlugin.push('<tr><td style="text-align:left;"><input type="checkbox" /></td><td style="text-align:left;"><img src="'+ item.a+'" style="width:50px; height:50px; border-radius:50%;" />&emsp;'+ item.b+'</td><td>'+ getMyDate(item.c) +'</td><td><a>操作1</a>&emsp;<a>操作2</a></td></tr>');
    },'list','pages');

//page.js代码如下:

(function($){
    //定义一些默认参数
    var _options={
        empty_html:"<div style=\"text-align:center;  color:#999999;\"><img src=\"static/portal/image/zanwushujuchang.png\"></div>",
        more_html:'<div class="pageBox">\n' +
        '\t\t\t\t\t\t<a  href="javascript:;" onclick="PagePlugin.next_page()"><img src="static/portal/my_center/image/jiazaigengduo.png" /><br />加载更多</a>\n' +
        '\t\t\t\t\t</div>',
        no_more_html:'<div class="pageBox">\n' +
        '\t\t\t\t\t\t<a style="color: #cccccc" href="javascript:;">没有更多了</a>\n' +
        '\t\t\t\t\t</div>'
    };
    //定义一些api
    var _plugin_api = {
        next_page_text_dom:$('#pageHtml'),
        now_page:1,//当前页数
        all_page:0,//总页数
        data_rule:'list',//数据列表键名
        pages_rule:'pages',//总页数键名
        callback_html_style:null,//处理html列表页面渲染结构回调函数
        next_page:function(){//下一页请求操作
            this.sendRequest()
        },
        next_page_text:function(){//下一页按钮

            if(this.next_page_text_dom.find('form').length>0){//是否又翻页条件
                this.next_page_text_dom.find('form').nextAll().remove();
            }else {
                this.next_page_text_dom.empty();
            }
            if(this.now_page==1 && this.all_page==0){
                this.next_page_text_dom.append(_options.empty_html) ;
                return true;
            }
             this.now_page = this.now_page+1;

            if(this.now_page>this.all_page){
                this.next_page_text_dom.append(_options.no_more_html) ;
            }else {
                this.next_page_text_dom.append(_options.more_html) ;
            }
            return true;
        },
        push:function(html){
            $('#'+this.next_page_text_dom.attr('data-container')).append(html);
        },
        sendRequest:function () {
            if(!this.next_page_text_dom) return false;
            if(!this.next_page_text_dom.attr('href')) {
                this.next_page_text_dom.append(_options.empty_html) ;
                return false;
            }
            var form_data = $(this.next_page_text_dom).find('form').serialize();
               if(form_data){
                   form_data = form_data+'&page='+this.now_page;
               }else {
                   form_data = 'page='+this.now_page;
               }
            $('#loding_b').show();
            $.ajax({
                url: this.next_page_text_dom.attr('href'),
                type: "post",
                data: form_data,
                success: function (result) {
                    result=JSON.parse( result );
                    var data_list = (result.data)[_plugin_api.data_rule];
                    $('#loding_b').hide();
                    if(result['code']==202){
                        showWindow('login', 'plugin.php?id=assistant:login&act=qrcode');
                        return;
                    }
                    if(result['code']==201){
                        swal({title: "提示",text:result['msg'],timer: 1500,showConfirmButton: false});
                        return;
                    }
                    if(result['code']==200){
                        var data_html = '';
                        $.each(data_list,function (index,item) {
                            _plugin_api.callback_html_style(index,item);
                        });
                        _plugin_api.all_page = (result.data)[_plugin_api.pages_rule];
                        _plugin_api.next_page_text();
                    }
                },
                error:function(){
                    $('#loding_b').hide();
                    swal({title: "提示",text:'网络波动,请刷新页面重新尝试',timer: 1500,showConfirmButton: false});
                }
            })
        },
        each_data:function(callback,data_rule,pages_rule){
            if(data_rule){
               this.data_rule= data_rule;
            }
            if(pages_rule){
                this.pages_rule= pages_rule;
            }
            this.callback_html_style = callback;
            this.sendRequest();
        },
    }
    //这里确定了插件的名称
    this.PagePlugin = _plugin_api;
})(jQuery);


注:本文转载自碧羽墨轩,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如有侵权行为,请联系我们,我们会及时删除。

上一篇:php将图片打包下载

下一篇:laravel基础数据库操作、路由

文章评论