4

jQuery ライブラリの DataTables の使用に問題があります。私は彼らのドキュメントに従っていますが、奇妙な問題に遭遇しました。まず、FixedColumn 機能を使用しようとしましたが、提供されている例でさえ実行されません (少なくともhttp://datatables.net/extras/fixedcolumns/#からリンクされた jsBin セットアップの例ではありません) 。 . ただし、私の主な懸念は、DataTables からまったく機能を取得できないことです。問題を特定するためだけに作業しようとしているサイトの簡略化されたバージョンを作成しました。簡略化されたコードは jsBin で (ある程度) 機能しますが、自分のシステムではまったく機能しません。簡略化されたコードを以下に示します。この問題の原因を知っている人はいますか?

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
    <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
    <script>
    $(document).ready(function () {
        var travelTableScroll = $('#travelTable').dataTable();

        new FixedColumns(travelTableScroll);
    });
    </script>
</head>

<body>
    <table id="travelTable" class="display">
        <thead>
            <tr>
                <th>Employee</th>
                <th>January</th>
                <th>February</th>
                <th>March</th>
                <th>April</th>
                <th>May</th>
                <th>June</th>
                <th>July</th>
                <th>August</th>
                <th>September</th>
                <th>October</th>
                <th>November</th>
                <th>December</th>
                <th>January</th>
                <th>February</th>
                <th>March</th>
                <th>April</th>
                <th>May</th>
                <th>June</th>
                <th>July</th>
                <th>August</th>
                <th>September</th>
                <th>October</th>
                <th>November</th>
                <th>December</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

更新: まあ、以下に提案するように、各行に適切な数のセルを追加しようとしました。また、FixedColumns へのリンクも含めました (これは DataTables の一部であり、個別に含める必要はないと想定していましたが、そうではないと思います)。ただし、まだ機能がありません。同じ問題かどうかはわかりませんが (過去 1 年間、コンソール出力の存在をどういうわけか忘れていました。長い間 Web デザインから離れていました)、今はエラーが発生していますTypeError: $(...).dataTable is not a function。Google で調べてみましたが、考えられる原因は、DataTables がロードされていないか、jQuery が 2 回ロードされていることです。問題がどこから来ているのかわかりませんが、問題のリンク/スクリプト行の前にあるのは次のとおりです。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://datatables.net/release-datatables/extras/FixedColumns/media/js/FixedColumns.js"></script>

最終更新: この最後の問題の原因を突き止めました。Microsoft の恐ろしい Visual Studio エディターの .NET フレームワークを使用しているため、レイアウト ファイルを完全には見ていませんでした。他のバージョンの jQuery をインポートしました。どうやらそれが問題だったようです。削除すると、テーブルが適切にレンダリングされるようになったからです。助けてくれてありがとう！

4

4 に答える 4

0

これのjsfiddleは素晴らしいでしょう-いくつかのxおよびyスクロールオプションで初期化すべきではありませんか?

例えば。"sScrollY": "300px"、"sScrollX": "100%"、"sScrollXInner": "150%"、"bScrollCollapse": true、"bPaginate": false

于 2013-05-29T20:36:45.653 に答える
0

DataTables の webiste のコードがそのような理由はわかりませんが、sScrollYプロパティを設定することで固定ヘッダーが取得されます (通常は と共にbPaginate):

var oTable = $('#travelTable').dataTable( {
    "sScrollY": "300px",
    "bPaginate": false
} );

また、Lil Piggy が言及しているように、<thead>HASの列の数が<tbody>

JSBinデモ

于 2013-05-29T20:40:34.757 に答える