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

編集履歴

質問編集履歴

6

内容更新

2020/11/29 13:35

投稿

forn
forn

スコア0

test CHANGED
File without changes
test CHANGED
@@ -12,9 +12,19 @@
12
12
 
13
13
  (SQLで"order by X,Y"した状態と考えてもらえばわかりやすいでしょうか)
14
14
 
15
+ ※cerfwebさんの回答でデフォルト動作が"order by Y,X"になることはわかりました。ありがとうございます。
15
16
 
16
17
 
18
+
19
+ ソートボタンをクリックした際に複数項目を指定してorder()を実行すればできるかと
20
+
21
+ 思いましたが、意図したようにソートされませんでした。。
22
+
23
+
24
+
25
+ サンプルコード
26
+
17
- ```ここに言語を入力
27
+ ```javascript
18
28
 
19
29
  <!DOCTYPE html>
20
30
 
@@ -48,27 +58,27 @@
48
58
 
49
59
  <tbody>
50
60
 
51
- <tr><td>1</td><td>北海道</td><td>AAA</td></tr>
61
+ <tr><td>1</td><td>北海道</td><td>ZZZ</td></tr>
52
62
 
53
- <tr><td>2</td><td>青森県</td><td>ZZZ</td></tr>
63
+ <tr><td>2</td><td>北海道</td><td>AAA</td></tr>
54
64
 
55
- <tr><td>1</td><td>岩手県</td><td>SSS</td></tr>
65
+ <tr><td>3</td><td>岩手県</td><td>AAA</td></tr>
56
66
 
57
- <tr><td>2</td><td>宮城県</td><td>XXX</td></tr>
67
+ <tr><td>4</td><td>岩手県</td><td>XXX</td></tr>
58
68
 
59
- <tr><td>3</td><td>秋田県</td><td>DDD</td></tr>
69
+ <tr><td>5</td><td>岩手県</td><td>DDD</td></tr>
60
70
 
61
- <tr><td>4</td><td>山形県</td><td>CCC</td></tr>
71
+ <tr><td>6</td><td>山形県</td><td>CCC</td></tr>
62
72
 
63
- <tr><td>5</td><td>福島県</td><td>FFF</td></tr>
73
+ <tr><td>7</td><td>山形県</td><td>FFF</td></tr>
64
74
 
65
- <tr><td>8</td><td>茨城県</td><td>VVV</td></tr>
75
+ <tr><td>8</td><td>山形県</td><td>VVV</td></tr>
66
76
 
67
- <tr><td>9</td><td>栃木県</td><td>GGG</td></tr>
77
+ <tr><td>9</td><td>青森県</td><td>AAA</td></tr>
68
78
 
69
- <tr><td>10</td><td>群馬県</td><td>BBB</td></tr>
79
+ <tr><td>10</td><td>青森県</td><td>BBB</td></tr>
70
80
 
71
- <tr><td>47</td><td>沖縄県</td><td>UUU</td></tr>
81
+ <tr><td>11</td><td>青森県</td><td>ZZZ</td></tr>
72
82
 
73
83
  </tbody>
74
84
 
@@ -80,7 +90,25 @@
80
90
 
81
91
  <script>
82
92
 
83
- var table = $("#test-table").DataTable();
93
+ var table = $("#test-table").DataTable();
94
+
95
+ var orders = [];
96
+
97
+ table.on("order.dt", function() {
98
+
99
+ console.log("order.dt");
100
+
101
+ var newOrder = table.order();
102
+
103
+ orders.push([newOrder[0][0], newOrder[0][1]]);
104
+
105
+ table.order(orders);
106
+
107
+ });
108
+
109
+
110
+
111
+
84
112
 
85
113
  </script>
86
114
 

5

誤字修正

2020/11/29 13:35

投稿

forn
forn

スコア0

test CHANGED
File without changes
test CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
  Y項目でソートするといったことは可能なのでしょうか？
12
12
 
13
- (SQLで"order by B,D"した状態と考えてもらえばわかりやすいでしょうか)
13
+ (SQLで"order by X,Y"した状態と考えてもらえばわかりやすいでしょうか)
14
14
 
15
15
 
16
16
 

4

データ差し替え

2020/11/25 14:39

投稿

forn
forn

スコア0

test CHANGED
File without changes
test CHANGED
@@ -52,15 +52,15 @@
52
52
 
53
53
  <tr><td>2</td><td>青森県</td><td>ZZZ</td></tr>
54
54
 
55
- <tr><td>3</td><td>岩手県</td><td>SSS</td></tr>
55
+ <tr><td>1</td><td>岩手県</td><td>SSS</td></tr>
56
56
 
