Бесконечная прокрутка (загрузка при прокрутке) с тегом таблицы html

Я попытался реализовать бесконечную прокрутку или «загрузку при прокрутке», если хотите, в html-таблице. Данные хранятся в базе данных, и я получаю к ним доступ с помощью своего кода.

Я реализовал это из примера на msdn так:

JS

 $(document).ready(function () { 

        function lastRowFunc() { 
            $('#divDataLoader').html('<img src="images/ajax-Loader.gif">'); 

            //send a query to server side to present new content 
            $.ajax({ 
                type: "POST", 
                url: "updates.aspx/GetRows", 
                data: "{}", 
                contentType: "application/json; charset=utf-8", 
                dataType: "json", 
                success: function (data) { 

                    if (data != "") { 
                        $('.divLoadedData:last').before(data.d);
                    } 
                    $('#divDataLoader').empty(); 
                } 

            }) 
        }; 

        //When scroll down, the scroller is at the bottom with the function below and fire the lastRowFunc function 
        $(window).scroll(function () { 
            if ($(window).scrollTop() == $(document).height() - $(window).height()) { 
                lastRowFunc(); 
            } 
        });

        // Call to fill the first items
        lastRowFunc();
    });

Код не так интересен, он просто возвращает данные (каждый раз по 20 строк) из БД в таком формате (по одному на каждую строку):

<tr><td>Cell 1 data</td><td>Cell 2 data</td><td>Cell 3 data</td></tr>

ASPX

<table>
<thead>
    <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
</thead>
    <tbody>
        <div class="divLoadedData"> 
        </div>
    </tbody>
</table>
<div id="divDataLoader"> 
</div>

Проблема заключается в том, когда данные загружаются и вставляются на страницу (даже при первой загрузке), заголовки таблиц идут после данных. Я вижу все загруженные строки, но заголовки таблиц находятся внизу страницы (после 20 загруженных строк). Я попробовал несколько вариантов вставки загруженных данных:

$('.divLoadedData:last').before(data.d);

or 

$('.divLoadedData:last').append(data.d);

or 

$('.divLoadedData:last').after(data.d);

но ни один из них не работал. Был бы рад услышать любые предложения о том, как правильно реализовать его с таблицей html и заставить его работать.


javascript jquery asp.net html-table infinite-scroll
person ronlut    schedule 31.01.2013    source источник
comment
Вы получаете заголовки от веб-сервиса? или они жестко запрограммированы? в вашем примерном коде они жестко закодированы и, следовательно, не должны перемещаться ниже чего-либо, вставленного в элемент под ними.   -  person abc123    schedule 31.01.2013

Ответы (2)


arrow_upward
2
arrow_downward

Это может быть связано с недопустимым HTML: tbody должен содержать только tr. Почему бы не добавить строки непосредственно к tr, как это?

HTML

<table>
 <thead>
  <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
 </thead>
 <tbody class="tbodyLoadedData">
 </tbody>
</table>
<div id="divDataLoader"> 
</div>

JS

$('.tbodyLoadedData').append(data.d);

Этот JSBin сравнивает этот способ и способ, которым вы сейчас пытаетесь. Глядя на ваш путь в инспекторе DOM Chrome, кажется, что Chrome перемещает div перед table.

Я добавил границу к таблице в JSBin, чтобы показать, что div перемещается за ее пределы.

person Tom Smilack    schedule 31.01.2013
comment
Спасибо за ваш вклад, попробую на следующей неделе, когда буду перед своим рабочим компьютером (интранет). Отмечу как ответ, если работает конечно - person ronlut; 31.01.2013

arrow_upward
0
arrow_downward

div внутри table на самом деле не нужен, ИМО. Попробуйте, если это сработает:

ASPX:

<table>
  <thead>
    <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
  </thead>
  <tbody class="divLoadedData">
  </tbody>
</table>
<div id="divDataLoader"> 
</div>

Успешный обратный вызов:

function (data) { 
    if (data != "") { 
        $('.divLoadedData').append(data.d);
    } 
    $('#divDataLoader').empty();
}
person Hari Pachuveetil    schedule 31.01.2013