###前提・実現したいこと
tablesorterライブラリで、tableにソート機能を実装しています。
- url: https://mottie.github.io/tablesorter/docs/
- version: 2.26.4
以下のようなヘッダが結合されているテーブルに対して、ソート機能を実現したいです。
結合セルに含まれている列を、表示/非表示切り替えようとしています。
デフォルトは非表示です。
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>
回答2件
あなたの回答
tips
プレビュー