0

説明するのはちょっと難しいですが、試してみましょう:
テーブルをコンテナの中に入れたいと思います。このコンテナーの高さは 500px などに固定されており、テーブルはかなり長く (2100 など)、各行の高さは異なる場合があります。

テーブルが作成されると、すべての行が非表示になります。コンテナーの高さに基づいて計算を行い、コンテナー内に表示される行数を調べたいと思います。最初の 15 行または最初の 17 行の可能性があります (一部の行の高さが大きいため)。

それを行った後、それらの行をしばらくそこにとどめ、再び非表示にし、次のページを取得するために別の計算を行います...ここで難しいのは、jqueryを使用して計算を行う方法ですか?

4

4 に答える 4

1

これは、「しばらく滞在し、しばらくしてから次の行セットをフェッチする」という部分には取り組みませんが、適切な行を示す高さの簡単な計算を次に示します。

http://jsfiddle.net/yvAtW/

JS

allowedHeight = $("div").height();
actualHeight = 0;

$("tr").each(function(){
    actualHeight += $(this).height();
    if(actualHeight < allowedHeight) {
        $(this).show();
    }
});
​

HTML

<div>
<table>
    <tr class="height0">
        <td>Row</td>
    </tr>
    <tr class="height1">
        <td>Row</td>
    </tr>
    <tr class="height2">
        <td>Row</td>
    </tr>
    <tr class="height1">
        <td>Row</td>
    </tr>
    <tr class="height0">
        <td>Row</td>
    </tr>
</table>
</div>​

CSS

div{
    height:100px; /* fixed height container */
    overflow:hidden; /* Ensures no overflowing content if JS doesn't work */
    padding:10px 15px;
    background:#777;
}
table{
    width:100%;
}
tr{
    display:none; /* all hidden by default */
}
/* different height trs */
.height0{
    height:20px;
    background:#900;
}
.height1{
    height:30px;
    background:#090;
}
.height2{
    height:40px;
    background:#009;
}​
于 2012-07-30T20:25:36.133 に答える
1

jQuery.innerHeight関数と関数を使用して、ブラウザーによって計算された高さを取得できjQuery.outerHeightます。したがって、最初にコンテナの計算された高さを取得できます。次に、合計がコンテナの計算された高さよりも大きくなるまで、行を反復処理して計算された高さを追加することができます..

お役に立てれば。

于 2012-07-30T19:39:25.643 に答える
0

行の高さを合計して行を反復処理します。500 を超えたら、最後の行を除いて一連の行を取得します。それらを表示します。ある種のマーカー、おそらく変数またはデータ注釈を使用して、現在の場所を追跡します。

于 2012-07-30T19:39:29.497 に答える
-1

おそらく、次のようなことができます。

fits = true;
while(fits){
    $(table).append('<tr>...</tr>');

    if($(table).css('height') >= $('#container').css('height'))
        fits = false;
}
于 2012-07-30T19:39:54.897 に答える