質問編集履歴

6 内容更新

forn

forn score 0

2020/11/29 22:35  投稿

DataTablesで複数項目のソートを実装したい(order by X, Yのようなこと)。
DataTablesのX,Y,Zという項目のテーブルを作成しました。
このテーブルに対して、
 1回目の操作:X項目でソート
 2回目の操作:Y項目でソート
という操作を行った際に、X項目でソートした結果を
Y項目でソートするといったことは可能なのでしょうか?
(SQLで"order by X,Y"した状態と考えてもらえばわかりやすいでしょうか)
※cerfwebさんの回答でデフォルト動作が"order by Y,X"になることはわかりました。ありがとうございます。  
```ここに言語を入力
ソートボタンをクリックした際に複数項目を指定してorder()を実行すればできるかと
思いましたが、意図したようにソートされませんでした。。
サンプルコード
```javascript
<!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>AAA</td></tr>
           <tr><td>2</td><td>青森県</td><td>ZZZ</td></tr>
           <tr><td>1</td><td>岩手県</td><td>SSS</td></tr>
           <tr><td>2</td><td>宮城県</td><td>XXX</td></tr>
           <tr><td>3</td><td>秋田県</td><td>DDD</td></tr>
           <tr><td>4</td><td>山形県</td><td>CCC</td></tr>
           <tr><td>5</td><td>福島県</td><td>FFF</td></tr>
           <tr><td>8</td><td>茨城県</td><td>VVV</td></tr>
           <tr><td>9</td><td>栃木県</td><td>GGG</td></tr>
           <tr><td>10</td><td>群馬県</td><td>BBB</td></tr>
           <tr><td>47</td><td>沖縄県</td><td>UUU</td></tr>
           <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 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>
```
  • JavaScript

    38069 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

5 誤字修正

forn

forn score 0

2020/11/25 23:39  投稿

DataTablesで複数項目のソートを実装したい(order by X, Yのようなこと)。
DataTablesのX,Y,Zという項目のテーブルを作成しました。
このテーブルに対して、
 1回目の操作:X項目でソート
 2回目の操作:Y項目でソート
という操作を行った際に、X項目でソートした結果を
Y項目でソートするといったことは可能なのでしょうか?
(SQLで"order by B,D"した状態と考えてもらえばわかりやすいでしょうか)
(SQLで"order by X,Y"した状態と考えてもらえばわかりやすいでしょうか)
```ここに言語を入力
<!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>AAA</td></tr>
           <tr><td>2</td><td>青森県</td><td>ZZZ</td></tr>
           <tr><td>1</td><td>岩手県</td><td>SSS</td></tr>
           <tr><td>2</td><td>宮城県</td><td>XXX</td></tr>
           <tr><td>3</td><td>秋田県</td><td>DDD</td></tr>
           <tr><td>4</td><td>山形県</td><td>CCC</td></tr>
           <tr><td>5</td><td>福島県</td><td>FFF</td></tr>
           <tr><td>8</td><td>茨城県</td><td>VVV</td></tr>
           <tr><td>9</td><td>栃木県</td><td>GGG</td></tr>
           <tr><td>10</td><td>群馬県</td><td>BBB</td></tr>
           <tr><td>47</td><td>沖縄県</td><td>UUU</td></tr>
       </tbody>
   </table>
   <div id="info"></div>
</body>
<script>
  var table = $("#test-table").DataTable();
