TableSorterでヘッダー行を固定したいです

TableSorterのJSプラグインを導入してソートできるようになったのですが、ヘッダ行の固定オプションの指定方法がわかりません。

公式ドキュメントを見て一応下記のように予想して記述してみたのですが、、
どうかご教授ください！！！お願いします！

公式ドキュメント：
https://mottie.github.io/tablesorter/docs/example-widget-sticky-header.html

------JS------
// テーブルソート
jQuery('使用するテーブル指定').tablesorter({

widgets: ['stickyHeaders'],
widgetOptions: {
sticky : 'tablesorter-stickyHeader',
stickyHeaders : '使用するテーブル',
// jQuery selector or object to attach sticky header to
stickyHeaders_attachTo: '使用するテーブルのラッパー要素',
}
});

------CSS------
.使用するテーブルのラッパー要素{
overflow-y: auto;
position: relative;
}

行動規範の内容に同意します

回答1件

ヘッダ行の固定って
tablesorter
Attach sticky header to browser window
とかの事？

ヘッダ行の固定はスタイルの当て方に影響します。
サンプルなのに余計な処理が多いのでシンプルにしました
これで確認しやすいかと思います。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
5  <title>Tablesorter demo</title>
6
7  <link rel="stylesheet" type="text/css" href="/ui/1.10.3/themes/smoothness/jquery-ui.css">
8  <link rel="stylesheet" type="text/css" href="/css/theme.blue.css">
9
10  <script type="text/javascript" src="/jquery-2.0.2.js"></script>
11  <script type="text/javascript" src="/ui/1.10.3/jquery-ui.js"></script>
12  <script type="text/javascript" src="/js/jquery.tablesorter.js"></script>
13  <script type="text/javascript" src="/js/jquery.tablesorter.widgets.js"></script>
14  <script id="insert"></script>
15  <script src="/js/stringify.js?fa2d3d31f738a966addaca59cb77122e99eae703" charset="utf-8"></script>
16
17<script type="text/javascript">
18$(function () {
19  $('#table0').tablesorter({
20      theme: 'blue',
21      widthFixed : true,
22      showProcessing: true,
23      headerTemplate : '{content} {icon}', // さまざまなテーマのアイコンを追加
24      widgets: [ 'zebra', 'stickyHeaders', 'filter' ],
25      widgetOptions: {
26  
27        // スティッキーヘッダー行に追加された追加のクラス名
28        stickyHeaders : '',
29        // position：fixed要素をターゲットとする数値またはjqueryセレクター
30        stickyHeaders_offset : 0,
31        // 存在する場合、テーブルIDに追加されます
32        stickyHeaders_cloneId : '-sticky',
33        // ヘッダーで「サイズ変更」イベントをトリガーする
34        stickyHeaders_addResizeEvent : true,
35        // falseでキャプションが存在する場合、スティッキーヘッダーに含まれません
36        stickyHeaders_includeCaption : true,
37        // stickyHeadersのzIndexにより、ユーザーは必要に応じてこれを調整できます
38        stickyHeaders_zIndex : 2,
39        // スティッキーヘッダーをアタッチするjQueryセレクターまたはオブジェクト
40        stickyHeaders_attachTo : null,
41        // 水平スクロール位置を監視するjQueryセレクターまたはオブジェクト（デフォルト：xScroll> attachTo>ウィンドウ）
42        stickyHeaders_xScroll : null,
43        // 垂直スクロール位置を監視するjQueryセレクターまたはオブジェクト（デフォルト：yScroll> attachTo>ウィンドウ）
44        stickyHeaders_yScroll : null,
45        // フィルタリング後にテーブルトップをスクロールして表示します
46        stickyHeaders_filteredToTop: true
47      }
48  });
49});
50
51
52</script>
53
54</head>
55<body>
56<table id="table0" class="tablesorter">
57    <caption>Student Grades</caption>
58    <thead>
59        <tr>
60            <th>Name</th>
61            <th>Major</th>
62            <th>Sex</th>
63            <th>English</th>
64            <th>Japanese</th>
65            <th>Calculus</th>
66            <th class="filter-false sorter-false">Geometry</th>
67        </tr>
68    </thead>
69    <tfoot>
70        <tr>
71            <th>Name</th>
72            <th>Major</th>
73            <th>Sex</th>
74            <th>English</th>
75            <th>Japanese</th>
76            <th>Calculus</th>
77            <th>Geometry</th>
78        </tr>
79    </tfoot>
80    <tbody>
81        <tr>
82            <td>Student01</td>
83            <td>Languages</td>
84            <td>male</td>
85            <td>80</td>
86            <td>70</td>
87            <td>75</td>
88            <td>80</td>
89        </tr>
90        <tr>
91            <td>Student02</td>
92            <td>Mathematics</td>
93            <td>male</td>
94            <td>90</td>
95            <td>88</td>
96            <td>100</td>
97            <td>90</td>
98        </tr>
99        <tr>
100            <td>Student03</td>
101            <td>Languages</td>
102            <td>female</td>
103            <td>85</td>
104            <td>95</td>
105            <td>80</td>
106            <td>85</td>
107        </tr>
108        <tr>
109            <td>Student04</td>
110            <td>Languages</td>
111            <td>male</td>
112            <td>60</td>
113            <td>55</td>
114            <td>100</td>
115            <td>100</td>
116        </tr>
117        <tr>
118            <td>Student05</td>
119            <td>Languages</td>
120            <td>female</td>
121            <td>68</td>
122            <td>80</td>
123            <td>95</td>
124            <td>80</td>
125        </tr>
126        <tr>
127            <td>Student06</td>
128            <td>Mathematics</td>
129            <td>male</td>
130            <td>100</td>
131            <td>99</td>
132            <td>100</td>
133            <td>90</td>
134        </tr>
135        <tr>
136            <td>Student07</td>
137            <td>Mathematics</td>
138            <td>male</td>
139            <td>85</td>
140            <td>68</td>
141            <td>90</td>
142            <td>90</td>
143        </tr>
144        <tr>
145            <td>Student08</td>
146            <td>Languages</td>
147            <td>male</td>
148            <td>100</td>
149            <td>90</td>
150            <td>90</td>
151            <td>85</td>
152        </tr>
153        <tr>
154            <td>Student09</td>
155            <td>Mathematics</td>
156            <td>male</td>
157            <td>80</td>
158            <td>50</td>
159            <td>65</td>
160            <td>75</td>
161        </tr>
162        <tr>
163            <td>Student10</td>
164            <td>Languages</td>
165            <td>male</td>
166            <td>85</td>
167            <td>100</td>
168            <td>100</td>
169            <td>90</td>
170        </tr>
171        <tr>
172            <td>Student11</td>
173            <td>Languages</td>
174            <td>male</td>
175            <td>86</td>
176            <td>85</td>
177            <td>100</td>
178            <td>100</td>
179        </tr>
180        <tr>
181            <td>Student12</td>
182            <td>Mathematics</td>
183            <td>female</td>
184            <td>100</td>
185            <td>75</td>
186            <td>70</td>
187            <td>85</td>
188        </tr>
189        <tr>
190            <td>Student13</td>
191            <td>Languages</td>
192            <td>female</td>
193            <td>100</td>
194            <td>80</td>
195            <td>100</td>
196            <td>90</td>
197        </tr>
198        <tr>
199            <td>Student14</td>
200            <td>Languages</td>
201            <td>female</td>
202            <td>50</td>
203            <td>45</td>
204            <td>55</td>
205            <td>90</td>
206        </tr>
207        <tr>
208            <td>Student15</td>
209            <td>Languages</td>
210            <td>male</td>
211            <td>95</td>
212            <td>35</td>
213            <td>100</td>
214            <td>90</td>
215        </tr>
216        <tr>
217            <td>Student16</td>
218            <td>Languages</td>
219            <td>female</td>
220            <td>100</td>
221            <td>50</td>
222            <td>30</td>
223            <td>70</td>
224        </tr>
225        <tr>
226            <td>Student17</td>
227            <td>Languages</td>
228            <td>female</td>
229            <td>80</td>
230            <td>100</td>
231            <td>55</td>
232            <td>65</td>
233        </tr>
234        <tr>
235            <td>Student18</td>
236            <td>Mathematics</td>
237            <td>male</td>
238            <td>30</td>
239            <td>49</td>
240            <td>55</td>
241            <td>75</td>
242        </tr>
243        <tr>
244            <td>Student19</td>
245            <td>Languages</td>
246            <td>male</td>
247            <td>68</td>
248            <td>90</td>
249            <td>88</td>
250            <td>70</td>
251        </tr>
252        <tr>
253            <td>Student20</td>
254            <td>Mathematics</td>
255            <td>male</td>
256            <td>40</td>
257            <td>45</td>
258            <td>40</td>
259            <td>80</td>
260        </tr>
261        <tr>
262            <td>Student21</td>
263            <td>Languages</td>
264            <td>male</td>
265            <td>50</td>
266            <td>45</td>
267            <td>100</td>
268            <td>100</td>
269        </tr>
270        <tr>
271            <td>Student22</td>
272            <td>Mathematics</td>
273            <td>male</td>
274            <td>100</td>
275            <td>99</td>
276            <td>100</td>
277            <td>90</td>
278        </tr>
279        <tr>
280            <td>Student23</td>
281            <td>Languages</td>
282            <td>female</td>
283            <td>85</td>
284            <td>80</td>
285            <td>80</td>
286            <td>80</td>
287        </tr>
288        <tr>
289            <td>student23</td>
290            <td>Mathematics</td>
291            <td>male</td>
292            <td>82</td>
293            <td>77</td>
294            <td>0</td>
295            <td>79</td>
296        </tr>
297        <tr>
298            <td>student24</td>
299            <td>Languages</td>
300            <td>female</td>
301            <td>100</td>
302            <td>91</td>
303            <td>13</td>
304            <td>82</td>
305        </tr>
306        <tr>
307            <td>student25</td>
308            <td>Mathematics</td>
309            <td>male</td>
310            <td>22</td>
311            <td>96</td>
312            <td>82</td>
313            <td>53</td>
314        </tr>
315        <tr>
316            <td>student26</td>
317            <td>Languages</td>
318            <td>female</td>
319            <td>37</td>
320            <td>29</td>
321            <td>56</td>
322            <td>59</td>
323        </tr>
324        <tr>
325            <td>student27</td>
326            <td>Mathematics</td>
327            <td>male</td>
328            <td>86</td>
329            <td>82</td>
330            <td>69</td>
331            <td>23</td>
332        </tr>
333        <tr>
334            <td>student28</td>
335            <td>Languages</td>
336            <td>female</td>
337            <td>44</td>
338            <td>25</td>
339            <td>43</td>
340            <td>1</td>
341        </tr>
342        <tr>
343            <td>student29</td>
344            <td>Mathematics</td>
345            <td>male</td>
346            <td>77</td>
347            <td>47</td>
348            <td>22</td>
349            <td>38</td>
350        </tr>
351        <tr>
352            <td>student30</td>
353            <td>Languages</td>
354            <td>female</td>
355            <td>19</td>
356            <td>35</td>
357            <td>23</td>
358            <td>10</td>
359        </tr>
360    </tbody>
361</table>
362</body>
363</html>

