Прокручиваемая ленивая таблица загрузки со стороны сервера с помощью js

Мне нужно отобразить таблицу с огромным количеством предметов. Поэтому я хочу реализовать это с ленивой загрузкой со стороны сервера. Затем, когда пользователь прокручивает вниз (или вверх), я вызываю сервер, чтобы получить следующее /предыдущее определенное количество элементов и отображать их вместо старых (или добавлять их к старым элементам). Есть ли простой способ реализовать это? Есть ли какая-нибудь библиотека JavaScript, которая может помочь мне реализовать эту функцию? Любая помощь будет оценена. Спасибо

7 голосов | спросил Bouabane Mohamed Salah 20 +03002015-10-20T15:34:55+03:00312015bEurope/MoscowTue, 20 Oct 2015 15:34:55 +0300 2015, 15:34:55

3 ответа


0

Это можно сделать с помощью scrollHeight, clientHeight и scrollTop, чтобы определить, когда полоса прокрутки находится рядом с нижней областью, а затем выбрать новые элементы:

Это пример ( демонстрационная версия ):

HTML

<div id="container">  
    <div id="scrollbox" >  
        <div id="content" >  
            <p>Lorem ipsum dolor sit amet</p>  
            <p>Ipsum lorem dolor amet sit</p>  
            <p>Dolor lorem ipsum amet tis</p>  
            <p>Lorem ipsum dolor sit amet</p>  
            <p>Ipsum lorem dolor amet sit</p>  
            <p>Dolor lorem ipsum amet tis</p>  
            <p>Lorem ipsum dolor sit amet</p>  
            <p>Ipsum lorem dolor amet sit</p>  
            <p>Dolor lorem ipsum amet tis</p>  
        </div>  
    </div>  
    <p><span id="status" ></span></p>  
</div>  

CSS

#container{   
    width:400px;   
    margin:0px auto;   
    padding:40px 0;   
}  
#scrollbox{   
    width:400px;   
    height:300px;    
    overflow:auto; overflow-x:hidden;   
}  
#container > p{   
    background:#eee;   
    color:#666;   
    font-family:Arial, sans-serif; font-size:0.75em;   
    padding:5px; margin:0;   
    text-align:rightright;  
} 

JavaScript

$('document').ready(function(){  
    updatestatus();  
    scrollalert();  
});  
function updatestatus(){  
    //Show number of loaded items  
    var totalItems=$('#content p').length;  
    $('#status').text('Loaded '+totalItems+' Items');  
}  
function scrollalert(){  
    var scrolltop=$('#scrollbox').attr('scrollTop');  
    var scrollheight=$('#scrollbox').attr('scrollHeight');  
    var windowheight=$('#scrollbox').attr('clientHeight');  
    var scrolloffset=20;  
    if(scrolltop>=(scrollheight-(windowheight+scrolloffset)))  
    {  
        //fetch new items  
        $('#status').text('Loading more items...');  
        $.get('new-items.html', '', function(newitems){  
            $('#content').append(newitems);  
            updatestatus();  
        });  
    }  
    setTimeout('scrollalert();', 1500);  
}  

PS : я копирую /прошёл исходный код из здесь .

ответил Rami 20 +03002015-10-20T16:29:54+03:00312015bEurope/MoscowTue, 20 Oct 2015 16:29:54 +0300 2015, 16:29:54
0

Проверьте этот шаблон, следуйте комментариям, и вы сможете написать свой собственный код. Пожалуйста, помните, что это только пример.

var $win = $(window),
    $table = $('.table'), // your table
    lazyPoint = 0, // point to call next ajax
    offset = 30, // number of last table row
    count = 30, // number of rows to load with one request
    loading = false; // flag to prevent more than 1 loading at a time

// this function will calc next Y coordinate
// then you reach it, use ajax to get some new table data
function calcLazyPoint () {
    var top = $table.offset().top;
    var height = $table.outerHeight();
    lazyPoint = top + height;
}

// add loaded data to table
function addToTable (data) {
    var html;

    // use some template engine here, like this: http://handlebarsjs.com/
    // in this function you should convert raw data
    // to HTML, which you will append to table

    $table.append(html); // append data to table
    offset += 30; // increase your offset
    loading = false; // allow to load next data portions

    calcLazyPoint(); // calc next lazy point
}

// Function with ajax request
// it will ask server for new data
// using your offset and count
function getTableData () {
    $.ajax({
        data: {
            offset: offset,
            count: count
        },
        success: addToTable
    });
}

$win.on("scroll", function () {
    var top = $win.scrollTop(); // get scrollTop
    var height = $win.innerHeight(); // viewport height
    var scrollPoint = top + height;

    if (scrollPoint > lazyPoint && !loading) {
        getTableData(); // ajax request
        loading = true; // prevent more than 1 request
    }
});

// fist start
calcLazyPoint();
ответил IonDen 20 +03002015-10-20T16:00:42+03:00312015bEurope/MoscowTue, 20 Oct 2015 16:00:42 +0300 2015, 16:00:42
0

Вы можете использовать jQuery.isInView , мою библиотеку и в значительной степени следуйте пример использования , который реализует отложенную загрузку.

ответил hashchange 20 +03002015-10-20T18:52:00+03:00312015bEurope/MoscowTue, 20 Oct 2015 18:52:00 +0300 2015, 18:52:00

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132