</script>
</html>
```
  • JavaScript

    38069 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

4 データ差し替え

forn

forn score 0

2020/11/25 23:39  投稿

DataTablesで複数項目のソートを実装したい(order by X, Yのようなこと)。
DataTablesのX,Y,Zという項目のテーブルを作成しました。
このテーブルに対して、
 1回目の操作:X項目でソート
 2回目の操作:Y項目でソート
という操作を行った際に、X項目でソートした結果を
Y項目でソートするといったことは可能なのでしょうか?
(SQLで"order by B,D"した状態と考えてもらえばわかりやすいでしょうか)
```ここに言語を入力
<!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>AAA</td></tr>
           <tr><td>2</td><td>青森県</td><td>ZZZ</td></tr>
           <tr><td>3</td><td>岩手県</td><td>SSS</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>1</td><td>岩手県</td><td>SSS</td></tr>
           <tr><td>2</td><td>宮城県</td><td>XXX</td></tr>
           <tr><td>3</td><td>秋田県</td><td>DDD</td></tr>
           <tr><td>4</td><td>山形県</td><td>CCC</td></tr>
           <tr><td>5</td><td>福島県</td><td>FFF</td></tr>
           <tr><td>8</td><td>茨城県</td><td>VVV</td></tr>
           <tr><td>9</td><td>栃木県</td><td>GGG</td></tr>
           <tr><td>10</td><td>群馬県</td><td>BBB</td></tr>
           <tr><td>47</td><td>沖縄県</td><td>UUU</td></tr>
       </tbody>
   </table>
   <div id="info"></div>
</body>
<script>
  var table = $("#test-table").DataTable();
</script>
</html>
```
  • JavaScript

    38069 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

3 余計な設定削除

forn

forn score 0

2020/11/25 22:59  投稿

DataTablesで複数項目のソートを実装したい(order by X, Yのようなこと)。
DataTablesのX,Y,Zという項目のテーブルを作成しました。
このテーブルに対して、
 1回目の操作:X項目でソート
 2回目の操作:Y項目でソート
という操作を行った際に、X項目でソートした結果を
Y項目でソートするといったことは可能なのでしょうか?
(SQLで"order by B,D"した状態と考えてもらえばわかりやすいでしょうか)
```ここに言語を入力
<!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>AAA</td></tr>
           <tr><td>2</td><td>青森県</td><td>ZZZ</td></tr>
           <tr><td>3</td><td>岩手県</td><td>SSS</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>GGG</td></tr>
           <tr><td>10</td><td>群馬県</td><td>BBB</td></tr>
           <tr><td>47</td><td>沖縄県</td><td>UUU</td></tr>
       </tbody>
   </table>
   <div id="info"></div>
</body>
<script>
  var table = $("#test-table").DataTable({
      //select:true
      rowReorder: true,
      orderMulti:false
      });
  var table = $("#test-table").DataTable();
</script>
</html>
```
  • JavaScript

    38069 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

2 サンプルコード追加

forn

forn score 0

2020/11/25 22:58  投稿

DataTablesで複数項目のソートを実装したい(order by X, Yのようなこと)。
DataTablesのX,Y,Zという項目のテーブルを作成しました。
このテーブルに対して、
 1回目の操作:X項目でソート
 2回目の操作:Y項目でソート
という操作を行った際に、X項目でソートした結果を
Y項目でソートするといったことは可能なのでしょうか?
(SQLで"order by B,D"した状態と考えてもらえばわかりやすいでしょうか)
(SQLで"order by B,D"した状態と考えてもらえばわかりやすいでしょうか)
```ここに言語を入力
<!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>AAA</td></tr>
           <tr><td>2</td><td>青森県</td><td>ZZZ</td></tr>
           <tr><td>3</td><td>岩手県</td><td>SSS</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>GGG</td></tr>
           <tr><td>10</td><td>群馬県</td><td>BBB</td></tr>
           <tr><td>47</td><td>沖縄県</td><td>UUU</td></tr>
       </tbody>
   </table>
   <div id="info"></div>
</body>
<script>
  var table = $("#test-table").DataTable({
      //select:true
      rowReorder: true,
      orderMulti:false
      });
</script>
</html>
```
  • JavaScript

    38069 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1 初心者アイコン設定

forn

forn score 0

2020/11/25 22:16  投稿

DataTablesで複数項目のソートを実装したい(order by X, Yのようなこと)。
DataTablesのX,Y,Zという項目のテーブルを作成しました。
このテーブルに対して、
 1回目の操作:X項目でソート
 2回目の操作:Y項目でソート
という操作を行った際に、X項目でソートした結果を
Y項目でソートするといったことは可能なのでしょうか?
(SQLで"order by B,D"した状態と考えてもらえばわかりやすいでしょうか。)
(SQLで"order by B,D"した状態と考えてもらえばわかりやすいでしょうか)
  • JavaScript

    38069 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る