質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.50%

  • jQuery

    6719questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Thymeleaf

    154questions

    Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

jQuery dataTableのソート機能について

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,045

emeraldworm

score 10

jQuery dataTableを利用したテーブルを作成しているのですが、ソート機能が動作せず困っています。
原因についてご教授いただけないでしょうか。
テンプレートエンジンはThymeleafを使用しています。
以下、ソースコード(抜粋)になります。

<script type="text/javascript">
    <!-- 検索結果テーブルのjQuery -->
    jQuery(function($){
        $.extend( $.fn.dataTable.defaults, {
            language: { url: "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json" }
        });
        $("#logs").dataTable({
            lengthChange: false,
            searching: false,
            ordering: true,
            info: false,
            paging: false,
            scrollX: false,
            scrollY: 322
        });
    });
</script>
<table id="logs" class="table table-bordered table-condensed table-hover dataTable no-footer">
    <thead>
        <tr class="info">
            <th class="text-center">ID</th>
            <th class="text-center">処理日</th>
            <th class="text-center">ジョブ名</th>
            <th class="text-center">タスク名</th>
            <th class="text-center">処理開始日時</th>
            <th class="text-center">処理終了日時</th>
            <th class="text-center">処理ステータス</th>
            <th class="text-center">ログ内容</th>
        </tr>
    </thead>
    <tbody th:remove="all-but-first" th:each="log : ${batch_log_list}">
        <tr>
            <td class="text-center" th:text="${log.id}"></td>
            <td class="text-center" th:text="${log.operation_date}"></td>
            <td class="text-center" th:text="${log.job_name}"></td>
            <td class="text-center" th:text="${log.task_name}"></td>
            <td class="text-center" th:text="${log.start_date}"></td>
            <td class="text-center" th:text="${log.end_date}"></td>
            <td th:if="${log.operation_status == '正常終了'}" class="text-center font-success" th:text="${log.operation_status}"></td>
            <td th:if="${log.operation_status != '正常終了'}" class="text-center font-failed" th:text="${log.operation_status}"></td>
            <td class="text-left" th:utext="${log.log_content}"></td>
        </tr>
    </tbody>
</table>