57
- <tr><td>4</td><td>宮城県</td><td>XXX</td></tr>
57
+ <tr><td>2</td><td>宮城県</td><td>XXX</td></tr>
58
58
 
59
- <tr><td>5</td><td>秋田県</td><td>DDD</td></tr>
59
+ <tr><td>3</td><td>秋田県</td><td>DDD</td></tr>
60
60
 
61
- <tr><td>6</td><td>山形県</td><td>CCC</td></tr>
61
+ <tr><td>4</td><td>山形県</td><td>CCC</td></tr>
62
62
 
63
- <tr><td>7</td><td>福島県</td><td>FFF</td></tr>
63
+ <tr><td>5</td><td>福島県</td><td>FFF</td></tr>
64
64
 
65
65
  <tr><td>8</td><td>茨城県</td><td>VVV</td></tr>
66
66
 

3

余計な設定削除

2020/11/25 14:39

投稿

forn
forn

スコア0

test CHANGED
File without changes
test CHANGED
@@ -80,15 +80,7 @@
80
80
 
81
81
  <script>
82
82
 
83
- var table = $("#test-table").DataTable({
83
+ var table = $("#test-table").DataTable();
84
-
85
- //select:true
86
-
87
- rowReorder: true,
88
-
89
- orderMulti:false
90
-
91
- });
92
84
 
93
85
  </script>
94
86
 

2

サンプルコード追加

2020/11/25 13:59

投稿

forn
forn

スコア0

test CHANGED
File without changes
test CHANGED
@@ -11,3 +11,89 @@
11
11
  Y項目でソートするといったことは可能なのでしょうか？
12
12
 
13
13
  (SQLで"order by B,D"した状態と考えてもらえばわかりやすいでしょうか)
14
+
15
+
16
+
17
+ ```ここに言語を入力
18
+
19
+ <!DOCTYPE html>
20
+
21
+ <html lang="ja">
22
+
23
+ <head>
24
+
25
+ <meta charset="UTF-8">
26
+
27
+ <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
28
+
29
+ <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.22/datatables.min.css"/>
30
+
31
+
32
+
33
+ <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.22/datatables.min.js"></script>
34
+
35
+ <title></title>
36
+
37
+ </head>
38
+
39
+ <body>
40
+
41
+ <table id="test-table" class="table table-bordered">
42
+
43
+ <thead>
44
+
45
+ <tr><th>No</th><th>都道府県</th><th>test</th></tr>
46
+
47
+ </thead>
48
+
49
+ <tbody>
50
+
51
+ <tr><td>1</td><td>北海道</td><td>AAA</td></tr>
52
+
53
+ <tr><td>2</td><td>青森県</td><td>ZZZ</td></tr>
54
+
55
+ <tr><td>3</td><td>岩手県</td><td>SSS</td></tr>
56
+
57
+ <tr><td>4</td><td>宮城県</td><td>XXX</td></tr>
58
+
59
+ <tr><td>5</td><td>秋田県</td><td>DDD</td></tr>
60
+
61
+ <tr><td>6</td><td>山形県</td><td>CCC</td></tr>
62
+
63
+ <tr><td>7</td><td>福島県</td><td>FFF</td></tr>
64
+
65
+ <tr><td>8</td><td>茨城県</td><td>VVV</td></tr>
66
+
67
+ <tr><td>9</td><td>栃木県</td><td>GGG</td></tr>
68
+
69
+ <tr><td>10</td><td>群馬県</td><td>BBB</td></tr>
70
+
71
+ <tr><td>47</td><td>沖縄県</td><td>UUU</td></tr>
72
+
73
+ </tbody>
74
+
75
+ </table>
76
+
77
+ <div id="info"></div>
78
+
79
+ </body>
80
+
81
+ <script>
82
+
83
+ var table = $("#test-table").DataTable({
84
+
85
+ //select:true
86
+
87
+ rowReorder: true,
88
+
89
+ orderMulti:false
90
+
91
+ });
92
+
93
+ </script>
94
+
95
+
96
+
97
+ </html>
98
+
99
+ ```

1

初心者アイコン設定

2020/11/25 13:58

投稿

forn
forn

スコア0

test CHANGED
File without changes
test CHANGED
@@ -10,4 +10,4 @@
10
10
 
11
11
  Y項目でソートするといったことは可能なのでしょうか？
12
12
 
13
- (SQLで"order by B,D"した状態と考えてもらえばわかりやすいでしょうか。)
13
+ (SQLで"order by B,D"した状態と考えてもらえばわかりやすいでしょうか)