teratail
回答率
85.30%
質問するログイン新規登録
トップに関する質問DataTablesで複数項目のソートを実装したい(order by X, Yのようなこと)。

編集履歴

質問編集履歴

6

内容更新

2020/11/29 13:35

投稿

forn
forn

スコア0

title CHANGED
File without changes
body CHANGED
@@ -5,8 +5,13 @@
5
5
  という操作を行った際に、X項目でソートした結果を
6
6
  Y項目でソートするといったことは可能なのでしょうか？
7
7
  (SQLで"order by X,Y"した状態と考えてもらえばわかりやすいでしょうか)
8
+ ※cerfwebさんの回答でデフォルト動作が"order by Y,X"になることはわかりました。ありがとうございます。
8
9
 
10
+ ソートボタンをクリックした際に複数項目を指定してorder()を実行すればできるかと
11
+ 思いましたが、意図したようにソートされませんでした。。
12
+
13
+ サンプルコード
9
- ```ここに言語を入力
14
+ ```javascript
10
15
  <!DOCTYPE html>
11
16
  <html lang="ja">
12
17
  <head>
@@ -23,23 +28,32 @@
23
28
  <tr><th>No</th><th>都道府県</th><th>test</th></tr>
24
29
  </thead>
25
30
  <tbody>
31
+ <tr><td>1</td><td>北海道</td><td>ZZZ</td></tr>
26
- <tr><td>1</td><td>北海道</td><td>AAA</td></tr>
32
+ <tr><td>2</td><td>北海道</td><td>AAA</td></tr>
27
- <tr><td>2</td><td>青森県</td><td>ZZZ</td></tr>
28
- <tr><td>1</td><td>岩手県</td><td>SSS</td></tr>
33
+ <tr><td>3</td><td>岩手県</td><td>AAA</td></tr>
29
- <tr><td>2</td><td>宮城県</td><td>XXX</td></tr>
34
+ <tr><td>4</td><td>岩手県</td><td>XXX</td></tr>
30
- <tr><td>3</td><td>秋田県</td><td>DDD</td></tr>
35
+ <tr><td>5</td><td>岩手県</td><td>DDD</td></tr>
31
- <tr><td>4</td><td>山形県</td><td>CCC</td></tr>
36
+ <tr><td>6</td><td>山形県</td><td>CCC</td></tr>
32
- <tr><td>5</td><td>福島県</td><td>FFF</td></tr>
37
+ <tr><td>7</td><td>山形県</td><td>FFF</td></tr>
33
- <tr><td>8</td><td>茨城県</td><td>VVV</td></tr>
38
+ <tr><td>8</td><td>山形県</td><td>VVV</td></tr>
34
- <tr><td>9</td><td>栃木県</td><td>GGG</td></tr>
39
+ <tr><td>9</td><td>青森県</td><td>AAA</td></tr>
35
- <tr><td>10</td><td>群馬県</td><td>BBB</td></tr>
40
+ <tr><td>10</td><td>青森県</td><td>BBB</td></tr>
36
- <tr><td>47</td><td>沖縄県</td><td>UUU</td></tr>
41
+ <tr><td>11</td><td>青森県</td><td>ZZZ</td></tr>
37
42
  </tbody>
38
43
  </table>
39
44
  <div id="info"></div>
40
45
  </body>
41
46
  <script>
42
- var table = $("#test-table").DataTable();
47
+ var table = $("#test-table").DataTable();
48
+ var orders = [];
49
+ table.on("order.dt", function() {
50
+ console.log("order.dt");
51
+ var newOrder = table.order();
52
+ orders.push([newOrder[0][0], newOrder[0][1]]);
53
+ table.order(orders);
54
+ });
55
+
56
+
43
57
  </script>
44
58
 
45
59
  </html>

5

誤字修正

2020/11/29 13:35

投稿

forn
forn

スコア0

title CHANGED
File without changes
body CHANGED
@@ -4,7 +4,7 @@
4
4
  　2回目の操作：Y項目でソート
5
5
  という操作を行った際に、X項目でソートした結果を
6
6
  Y項目でソートするといったことは可能なのでしょうか？
7
- (SQLで"order by B,D"した状態と考えてもらえばわかりやすいでしょうか)
7
+ (SQLで"order by X,Y"した状態と考えてもらえばわかりやすいでしょうか)
8
8
 
