1

私の問題を再現するために作成したjsfiddleを参照してください。http://jsfiddle.net/motocomdigital/22KFS/3/

私のプロジェクトでは、並べ替え可能なテーブルを作成しました。これを行うには、非常に単純なjqueryプラグインであるjqueryテーブルソーターを使用しました。テーブルソーターも jsfidde に含まれています。テーブル ヘッダーをクリックすると、テーブルの列が降順から昇順で並べ替えられていることがわかります。

これでいいのですが、問題は...

私のライブ Web サイトでは、テーブルの高さは約 125 行です。そして、テーブルのページネーションは絶対に避けたいです。

だから私の考えは、ほぼ機能しているjQueryでスクロールするときにテーブルヘッダーを修正することでした。私のフィドルを見てください。ヘッダーをページの上部に固定するために使用したjQueryは機能します。

問題は、テーブル ヘッダーが固定され、テーブルが 1 行上に移動し、非常にグリッチになるためです。

グリッチを取り除き、ウィンドウの上部に達したときに行をスキップするのを止めてください。

助けてくれて本当にありがとう。


ここでjsfiddleを参照してくださいhttp://jsfiddle.net/motocomdigital/22KFS/3/


jQuery

var $window     = $(window),
    $tableHead  = $(".table-head"),
    offset      = $tableHead.offset();

$window.scroll(function() {
    if ($window.scrollTop() > offset.top) {
        $tableHead.addClass('fixed');
    } else {
        $tableHead.removeClass('fixed');
    }
});


CSS

.fixed {
   position: fixed;
   top: 0;
}


HTML

<table id="table-sorter" width="400" border="0" cellspacing="0" cellpadding="10">         
    <thead>
            <tr class="table-head">
                <th width="100" height="18" valign="middle">Number</th>
                <th width="100" height="18" valign="middle">First Name</th>
                <th width="100" height="18" valign="middle">Surname</th>
                <th width="100" height="18" valign="middle">System</th>
            </tr>
    </thead>
    <tbody>
            <tr>
                <td>1</td>
                <td>John</td>
                <td>Smith</td>
                <td>Wordpress</td>     
            </tr>

            ... ...

    </tbody>
</table>



4

1 に答える 1

3

問題を解決しました。まだ気付いていない場合は、ジャンプする理由は、位置を固定するときにテーブルからヘッダー行を本質的に削除しているためです。そのため、テーブルの残りの部分がジャンプしてギャップを埋めます。

ソリューション？さて、それは議論の余地があります。私の主張を証明するために、実際のヘッダーを修正するときに新しい一時ヘッダーを追加しただけです。これにより、テーブルが所定の位置に保持され、ヘッダーが下に移動できるようになります。上にスクロールすると、一時的なヘッダーが削除されます。

これが最善の方法ですか？わかりませんが、グラフィックの不具合が発生した場合に備えて、一時的な解決策として実際のヘッダーを複製することをお勧めします。これは、複数の行を持つヘッダーの場合 (したがって、高さを下げる)、正確なクローンを取得しているため、効果が維持されることも意味します。

とにかく、コードを続けてください：http://jsfiddle.net/chricholson/22KFS/5/

$("#table-sorter").tablesorter({
 widgets: ['zebra']
});


var $window     = $(window),
    $tableHead  = $(".table-head"),
    offset      = $tableHead.offset();

$window.scroll(function() {


    if ($window.scrollTop() > offset.top) {
        $tableHead.addClass('fixed');
        if ($('#table-sorter thead tr.temp').length <= 0){
            $('#table-sorter thead').append('<tr class="temp"><td>hello</td></tr>');
        }
    } else {
        $tableHead.removeClass('fixed');
        $('tr.temp').remove();
    }


});

幸運を祈ります。

編集

clone() http://jsfiddle.net/chricholson/22KFS/8/を使用した実用的な製品は次のとおりです。

コード：

$("#table-sorter").tablesorter({
     widgets: ['zebra']
});


var $window     = $(window),
    $tableHead  = $(".table-head"),
    offset      = $tableHead.offset();

$window.scroll(function() {


    if ($window.scrollTop() > offset.top) {
        $tableHead.addClass('fixed');
        if ($('#table-sorter thead tr.temp').length <= 0){
            $tableHead.clone().appendTo('#table-sorter thead').removeClass('fixed').addClass('temp');
        }
    } else {
        $tableHead.removeClass('fixed');
        $('tr.temp').remove();
    }


});    ​
于 2012-03-09T16:34:33.407 に答える