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

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

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

6973閲覧

tablesorterライブラリで、data-column属性の値を変更する方法を教えてください。

yuji38kwmt

総合スコア437

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/06/26 11:07

編集2016/06/28 13:51

###前提・実現したいこと
tablesorterライブラリで、tableにソート機能を実装しています。

以下のようなヘッダが結合されているテーブルに対して、ソート機能を実現したいです。

結合セルに含まれている列を、表示/非表示切り替えようとしています。
デフォルトは非表示です。

D列はdata-column="3"を期待していますが、Web開発ツールで確認するとdata-column="2"でした。
これは、B-2列が非表示のため「1列ない」とtablesorterが認識したのだと思います。

html

1 2<!DOCTYPE html> 3<html> 4<head> 5<meta charset="UTF-8"> 6<title>Insert title here</title> 7 8<script src="../web-lib/jquery-2.1.3.min.js"></script> 9<script src="../web-lib/jquery.tablesorter.combined.min.js"></script> 10 11<style> 12table, tr, td, th { 13 border: solid 1px; 14} 15</style> 16</head> 17<body> 18 19 20 21 <table id="sampleTable"> 22 <thead> 23 <tr> 24 <th rowspan="2">A列</th> 25 <th id="mergedCell" colspan="1" >B列</th> 26 <th rowspan="2">D列</th> 27 </tr> 28 29 <tr> 30 <th >B-1列</th> 31 <th class="hide" style="display:none;">B-2列</th> 32 </tr> 33 </thead> 34 <tbody> 35 <tr><td>a</td><td>b</td><td class="hide" style="display:none;">1</td><td>d</td></tr> 36 <tr><td>d</td><td>a</td><td class="hide" style="display:none;">2</td><td>c</td></tr> 37 </tbody> 38 </table> 39 40 <script> 41 //初期処理 42 $("#sampleTable").tablesorter(); 43 44 /** 45 * 3列目を非表示/表示を切り替える 46 * @param hide true:非表示, false:表示 47 */ 48 function hideColumn(hide) { 49 if (hide) { 50 $("#sampleTable .hide").css("display", "none"); 51 document.getElementById("mergedCell").colSpan=1; 52 } else { 53 $("#sampleTable .hide").css("display", ""); 54 document.getElementById("mergedCell").colSpan=2; 55 } 56 //tablesorterの更新 57 $("#sampleTable").trigger("updateAll"); 58 } 59 </script> 60 61 62</body> 63</html> 64

###発生している問題

上記のテーブルは問題ありませんでしたが、別のテーブルの場合、ソート対象の列がずれていました。
「人口」列をクリックしてソートさせようとすると、「市」の値でソートされてしまう、という現象です。

原因はtablesorterが付与するdata-column属性の値が、間違っているためでした。
data-column="1"であるため、「市」列でソートされてしまいす。
開発ツールでdata-column="2"に変更したら、正しく「人口」列でソートされました。

###質問
data-column属性の値を設定するには、どうすればよいでしょうか?

tablesorterのcomputeColumnIndex関数でdata-column属性を修正できるようですが、英文のためよく理解ができませんでした。

以下、tablesorterのcomputeColumnIndex関数の内容です。

Adds the correct data-column indexing to all rows passed to this function (v2.16; Updated v2.25.0). In New v2.25.0, if a config parameter is included, this function will only add a "data-column" attribute to cells where their internal cellIndex doesn't match its actual column index. This does not apply to internal usage where a "data-column" attribute is set on all header & footer cells. Use it as follows: // In v2.25.0, if a config parameter is included "data-columns" are not added // to cells where their cellIndex and calculated column index match $.tablesorter.computeColumnIndex($rows, config); $rows - jQuery object of rows in which to add data-column indexes. config - this is the table.config (table configuration variables) object. Example result (without including config): <tr> <td colspan="2" data-column="0">r0c0</td> <td data-column="2">r0c2</td> </tr> <tr> <td data-column="0">r1c0</td> <td data-column="1">r1c1</td> <td data-column="2">r1c2</td> </tr> Example result (including config): <tr> <td colspan="2">r0c0</td> <!-- data-column="0" is not included because it matches the cellIndex property --> <td data-column="2">r0c2</td> </tr> <tr> <td>r1c0</td> <td>r1c1</td> <td>r1c2</td> </tr>

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/06/27 07:45

