php laravel+jq实现滚动到底部进行数据加载，延时加载，懒加载

青旅半醒 2022-01-29 16:39 362阅读 0赞

前端完成请求数据的获取，和记录在成功接收数据后，记录下一次下拉的序号：如第一次默认是第二页，将2和筛选条件传到后台进行处理，返回数据成功，更改序号为3，下一次下拉传后台为3

var tab1id=2//开始第二页 全局变量自增，在请求后加一传到后台作为limit限制条件
        var tab2id=2//开始第二页
        var tab3id=2//开始第二页
    
    //滚动条到达底部请求下一页
    $(window).scroll(function () {
        var sid =$('.tabswitch').children('.active').attr('id')//区别分类
    
            if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
    
                switch (sid) {
                    case 'tabcode'://apend错误码
                        $.ajax({
                            type:'post',
                            url:'/hwtc/terminal/codeapend',
                            data:{tab1id:tab1id,hwid:hwid,d1:d1,d2:d2,code:code},
                            success:function (e) {
                                tab1id+=1
                                if (e.data.length > 0) {
                                    for (var i = 0; i < e.data.length; i++) {
                                        $('#wrongcode').append(" <tr>\n" +
                                            "                                                                        <td style=\"text-align: center\">"+e.data[i].id+"</td>\n" +
                                            "                                                                        <td style=\"text-align: center\">"+e.data[i].code+"</td>\n" +
                                            "                                                                        <td style=\"text-align: center\">"+e.data[i].ngat+"</td>\n" +
                                            "                                                                        <td style=\"text-align: center\">"+e.data[i].client_time+"</td>\n" +
                                            "                                                                        <td style=\"text-align: center\">"+e.data[i].server_time+"</td>\n" +
                                            "                                                                    </tr>")
                                    }
    
                                }
                            }
                        })
                        break;
                    case 'tabbp':
                        $.ajax({
                            type:'post',
                            url:'/hwtc/terminal/bpapend',
                            data:{tab2id:tab2id,hwid:hwid,d1:d1,d2:d2},
                            success:function (e) {
                                tab2id+=1
                                if (e.data.length > 0) {
                                    for (var i = 0; i < e.data.length; i++) {
                                        $('#wrongbp').append("<tr>\n" +
                                            "                                                                    <td style=\"text-align: center\">"+e.data[i].id+"</td>\n" +
                                            "                                                                    <td style=\"text-align: center\">"+e.data[i].voltage+"</td>\n" +
                                            "                                                                    <td style=\"text-align: center\">-</td>\n" +
                                            "                                                                    <td style=\"text-align: center\">"+e.data[i].charge+"</td>\n" +
                                            "                                                                        <td style=\"text-align: center;font-weight: bold\">"+e.data[i].valid+"</td>\n" +
                                            "                                                                    <td style=\"text-align: center\">"+e.data[i].client_time+"</td>\n" +
                                            "                                                                    <td style=\"text-align: center\">"+e.data[i].server_time+"</td>\n" +
                                            "                                                                </tr>")
                                    }
    
                                }
                            }
                        });
                        break;
                    case 'tabacc':
                        var vin = $("#accvinselect").val()
                        var acctype =$("#acctypeselect").val()
                        $.ajax({
                            type:'post',
                            url:'/hwtc/terminal/accapend',
                            data:{tab3id:tab3id,hwid:hwid,d1:d1,d2:d2,vin:vin,acctype:acctype},
                            success:function (e) {
                                tab3id+=1
                                if (e.data.length > 0) {
                                    for (var i = 0; i < e.data.length; i++) {
                                        $('#wrongacc').append(" <tr>\n" +
                                            "                                                                        <td style=\"text-align: center\">"+e.data[i].id+"</td>\n" +
                                            "                                                                        <td style=\"text-align: center\">"+e.data[i].equipment.vin+"</td>\n" +
                                            "                                                                        <td style=\"text-align: center\">"+e.data[i].connect_time+"</td>\n" +
                                            "                                                                        <td style=\"text-align: center\">"+e.data[i].disconnect_time+"</td>\n" +
                                            "                                                                        <td style=\"text-align: center\">"+e.data[i].disconnect_type+"</td>\n" +
                                            "                                                                    </tr>")
                                    }
    
                                }
                            }
                        });
                        break;
    
    
                }
    
                console.log(sid)
                console.log(tab3id)
                // console.log($('#accvinselect').val())
                // console.log($('#acctypeselect').val())
            }
    })

