teratail
回答率
85.47%
質問するログイン新規登録
トップJavaScriptに関する質問tablesorterライブラリで、data-column属性の値を変更する方法を教えてください。

編集履歴

回答編集履歴

9

セレクターが間違っていたので修正。

2016/06/30 04:26

投稿

phoenix3430025
phoenix3430025

スコア135

test CHANGED
@@ -64,7 +64,7 @@
64
64
 
65
65
  // ★★★ ここから
66
66
 
67
- $("#sampleTable #mergeCell").next().attr("data-column","3");
67
+ $("#sampleTable #mergedCell").next().attr("data-column", "3");
68
68
 
69
69
  // ★★★ ここまで
70
70
 

8

いろいろやってみたら実現できたので再度編集。

2016/06/30 04:26

投稿

phoenix3430025
phoenix3430025

スコア135

test CHANGED
@@ -10,9 +10,7 @@
10
10
 
11
11
  なるほど非表示にしたせいでカラムインデックスがずれてしまうのね。
12
12
 
13
- でしたら、比較する対象を切り替えるようにしてはどうでしょうか。
14
-
15
- たとえば以下のような感じです。
13
+ でしたら、こうです。
16
14
 
17
15
  ★★★のコメント内を記述すれば、いけるはずです。
18
16
 
@@ -62,33 +60,11 @@
62
60
 