問題が出ているテーブルのHTMLと、ご自身で書かれたJavaScriptを追記いただけませんか?
yuji38kwmt

2016/06/28 13:52

問題のテーブルを追加しました
guest

回答2

0

ありがとうございます。
解決しました。

できればcomputeColumnIndex関数使いたかったんですけどねー
バージョンアップを待ちます

投稿2016/06/30 13:56

yuji38kwmt

総合スコア437

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

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

結合セルに含まれている列を、表示/非表示切り替えようとしています。

デフォルトは非表示です。

なるほど非表示にしたせいでカラムインデックスがずれてしまうのね。
でしたら、こうです。
★★★のコメント内を記述すれば、いけるはずです。
確認ブラウザ:IE11、Edge、Firefox47

HTML

1<!DOCTYPE html> 2 3<html lang="ja"> 4<head> 5<meta http-equiv="Content-Style-Type" content="text/css"> 6<meta http-equiv="Content-Script-Type" content="text/javascript"> 7<meta charset="UTF-8"> 8<!-- load jQuery and tablesorter scripts --> 9<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script> 10<script type="text/javascript" src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script> 11<title>テスト</title> 12<style> 13table, tr, td, th { 14 border: solid 1px; 15} 16</style> 17</head> 18<body> 19<script> 20$(function(){ 21 $("#sampleTable").tablesorter(); 22 // ★★★ ここから 23 $("#sampleTable #mergedCell").next().attr("data-column", "3"); 24 // ★★★ ここまで 25}); 26/** 27 * 3列目を非表示/表示を切り替える 28 * @param hide true:非表示, false:表示 29 */ 30function hideColumn(hide) { 31 if (hide) { 32 $("#sampleTable .hide").css("display", "none"); 33 document.getElementById("mergedCell").colSpan=1; 34 } else { 35 $("#sampleTable .hide").css("display", ""); 36 document.getElementById("mergedCell").colSpan=2; 37 } 38 //tablesorterの更新 39 $("#sampleTable").trigger("updateAll"); 40} 41</script> 42<table id="sampleTable"> 43<thead> 44 <tr> 45 <th rowspan="2">A列</th> 46 <th id="mergedCell" colspan="1" >B列</th> 47 <th rowspan="2">D列</th> 48 </tr> 49 50 <tr> 51 <th >B-1列</th> 52 <th class="hide" style="display:none;">B-2列</th> 53 </tr> 54</thead> 55<tbody> 56 <tr><td>1</td><td>1</td><td class="hide" style="display:none;">1</td><td>1</td></tr> 57 <tr><td>2</td><td>4</td><td class="hide" style="display:none;">2</td><td>2</td></tr> 58 <tr><td>3</td><td>2</td><td class="hide" style="display:none;">3</td><td>5</td></tr> 59 <tr><td>4</td><td>5</td><td class="hide" style="display:none;">6</td><td>6</td></tr> 60 <tr><td>5</td><td>3</td><td class="hide" style="display:none;">5</td><td>3</td></tr> 61 <tr><td>6</td><td>6</td><td class="hide" style="display:none;">4</td><td>4</td></tr> 62</tbody> 63</table> 64</body> 65</html>

要はtablesorter呼んだらどの列が対象かdata-column属性で決定するから、上書きすればいいですね。
updateAllのあともやった方がいいね。

computeColumnIndex関数ですが入力するパラメータの説明がないし、結果こうなるよ~ぐらいしか記述してないよね?
無理に使う必要はないと思います。

投稿2016/06/26 15:00

編集2016/06/30 04:26
phoenix3430025

総合スコア135

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yuji38kwmt

2016/06/30 14:00

ありがとうございます。 解決しました。 できればcomputeColumnIndex関数使いたかったんですけどねー バージョンアップを待ちます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問