3

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();
    });

コード ビハインドはそれほど興味深いものではなく、DB からこの形式 (各行に 1 つ) でデータ (毎回 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);

また

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

また

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

しかし、どれも機能しませんでした。HTMLテーブルを使用して正しく実装し、機能させる方法についての提案をお待ちしております。

4

2 に答える 2

2

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 は、この方法と現在試みている方法を比較します。Chrome の DOM インスペクターであなたのやり方を見ると、Chrome がを のdiv前に移動しているように見えますtable。

JSBin のテーブルに境界線を追加して、テーブルのdiv外に移動していることを示しました。

于 2013-01-31T19:23:30.313 に答える
0

内部divはtable本当に必要ありません、IMO。これが機能するかどうか試してください：

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();
}
于 2013-01-31T19:24:06.060 に答える