首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在Express Js中加载滚动的动态数据?

如何在Express Js中加载滚动的动态数据?
EN

Stack Overflow用户
提问于 2019-08-26 22:01:18
回答 1查看 203关注 0票数 0

现在,来自Mongo db的动态数据是一次性加载的,但是我们想要通过scrolling.As加载它,我们滚动应该在一个页面中加载数据。

//我们尝试的是-添加延迟加载旋转木马,但不起作用。

代码语言:javascript
复制
function loadStartUp(){         
    $.ajax({
        url: '/createSection',
        type: 'get',
        dataType: 'json',
        success: function (data) {
            var i = 0;
             data.forEach(function(model){
                 console.log(model)

                $('#tbody').append(`
                    <tr>
                        <td>
                            <a href="#" class="tagModalWindow">${model.name}</a>
                        </td>
                        <td>
                            <a href="#" class="tagModalWindow">${model.description}</a>
                        </td>
                        <td>
                            <a href="#" class="tagModalWindow">${model.dashtype}</a>
                        </td>
                    </tr>
                `)

                navItem(model.name,i); 
                createSection(model.name, model.frequency, i,model.type,model.entity, model,model._id);
                if(model.parameters.length > 0){
                gettingData(model.parameters[0].para, model.parameters[0].startPeriod, i, model.parameters[0].calendar, model.parameters[0].month, model.parameters[0].calc, model.parameters[0].chartType, model.parameters[0].type, model.parameters[0].period, model.parameters[0].indi, model.parameters[0].k);  
                }
                i++;
            });

            carousel();
        }
    });


    function carousel(){
        console.log("carousel");
        $('.owl-carousel').owlCarousel({
            items: 2,
            singleItem: false,
            lazyLoad: true,
            loop:true,
            //Basic Speeds
            slideSpeed: 200,
            paginationSpeed: 800,
            rewindSpeed: 1000,
            autoWidth:true,
            responsiveClass:false,
            //Autoplay
            autoPlay: false,
            stopOnHover: false,
            // Navigation
            navigation: false,
            navigationText: [
                "<i class='icon-chevron-left icon-white left'></i>",
                "<i class='icon-chevron-right icon-white right'></i>"
            ],
            rewindNav: false,
            scrollPerPage: false,
            //Pagination
            pagination: false,
            paginationNumbers: false,
            responsive: true,
            responsiveRefreshRate: 200
        });
    }

代码语言:javascript
复制
app.get('/createSection', isLoggedIn, (req, res, next)=>{         
    var query = {user:req.user._id};
    dashModel.find(query,(err, data)=>{
        if(err){
            console.log(err)
        } 
        console.log(data)

        res.send(data)
      })
    });

提前谢谢。

EN

回答 1

Stack Overflow用户

发布于 2019-08-26 22:45:14

使用分页。对于客户端,如果搜索引擎优化很重要,我建议使用以下模式,因为这是谷歌能够抓取您的分页数据的唯一方式:https://www.quicksprout.com/how-to-create-an-seo-friendly-infinite-scrolling-page/

对于后端,我推荐使用mongoose来处理数据库,我只为它挑选了一个随机的分页库:https://www.npmjs.com/package/mongoose-paginate

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/57659423

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档