9
9
  ```ここに言語を入力
10
10
  <!DOCTYPE html>

4

データ差し替え

2020/11/25 14:39

投稿

forn
forn

スコア0

title CHANGED
File without changes
body CHANGED
@@ -25,11 +25,11 @@
25
25
  <tbody>
26
26
  <tr><td>1</td><td>北海道</td><td>AAA</td></tr>
27
27
  <tr><td>2</td><td>青森県</td><td>ZZZ</td></tr>
28
- <tr><td>3</td><td>岩手県</td><td>SSS</td></tr>
28
+ <tr><td>1</td><td>岩手県</td><td>SSS</td></tr>
29
- <tr><td>4</td><td>宮城県</td><td>XXX</td></tr>
29
+ <tr><td>2</td><td>宮城県</td><td>XXX</td></tr>
30
- <tr><td>5</td><td>秋田県</td><td>DDD</td></tr>
30
+ <tr><td>3</td><td>秋田県</td><td>DDD</td></tr>
31
- <tr><td>6</td><td>山形県</td><td>CCC</td></tr>
31
+ <tr><td>4</td><td>山形県</td><td>CCC</td></tr>
32
- <tr><td>7</td><td>福島県</td><td>FFF</td></tr>
32
+ <tr><td>5</td><td>福島県</td><td>FFF</td></tr>
33
33
  <tr><td>8</td><td>茨城県</td><td>VVV</td></tr>
34
34
  <tr><td>9</td><td>栃木県</td><td>GGG</td></tr>
35
35
  <tr><td>10</td><td>群馬県</td><td>BBB</td></tr>

3

余計な設定削除

2020/11/25 14:39

投稿

forn
forn

スコア0

title CHANGED
File without changes
body CHANGED
@@ -39,11 +39,7 @@
39
39
  <div id="info"></div>
40
40
  </body>
41
41
  <script>
42
- var table = $("#test-table").DataTable({
42
+ var table = $("#test-table").DataTable();
43
- //select:true
44
- rowReorder: true,
45
- orderMulti:false
46
- });
47
43
  </script>
48
44
 
49
45
  </html>

2

サンプルコード追加

2020/11/25 13:59

投稿

forn
forn

スコア0

title CHANGED
File without changes
body CHANGED
@@ -4,4 +4,47 @@
4
4
  　2回目の操作：Y項目でソート
5
5
  という操作を行った際に、X項目でソートした結果を
6
6
  Y項目でソートするといったことは可能なのでしょうか？
7
- (SQLで"order by B,D"した状態と考えてもらえばわかりやすいでしょうか)
7
+ (SQLで"order by B,D"した状態と考えてもらえばわかりやすいでしょうか)
8
+
9
+ ```ここに言語を入力
10
+ <!DOCTYPE html>
11
+ <html lang="ja">
12
+ <head>
13
+ <meta charset="UTF-8">
14
+ <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
15
+ <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.22/datatables.min.css"/>
16
+
17
+ <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.22/datatables.min.js"></script>
18
+ <title></title>
19
+ </head>
20
+ <body>
21
+ <table id="test-table" class="table table-bordered">
22
+ <thead>
23
+ <tr><th>No</th><th>都道府県</th><th>test</th></tr>
24
+ </thead>
25
+ <tbody>
26
+ <tr><td>1</td><td>北海道</td><td>AAA</td></tr>
27
+ <tr><td>2</td><td>青森県</td><td>ZZZ</td></tr>
28
+ <tr><td>3</td><td>岩手県</td><td>SSS</td></tr>
29
+ <tr><td>4</td><td>宮城県</td><td>XXX</td></tr>
30
+ <tr><td>5</td><td>秋田県</td><td>DDD</td></tr>
31
+ <tr><td>6</td><td>山形県</td><td>CCC</td></tr>
32
+ <tr><td>7</td><td>福島県</td><td>FFF</td></tr>
33
+ <tr><td>8</td><td>茨城県</td><td>VVV</td></tr>
34
+ <tr><td>9</td><td>栃木県</td><td>GGG</td></tr>
35
+ <tr><td>10</td><td>群馬県</td><td>BBB</td></tr>
36
+ <tr><td>47</td><td>沖縄県</td><td>UUU</td></tr>
37
+ </tbody>
38
+ </table>
39
+ <div id="info"></div>
40
+ </body>
41
+ <script>
42
+ var table = $("#test-table").DataTable({
43
+ //select:true
44
+ rowReorder: true,
45
+ orderMulti:false
46
+ });
47
+ </script>
48
+
49
+ </html>
50
+ ```

1

初心者アイコン設定

2020/11/25 13:58

投稿

forn
forn

スコア0

title CHANGED
File without changes
body CHANGED
@@ -4,4 +4,4 @@
4
4
  　2回目の操作：Y項目でソート
5
5
  という操作を行った際に、X項目でソートした結果を
6
6
  Y項目でソートするといったことは可能なのでしょうか？
7
- (SQLで"order by B,D"した状態と考えてもらえばわかりやすいでしょうか。)
7
+ (SQLで"order by B,D"した状態と考えてもらえばわかりやすいでしょうか)