投稿2020/09/22 22:37

kuma_kuma_

総合スコア2506

gawaharu

2020/09/26 18:44

【質問】まず回答していただき本当にありがとうございます。申し訳ないのですが回答に対して質問があります。 kuma_kuma_さんのソースをそのまま利用してヘッダ行の固定を試してみたいのですが、 JS読み込みの最後の行の <script src="/js/stringify.js?fa2d3d31f738a966addaca59cb77122e99eae703" charset="utf-8"></script> はどういったものなのでしょうか？また widgetOptions: { stickyHeaders_yScroll : null,} などのnullはtrueなどに変更する必要などはあるのでしょうか？おんぶに抱っこですみませんがお時間のある時に返答いただけると大変助かります。

kuma_kuma_

2020/09/26 19:05

> <script src="/js>/stringify.js?fa2d3d31f738a966addaca59cb77122e99eae703" charset="utf-8"></script> ただのstringify.jsのファイルだよ公式サイトだとURLパラメータ含みの読み込む設定になっているから一応書いておいただけ(バージョン表記みたいなもの) 公式サンプルだとモーダル画面で出すでしょ？ (Sticky Header Widgetだから) > stickyHeaders_yScroll 日本語訳にしたのに．．．画面がy軸移動したときに起きるイベントがあるから必要なら定義してねってこと