★実際に出力されたHTMLコード
<table id="logs" class="table table-bordered table-condensed table-hover dataTable no-footer">
    <thead>
        <tr class="info">
            <th class="text-center">ID</th>
            <th class="text-center">処理日</th>
            <th class="text-center">ジョブ名</th>
            <th class="text-center">タスク名</th>
            <th class="text-center">処理開始日時</th>
            <th class="text-center">処理終了日時</th>
            <th class="text-center">処理ステータス</th>
            <th class="text-center">ログ内容</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="text-center" rowspan="1" colspan="1">12</td>
            <td class="text-center" rowspan="1" colspan="1">2017/02/01</td>
            <td class="text-center" rowspan="1" colspan="1">CoreBatch</td>
            <td class="text-center" rowspan="1" colspan="1">ImportCompanyData</td>
            <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:55:00</td>
            <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:55:01</td>
            <td class="text-center font-success" rowspan="1" colspan="1">正常終了</td>

            <td class="text-left" rowspan="1" colspan="1">バッチ処理が正常終了しました。</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td class="text-center" rowspan="1" colspan="1">11</td>
            <td class="text-center" rowspan="1" colspan="1">2017/01/30</td>
            <td class="text-center" rowspan="1" colspan="1">CoreBatch</td>
            <td class="text-center" rowspan="1" colspan="1">ImportCompanyData</td>
            <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:55:00</td>
            <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:55:01</td>
            <td class="text-center font-success" rowspan="1" colspan="1">正常終了</td>

            <td class="text-left" rowspan="1" colspan="1">バッチ処理が正常終了しました。</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td class="text-center" rowspan="1" colspan="1">10</td>
            <td class="text-center" rowspan="1" colspan="1">2017/01/10</td>
            <td class="text-center" rowspan="1" colspan="1">CoreBatch</td>
            <td class="text-center" rowspan="1" colspan="1">ImportCompanyData</td>
            <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:40:07</td>
            <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:40:59</td>

            <td class="text-center font-failed" rowspan="1" colspan="1">異常終了</td>
            <td class="text-left" rowspan="1" colspan="1">dept_auth_msts_sub:ファイルが存在しません。</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td class="text-center" rowspan="1" colspan="1">9</td>
            <td class="text-center" rowspan="1" colspan="1">2017/01/01</td>
            <td class="text-center" rowspan="1" colspan="1">CoreBatch</td>
            <td class="text-center" rowspan="1" colspan="1">ImportCompanyData</td>
            <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:12:11</td>
            <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:14:15</td>
            <td class="text-center font-success" rowspan="1" colspan="1">正常終了</td>

            <td class="text-left" rowspan="1" colspan="1">バッチ処理が正常終了しました。</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td class="text-center" rowspan="1" colspan="1">8</td>
            <td class="text-center" rowspan="1" colspan="1">2017/02/01</td>
            <td class="text-center" rowspan="1" colspan="1">CoreBatch</td>
            <td class="text-center" rowspan="1" colspan="1">ImportCompanyData</td>
            <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:55:00</td>
            <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:55:01</td>
            <td class="text-center font-success" rowspan="1" colspan="1">正常終了</td>

            <td class="text-left" rowspan="1" colspan="1">バッチ処理が正常終了しました。</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td class="text-center" rowspan="1" colspan="1">7</td>
            <td class="text-center" rowspan="1" colspan="1">2017/01/30</td>
            <td class="text-center" rowspan="1" colspan="1">CoreBatch</td>
            <td class="text-center" rowspan="1" colspan="1">ImportCompanyData</td>
            <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:55:00</td>
            <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:55:01</td>
            <td class="text-center font-success" rowspan="1" colspan="1">正常終了</td>

            <td class="text-left" rowspan="1" colspan="1">バッチ処理が正常終了しました。</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td class="text-center" rowspan="1" colspan="1">6</td>
            <td class="text-center" rowspan="1" colspan="1">2017/01/10</td>
            <td class="text-center" rowspan="1" colspan="1">CoreBatch</td>
            <td class="text-center" rowspan="1" colspan="1">ImportCompanyData</td>
            <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:40:07</td>
            <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:40:59</td>

            <td class="text-center font-failed" rowspan="1" colspan="1">異常終了</td>
            <td class="text-left" rowspan="1" colspan="1">dept_auth_msts_sub:ファイルが存在しません。</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td class="text-center" rowspan="1" colspan="1">5</td>
            <td class="text-center" rowspan="1" colspan="1">2017/01/01</td>
            <td class="text-center" rowspan="1" colspan="1">CoreBatch</td>
            <td class="text-center" rowspan="1" colspan="1">ImportCompanyData</td>
            <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:12:11</td>
            <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:14:15</td>
            <td class="text-center font-success" rowspan="1" colspan="1">正常終了</td>

            <td class="text-left" rowspan="1" colspan="1">バッチ処理が正常終了しました。</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td class="text-center" rowspan="1" colspan="1">4</td>
            <td class="text-center" rowspan="1" colspan="1">2017/02/01</td>
            <td class="text-center" rowspan="1" colspan="1">CoreBatch</td>
            <td class="text-center" rowspan="1" colspan="1">ImportCompanyData</td>
            <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:55:00</td>
            <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:55:01</td>
            <td class="text-center font-success" rowspan="1" colspan="1">正常終了</td>

            <td class="text-left" rowspan="1" colspan="1">バッチ処理が正常終了しました。</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td class="text-center" rowspan="1" colspan="1">3</td>
            <td class="text-center" rowspan="1" colspan="1">2017/01/30</td>
            <td class="text-center" rowspan="1" colspan="1">CoreBatch</td>
            <td class="text-center" rowspan="1" colspan="1">ImportCompanyData</td>
            <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:55:00</td>
            <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:55:01</td>
            <td class="text-center font-success" rowspan="1" colspan="1">正常終了</td>

            <td class="text-left" rowspan="1" colspan="1">バッチ処理が正常終了しました。</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td class="text-center" rowspan="1" colspan="1">2</td>
            <td class="text-center" rowspan="1" colspan="1">2017/01/10</td>
            <td class="text-center" rowspan="1" colspan="1">CoreBatch</td>
            <td class="text-center" rowspan="1" colspan="1">ImportCompanyData</td>
            <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:40:07</td>
            <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:40:59</td>

            <td class="text-center font-failed" rowspan="1" colspan="1">異常終了</td>
            <td class="text-left" rowspan="1" colspan="1">dept_auth_msts_sub:ファイルが存在しません。</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td class="text-center" rowspan="1" colspan="1">1</td>
            <td class="text-center" rowspan="1" colspan="1">2017/01/01</td>
            <td class="text-center" rowspan="1" colspan="1">CoreBatch</td>
            <td class="text-center" rowspan="1" colspan="1">ImportCompanyData</td>
            <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:12:11</td>
            <td class="text-center" rowspan="1" colspan="1">2017/02/01 11:14:15</td>
            <td class="text-center font-success" rowspan="1" colspan="1">正常終了</td>

            <td class="text-left" rowspan="1" colspan="1">バッチ処理が正常終了しました。</td>
        </tr>
    </tbody>