63
61
  $(function(){
64
62
 
63
+ $("#sampleTable").tablesorter();
64
+
65
65
  // ★★★ ここから
66
66
 
67
- $("#sampleTable").tablesorter({
67
+ $("#sampleTable #mergeCell").next().attr("data-column","3");
68
-
69
- // ソートとして比較する文字列を取得する
70
-
71
- // node: 指定要素
72
-
73
- // table: 指定要素を含むtable要素
74
-
75
- // cellIndex: 指定要素の列インデックス
76
-
77
- textExtraction : function(node, table, cellIndex) {
78
-
79
- var elem = $(node);
80
-
81
- if (elem.css("display") == "none") { // 指定要素が隠れていたら
82
-
83
- return elem.next().text(); // 次の兄弟要素のテキストを返す
84
-
85
- }
86
-
87
- return elem.text(); // 指定要素のテキストを返す
88
-
89
- }
90
-
91
- });
92
68
 
93
69
  // ★★★ ここまで
94
70
 
@@ -178,14 +154,14 @@
178
154
 
179
155
 
180
156
 
181
- 質問の
157
+ 要はtablesorter呼んだらどの列が対象かdata-column属性で決定するから、上書きすればいいですね。
182
158
 
183
- > data-column属性の値を設定するには、どうすればよいでしょうか？
159
+ updateAllのあともやった方がいいね。
184
160
 
185
161
 
186
162
 
187
- ですが、ぶっちゃけ私もよくわかりません…
163
+ computeColumnIndex関数ですが入力するパラメータの説明がないし、結果こうなるよ～ぐらいしか記述してないよね？
188
164
 
189
- ソートする際自動で設定される属性のようで、ユーザー側から指定できる属性ではないと思います。
165
+ 無理に使う必要はないと思います。
190
166
 
191
- ・・・ので代替案でした。
167
+

7

質問について追記（最初に回答した内容と同じです）。

2016/06/30 04:20

投稿

phoenix3430025
phoenix3430025

スコア135

test CHANGED
@@ -175,3 +175,17 @@
175
175
  </html>
176
176
 
177
177
  ```
178
+
179
+
180
+
181
+ 質問の
182
+
183
+ > data-column属性の値を設定するには、どうすればよいでしょうか？
184
+
185
+
186
+
187
+ ですが、ぶっちゃけ私もよくわかりません…
188
+
189
+ ソートする際自動で設定される属性のようで、ユーザー側から指定できる属性ではないと思います。
190
+
191
+ ・・・ので代替案でした。

6

問題のテーブルを追加されたようですので、書き直し

2016/06/29 18:36

投稿

phoenix3430025
phoenix3430025

スコア135

test CHANGED
@@ -1,42 +1,24 @@
1
- > 上記のテーブルは問題ありませんでしたが、別のテーブルの場合、ソート対象の列がずれていました。
2
-
3
- 「人口」列をクリックしてソートさせようとすると、「市」の値でソートされてしまう、という現象です。
1
+ 問題のテーブルを追加されたようですので、書き直しします。
4
2
 
5
3
 
6
4
 
7
- 問題ないテーブルをあげてどうするんですか。
5
+ > 結合セルに含まれている列を、表示/非表示切り替えようとしています。
8
6
 
9
- 問題の現象が発生するその別テーブルがほしいです。
7
+ デフォルトは非表示です。
10
-
11
- あと確認しますが、問題ないテーブルとその別テーブルは同じページにあるのでしょうか。
12
-
13
- ある場合、それぞれのテーブルのIDはちゃんと別の名前にしていますか？
14
8
 
15
9
 
16
10
 
11
+ なるほど非表示にしたせいでカラムインデックスがずれてしまうのね。
12
+
17
- > data-column属性の値を設定するには、どうすればよいでしょうか？
13
+ でしたら、比較する対象を切り替えるようにしてはどうでしょうか。
14
+
15
+ たとえば以下のような感じです。
16
+
17
+ ★★★のコメント内を記述すれば、いけるはずです。
18
+
19
+ 確認ブラウザ：IE11、Edge、Firefox47
18
20
 
19
21
 
20
-
21
- ソートする際に作成される属性ですので、ユーザーから設定するのは無理だと思います。
22
-
23
- なぜ問題の現象が発生するのかをはっきりさせた方がよいかと思いますが。
24
-
25
- （ちなみにdata-column属性が想定と違うという点は、ソートしてる結果そうなっている
26
-
27
- 　のであって、なぜそうなるのかを言っていません。
28
-
29
- 　なぜそうなるのかをはっきりせずして単にdata-column属性をどうにかしようとしても
30
-
31
- 　だめだと思いますよ）
32
-
33
-
34
-
35
- ちなみに以下のHTMLを実行したところ問題なく動作しました。
36
-
37
- （適当なデータを作成してあります）
38
-
39
- IE11、Edge、firefox47
40
22
 
41
23
  ```HTML
42
24
 
@@ -62,6 +44,16 @@
62
44
 
63
45
  <title>テスト</title>
64
46
 
47
+ <style>
48
+
49
+ table, tr, td, th {
50
+
51
+ border: solid 1px;
52
+
53
+ }
54
+
55
+ </style>
56
+
65
57
  </head>
66
58
 
67
59
  <body>
@@ -70,37 +62,111 @@
70
62
 
71
63
  $(function(){
72
64
 
65
+ // ★★★ ここから
66
+
73
- $("#sampleTable").tablesorter();
67
+ $("#sampleTable").tablesorter({
68
+
69
+ // ソートとして比較する文字列を取得する
70
+
71
+ // node: 指定要素
72
+
73
+ // table: 指定要素を含むtable要素
74
+
75
+ // cellIndex: 指定要素の列インデックス
76
+
77
+ textExtraction : function(node, table, cellIndex) {
78
+
79
+ var elem = $(node);
80
+
81
+ if (elem.css("display") == "none") { // 指定要素が隠れていたら
82
+
83
+ return elem.next().text(); // 次の兄弟要素のテキストを返す
84
+
85
+ }
86
+
87
+ return elem.text(); // 指定要素のテキストを返す
88
+
89
+ }
90
+
91
+ });
92
+
93
+ // ★★★ ここまで
74
94
 
75
95
  });
96
+
97
+ /**
98
+
99
+ * 3列目を非表示/表示を切り替える
100
+
101
+ * @param hide true:非表示, false:表示
102
+
103
+ */
104
+
105
+ function hideColumn(hide) {
106
+
107
+ if (hide) {
108
+
109
+ $("#sampleTable .hide").css("display", "none");
110
+
111
+ document.getElementById("mergedCell").colSpan=1;
112
+
113
+ } else {
114
+
115
+ $("#sampleTable .hide").css("display", "");
116
+
117
+ document.getElementById("mergedCell").colSpan=2;
118
+
119
+ }
120
+
121
+ //tablesorterの更新
122
+
123
+ $("#sampleTable").trigger("updateAll");
124
+
125
+ }
76
126
 
77
127
  </script>
78
128
 
79
129
  <table id="sampleTable">
80
130
 
81
- <thead>
131
+ <thead>
82
132
 
83
- <tr><th colspan="2">地域</th><th rowspan="2">人口[千人]</th></tr>
133
+ <tr>
84
134
 
85
- <tr><th>県</th><th>市</th></tr>
135
+ <th rowspan="2">A列</th>
86
136
 
87
- </thead>
137
+ <th id="mergedCell" colspan="1" >B列</th>
88
138
 
89
- <tbody>
139
+ <th rowspan="2">D列</th>
90
140
 
91
- <tr><td>1.Aichi</td><td>6.Nagoya</td><td>5.2200</td></tr>
141
+ </tr>
92
142
 
93
- <tr><td>2.Gifu</td><td>1.Takayama</td><td>6.0301</td></tr>
94
143
 
95
- <tr><td>3.Toyama</td><td >2.Toyama</td><td >1.0300</td></tr>
96
144
 
97
- <tr><td>4.Aichi</td><td>3.Nagoya</td><td>2.2200</td></tr>
145
+ <tr>
98
146
 
99
- <tr><td>5.Gifu</td><td>4.Takayama</td><td>3.0301</td></tr>
147
+ <th >B-1列</th>
100
148
 
101
- <tr><td>6.Toyama</td><td >5.Toyama</td><td >4.0300</td></tr>
149
+ <th class="hide" style="display:none;">B-2列</th>
102
150
 
151
+ </tr>
152
+
153
+ </thead>
154
+
155
+ <tbody>
156
+
157
+ <tr><td>1</td><td>1</td><td class="hide" style="display:none;">1</td><td>1</td></tr>
158
+
159
+ <tr><td>2</td><td>4</td><td class="hide" style="display:none;">2</td><td>2</td></tr>
160
+
161
+ <tr><td>3</td><td>2</td><td class="hide" style="display:none;">3</td><td>5</td></tr>
162
+
163
+ <tr><td>4</td><td>5</td><td class="hide" style="display:none;">6</td><td>6</td></tr>
164
+
165
+ <tr><td>5</td><td>3</td><td class="hide" style="display:none;">5</td><td>3</td></tr>
166
+
167
+ <tr><td>6</td><td>6</td><td class="hide" style="display:none;">4</td><td>4</td></tr>
168
+
103
- </tbody>
169
+ </tbody>
104
170
 
105
171
  </table>
106
172
 

5

気になる点を追記　その２。

2016/06/29 17:59

投稿

phoenix3430025
phoenix3430025

スコア135

test CHANGED
@@ -21,6 +21,14 @@
21
21
  ソートする際に作成される属性ですので、ユーザーから設定するのは無理だと思います。
22
22
 
23
23
  なぜ問題の現象が発生するのかをはっきりさせた方がよいかと思いますが。
24
+
25
+ （ちなみにdata-column属性が想定と違うという点は、ソートしてる結果そうなっている
26
+
27
+ 　のであって、なぜそうなるのかを言っていません。
28
+
29
+ 　なぜそうなるのかをはっきりせずして単にdata-column属性をどうにかしようとしても
30
+
31
+ 　だめだと思いますよ）
24
32
 
25
33
 
26
34
 

4

文言修正　同じファイル→同じページ。

2016/06/26 19:59

投稿

phoenix3430025
phoenix3430025

スコア135

test CHANGED
@@ -8,7 +8,7 @@
8
8
 
9
9
  問題の現象が発生するその別テーブルがほしいです。
10
10
 
11
- あと確認しますが、問題ないテーブルとその別テーブルは同じファイルにあるのでしょうか。
11
+ あと確認しますが、問題ないテーブルとその別テーブルは同じページにあるのでしょうか。
12
12
 
13
13
  ある場合、それぞれのテーブルのIDはちゃんと別の名前にしていますか？
14
14
 

3

気になる点を追記。

2016/06/26 15:19

投稿

phoenix3430025
phoenix3430025

スコア135

test CHANGED
@@ -7,6 +7,10 @@
7
7
  問題ないテーブルをあげてどうするんですか。
8
8
 
9
9
  問題の現象が発生するその別テーブルがほしいです。
10
+
11
+ あと確認しますが、問題ないテーブルとその別テーブルは同じファイルにあるのでしょうか。
12
+
13
+ ある場合、それぞれのテーブルのIDはちゃんと別の名前にしていますか？
10
14
 
11
15
 
12
16
 

2

文言修正。

2016/06/26 15:16

投稿

phoenix3430025
phoenix3430025

スコア135

test CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  問題ないテーブルをあげてどうするんですか。
8
8
 
9
- 問題の現象が発生するデータがほしいです。
9
+ 問題の現象が発生するその別テーブルがほしいです。
10
10
 
11
11
 
12
12
 

1

サンプルソース修正（存在しないパスを指定していたため）

2016/06/26 15:07

投稿

phoenix3430025
phoenix3430025

スコア135

test CHANGED
@@ -42,23 +42,11 @@
42
42
 
43
43
  <meta charset="UTF-8">
44
44
 
45
- <meta name="generator" content="StyleNote5">
46
-
47
- <!-- choose a theme file -->
48
-
49
- <link rel="stylesheet" href="/path/to/theme.default.css">
50
-
51
45
  <!-- load jQuery and tablesorter scripts -->
52
46
 
53
47
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
54
48
 
55
49
  <script type="text/javascript" src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
56
-
57
-
58
-
59
- <!-- tablesorter widgets (optional) -->
60
-
61
- <script type="text/javascript" src="/path/to/jquery.tablesorter.widgets.js"></script>
62
50
 
63
51
  <title>テスト</title>
64
52