kuma_kuma_

2020/09/26 19:11 編集

TableSorterって色んなのとセットみたいな関係だからわかりずらいけどヘッダーの固定自体はCSSの影響によるものだから影響するのはthemeのCSS で公式サンプルだと余計な部分が多すぎて判らないだろうから今回余計な部分を切り落としたバージョンを回答したわけです。

gawaharu

2020/09/28 05:58

回答本当にありがとうございます。そして申し訳ないですが、再度確認させてください！ ①デザイン等関係なく、ヘッダ固定するだけであればCSSは <link rel="stylesheet" type="text/css" href="/css/theme.blue.css"> だけを読み込ませればいいのでしょうか？ ②2回目の回答内容より、ヘッダ固定するだけであればwidgetOptions: {}の{}の中身のtrueやnullは記載例のまま特別変更する必要はないということでしょうか？ ③回答いただいた記載例で追加するのはテーブルのスクロールが発生するようにテーブルのラッパー要素を追加してスクロール設定するぐらいでしょうか？何回も申し訳ないですが何卒よろしくお願いします。

kuma_kuma_

2020/09/28 06:22

①そのはず試しにコメント化すると判りやすい ②はい。変更なしです。 ③いいえ。スクロール領域をCSSで決める事でヘッダが固定化されます。つまり表の高さより表示領域の高さが低い場合自動でヘッダ固定される。言い換えると表示領域と表の高さが一緒だったからヘッダが固定されていたことに気が付かなかった。という事です。