后台处理

$tabid = ($request->tab3id)-1;
        $page = config('hwtc.page_size')*$tabid;
    $access =Logaccess::where($whereacc)->offset($page)->limit(config('hwtc.page_size'))->get();//登录

发表评论取消回复

表情：

评论列表（有 0 条评论，362人围观）

还没有评论，来说两句吧...

相关阅读

相关懒加载(Lazy Loading) - MyBatis懒加载 - Spring懒加载

文章目录懒加载(Lazy Loading) MyBatis中懒加载的使用 Spring中懒加载的使用懒加载(

Dear 丶/ 2022年12月10日 15:53/ 0 赞/ 316 阅读

相关 Vue---滚动时加载(懒加载)数据插件better-scroll

安装 better-scroll npm install better-scroll --save 页面导入并使用 <template>

清疚/ 2022年11月17日 14:53/ 0 赞/ 424 阅读

相关懒加载及预加载

1、懒加载 1.什么是懒加载？懒加载也就是延迟加载。当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为

叁歲伎倆/ 2022年06月08日 04:40/ 0 赞/ 281 阅读

相关 listview滚动到底部自动加载数据

文章转自：[http://blog.csdn.net/coderinchina/article/details/40188295][http_blog.csdn.net_cod

ゝ一纸荒年。/ 2022年06月02日 11:59/ 0 赞/ 226 阅读

相关滚动加载图片（懒加载）实现原理

本文主要通过以下几方面来说明懒加载技术的原理，个人前端小菜，有错误请多多指出一、什么是图片滚动加载？　　通俗的讲就是：当访问一个页面的时候，先把img元素或是其他元素的

﹏ヽ暗。殇╰゛Y/ 2022年05月17日 05:35/ 0 赞/ 263 阅读

相关懒加载，预加载

-------------------- 一.懒加载 > 1.what: > > 延迟加载，一种很好的优化网页性能方式。可视区域外的东西不会加载，减少服务器的负载

骑猪看日落/ 2022年05月14日 10:14/ 0 赞/ 335 阅读

相关 jQuery延迟加载（懒加载）

简介延迟加载（lazy load）又可称之为懒加载，他是为了避免一些无谓的性能开销而提出来的。所谓延迟加载，就是当真正需要数据的时候，才真正执行数据加载操作。可简单理解为

喜欢ヅ旅行/ 2022年05月09日 16:28/ 0 赞/ 818 阅读

相关 JS简单实现滚动自动加载新内容（懒加载）

加载源 // 这里存后台发来的数据 var galleryList = [ { src: "./images/1.jpeg",

秒速五厘米/ 2022年04月05日 04:40/ 0 赞/ 391 阅读

相关 php laravel+jq实现滚动到底部进行数据加载，延时加载，懒加载

前端完成请求数据的获取，和记录在成功接收数据后，记录下一次下拉的序号：如第一次默认是第二页，将2和筛选条件传到后台进行处理，返回数据成功，更改序号为3，下一次下拉传后台为3

青旅半醒/ 2022年01月29日 16:39/ 0 赞/ 363 阅读

相关滚动加载图片（懒加载）实现原理

本文主要通过以下几方面来说明懒加载技术的原理，个人前端小菜，有错误请多多指出一、什么是图片滚动加载？通俗的讲就是：当访问一个页面的时候，先把`img`元素或是其他元

àì夳堔傛蜴生んèń/ 2021年06月26日 16:06/ 0 赞/ 598 阅读