0

jsp ページでの作業。最初の行 (ヘッダー) は、ページを下にスクロールするときに固定する必要があります。JQueryが提供する機能を使用して実装しようとしていますが、実りはありませんでした。サンプルコードは次のとおりです: refs :

<script type="text/javascript" src="<c:url value=" /resources/js/jquery-2.1.3.js "/>"></script>
<script type="text/javascript" src="<c:url value=" /resources/js/jquery.dataTables.min.js "/>"></script>
<script type="text/javascript" src="<c:url value=" /resources/js/dataTables.fixedHeader.js "/>"></script>
<script type="text/javascript" src="<c:url value=" /resources/js/dataTables.fixedHeader.min.js "/>"></script>
<script>
$(document).ready(function() {
    $('#draytable_pickup').dataTable({
        "paging": true,
        "ordering": true
    });

    //   $('#draytable_pickup').addClass('fixed');         
});

$(document).ready(function() {
    $('#draytable_pickup').fixedHeaderTable('show');
});
</script>
<table id="draytable_pickup" class="table table-hover table-striped table-bordered table-condensed small" data-link="row">
    <thead>
        <tr>
        ....
        ....
        </tr>

オンラインの提案がうまくいかないようです。誰かが私に何をする方法を提案してもらえますか?

4

1 に答える 1

0

これが実際の例です: https://jsfiddle.net/dLz8evtb/

一番下までスクロールしたにもかかわらず、ヘッダーが表示されているスクリーンショットを次に示します。ページ番号も表示されます。

jsfiddleのスクリーンショット

JavaScript は次のとおりです。

$(document).ready(function() {
    var dt = $('#draytable_pickup').DataTable({
        "paging": true,
        "ordering": true,
        "pageLength": 50
    });
    new $.fn.dataTable.FixedHeader( dt );
});

スクロールしやすいように、pageLength を 50 に設定します。

必要な主なことは、DataTable 呼び出しの結果を変数 (私のコードでは dt) に割り当て、それを $.fn.dataTable.FixedHeader 呼び出しに渡すことです。

ドキュメントを参照してください: https://www.datatables.net/extensions/fixedheader/

編集：元の回答には、httpsではなくhttpを使用して外部ファイルをインポートしたjsfiddleへのリンクがあったことに注意してください。これは一部のブラウザーでは機能しましたが、他のブラウザーではこのコンテンツがブロックされていました。

于 2015-06-09T17:40:37.830 に答える