gawaharu

2020/09/28 14:27

回答ありがとうございます！理解力が乏しくて申し訳ありませんが再度質問があります！！よろしければ回答お待ちしております！！ ③のスクロール領域のCSSをあてるのは<table>や<tbody>などのどの要素に設定するのでしょうか？それとstringily.jsとjquery-ui.cssだけをコメントアウトしていただいたソースで実行すると下記２つのエラーがコンソールに出て、ページは普通に表示されるのですがヘッダ固定できませんでした。このエラーはヘッダ固定できないのと関係あるのでしょうか？ TypeError: undefined is not an object (evaluating 'ts.css.resizableNoSelect') TypeError: undefined is not an object (evaluating 'c.$table')

kuma_kuma_

2020/09/28 16:54

③その答えの為のサンプルですから．．．エラー自体はstringily.jsからでているように見受けられます。動かす際に必要なのでしょう。 jquery-ui.cssはたぶんモーダル画面に関しての記述しかないはずです。今回はあくまで余分な所を削ったサンプルです。スタイルの"tablesorter"や動的に設定される他のスタイルに関してどうなっているかはまず動かしてみて確認してみて下さい。

gawaharu

2020/09/30 16:24

すぐ返信いただいていたのに遅くなり申し訳ありません。正直現在も再現できていないのですが、もう少し調査する時間はあるのでいろいろ動かして試してみます！ひとまずわかりづらい質問に対してのご回答、本当にありがとうございます。

行動規範の内容に同意します