</table>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • masaya_ohashi

    2017/02/02 15:19

    ソート機能が動作しない、とはどういう状況を指しますか?そもそもカラムヘッダにソート矢印ボタンが出ない、押しても反応しない、ソート順がおかしいなど、詳細に書いてください。また、質問文のコードは```で囲んでください。見やすく整形されます。

    キャンセル

  • emeraldworm

    2017/02/02 16:51

    動作しないというのは、ヘッダー部をクリックしても反応しない(ソートがされない)という状況です。

    キャンセル

  • masaya_ohashi

    2017/02/02 17:03

    どのカラムでもソートされないという状況は同じですか?

    キャンセル

  • emeraldworm

    2017/02/02 18:02

    はい。どのカラムをクリックしてもソートされないです。

    キャンセル

回答 1

checkベストアンサー

+2

https://jsfiddle.net/arsvsrxq/1/
質問文の記述をそのままjsFiddleに書いたらソート機能は正しく動いています。原因は別の場所にありそうです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/02 18:08

    masaya_ohashi様

    ご回答いただき有難うございます。
    tbodyの中身を静的な内容にしたところ確かにソートは動作いたしました。

    実際にはcontrollerにて取得したデータ(batch_log_list)をmodel.addAttributeで詰め、
    それをth:eachで出力しているのですが、ここに問題がありますでしょうか?

    キャンセル

  • 2017/02/02 18:15

    テストした静的な内容とは、実際に一度ページを表示したときにtbodyに詰められたhtmlをコピーして使用されましたか?それともjsFiddleからコピーしてきて使用しましたか?もし後者であれば、差し障りなければ前者の内容を質問文に追記していただけますか?

    キャンセル

  • 2017/02/02 18:30

    masaya_ohashi様

    ご回答いただき有難うございます。

    実際に出力された内容をコピーすることはしていなかったので、試してみたところ、
    どうやら各行ごとがtbodyで囲まれている形になっているようです。
    ここが怪しい感じがしますが、関係ありますでしょうか?
    実際の内容を質問内容に追記いたしました。

    キャンセル

  • 2017/02/02 18:33

    th:eachの位置がおかしかったようです・・・
    <tbody>ではなく、その下の
    <tr th:each="log : ${batch_log_list}">としたところ、正しくソートが動作しました。

    初歩的なミスで申し訳ありません。
    大変助かりました。有難うございました。

    キャンセル

  • 2017/02/02 18:38

    解決してよかったです。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • jQuery

    6719questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Thymeleaf

    154questions

    Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。