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

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

ただいまの
回答率

87.61%

DataTablesで複数項目のソートを実装したい(order by X, Yのようなこと)。

受付中

回答 1

投稿 編集

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

score 0

DataTablesのX,Y,Zという項目のテーブルを作成しました。
このテーブルに対して、
1回目の操作:X項目でソート
2回目の操作:Y項目でソート
という操作を行った際に、X項目でソートした結果を
Y項目でソートするといったことは可能なのでしょうか?
(SQLで"order by X,Y"した状態と考えてもらえばわかりやすいでしょうか)
※cerfwebさんの回答でデフォルト動作が"order by Y,X"になることはわかりました。ありがとうございます。

ソートボタンをクリックした際に複数項目を指定してorder()を実行すればできるかと
思いましたが、意図したようにソートされませんでした。。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.22/datatables.min.css"/>

    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.22/datatables.min.js"></script>
        <title></title>
</head>
<body>
    <table id="test-table" class="table table-bordered">
        <thead>
            <tr><th>No</th><th>都道府県</th><th>test</th></tr>
        </thead>
        <tbody>
            <tr><td>1</td><td>北海道</td><td>ZZZ</td></tr>
            <tr><td>2</td><td>北海道</td><td>AAA</td></tr>
            <tr><td>3</td><td>岩手県</td><td>AAA</td></tr>
            <tr><td>4</td><td>岩手県</td><td>XXX</td></tr>
            <tr><td>5</td><td>岩手県</td><td>DDD</td></tr>
            <tr><td>6</td><td>山形県</td><td>CCC</td></tr>
            <tr><td>7</td><td>山形県</td><td>FFF</td></tr>
            <tr><td>8</td><td>山形県</td><td>VVV</td></tr>
            <tr><td>9</td><td>青森県</td><td>AAA</td></tr>
            <tr><td>10</td><td>青森県</td><td>BBB</td></tr>
            <tr><td>11</td><td>青森県</td><td>ZZZ</td></tr>
        </tbody>
    </table>
    <div id="info"></div>
</body>
<script>
    var table = $("#test-table").DataTable();
    var orders = [];
    table.on("order.dt", function() {
        console.log("order.dt");
        var newOrder = table.order();
        orders.push([newOrder[0][0], newOrder[0][1]]);
        table.order(orders);
    });


</script>

</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

+1

DataTablesの仕様はデフォルトでそのようになっていませんか。
参考までに、特定のカラムをクリック(ソート)したら他の特定のカラムも同時にソート対象に含めるという設定も可能です。
https://datatables.net/examples/basic_init/multi_col_sort

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/11/25 23:38

    回答いただきありがとうございます。
    デフォルトが ordering:true だからソートはできているという意味でしょうか?
    提示いただいたURLは見てみましたが、これだと特定項目をクリックした際に設定してある項目も並び替えるという感じですよね。ユーザがクリックしたものをソート条件に加えていくのとはちょっと違う。(これを応用すればできる?)

    ソートを探している際に以下のURLは確認しましたが、これを見る限りクリックした項目に対してだけソートしているように見えます。。(私の理解が足りないだけ?)
    https://datatables.net/examples/basic_init/table_sorting.html

    キャンセル

  • 2020/11/25 23:45 編集

    デフォルトでの仕様で、1回目の操作:X項目でソート、2回目の操作:Y項目でソート、とした場合に、
    ORDER BY Y, X のようになっていませんか。お望みの動作の仕方とは順序が違いますかね。

    キャンセル

  • 2020/11/26 01:19

    ORDER BY Y,Xになるんですね。
    ORDER BY X,Yとしたかったので違ってました。。

    キャンセル

  • 2020/12/05 23:47

    "order by Y,X"となるのが標準的・一般的な動作ですので、逆のことをやってしまうとユーザの混乱を招きます。cerfwebさんの回答で解決にして、標準的なほうに仕様を修正しませんか?

    もしX→Yの順序で"order by X,Y"を実現するのであれば、最初にYでソートする処理と、X→Yの順にソートするときの処理とが別物になるため、初回の「Xでソートした」という情報を記憶しておく必要があります。
    また、最初に間違えてYでソートしたユーザがどうやって"order by X,Y"を実現するのかを考える必要があり、キャンセルボタンも必要になってきます。
    ※ X→Yの順序で"order by Y,X"となる標準仕様は、最初に間違えてYでソートした場合でも、Y→X→Yと操作することで目的の"order by Y,X"を実現できます。

    キャンセル

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

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

関連した質問

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