Q&A
あ、また間違えてしまった…
お世話になります。
Jqueryのtablesorterプラグイン(http://tablesorter.com/docs/)がうまく機能しない部分があるのですが、下記がhtmlとjsファイルです。実際に動かすとソートのうち#1だけが機能してにないことがわかります。
ちょっとplug-inの説明を見たのですが、特に問題がないように思うのですが、もちろんsyntax error等も出ていません。
いちよ再現性のためにすべてのコードを載せてしまっていますが、見づらくて本当にすみません。
なお、JSファイルはあまりにもコードが長いため、以下のサイトのものをそのまま引用しているとご理解いだだければ幸いです。
a_jquery.tablesorter.js
http://webkaru.net/jquery-plugin/sources/tablesorter/jquery.tablesorter.js
もし、問題点がわかる方、アドバイスをいただければ幸いです。
何卒、よろしくお願い申し上げます。
*なお、以下のhtmlの情報は公表されている情報ですので、特にお気になされなくて問題ございません。
sample.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>sample</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script> <script src="https://use.fontawesome.com/d62c90183a.js"></script> <script type="text/javascript" src="a_jquery.tablesorter.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#myTable").tablesorter(); } ); </script> </head> <body> <table id="myTable" class="tablesorter" border="1" style="border: 1px solid #aaa; border-collapse: collapse; width:1300px;"> <thead> <tr> <th>#<i class="fa fa-sort" aria-hidden="true"></i></th> <th>物件名称<i class="fa fa-sort" aria-hidden="true"></th> <th>取得価額<i class="fa fa-sort" aria-hidden="true"></th> <th>取得時評価<i class="fa fa-sort" aria-hidden="true"></th> <th>期末評価<i class="fa fa-sort" aria-hidden="true"></th> <th>期末簿価<i class="fa fa-sort" aria-hidden="true"></th> <th>稼働率<i class="fa fa-sort" aria-hidden="true"></th> <th>賃貸事業収入等<i class="fa fa-sort" aria-hidden="true"></th> <th>賃貸事業費用等<i class="fa fa-sort" aria-hidden="true"></th> <th>賃貸事業損益<i class="fa fa-sort" aria-hidden="true"></th> <th>NOI<i class="fa fa-sort" aria-hidden="true"></th> </tr> </thead> <tbody> <tr><td>1</td> <td>A物件</td> <td style="text-align:right;">30,816</td> <td style="text-align:right;">31,000</td> <td style="text-align:right;">28,100</td> <td style="text-align:right;">32,131</td> <td style="text-align:right;">94.2%</td> <td style="text-align:right;">1,053</td> <td style="text-align:right;">519</td> <td style="text-align:right;">534</td> <td style="text-align:right;">712</td> </tr> <tr><td>2</td> <td>B物件</td> <td style="text-align:right;">1,760</td> <td style="text-align:right;">1,760</td> <td style="text-align:right;">1,910</td> <td style="text-align:right;">1,562</td> <td style="text-align:right;">98.8%</td> <td style="text-align:right;">55</td> <td style="text-align:right;">27</td> <td style="text-align:right;">27</td> <td style="text-align:right;">39</td> </tr> <tr><td>3</td> <td>C物件</td> <td style="text-align:right;">3,230</td> <td style="text-align:right;">3,240</td> <td style="text-align:right;">3,010</td> <td style="text-align:right;">2,990</td> <td style="text-align:right;">95.7%</td> <td style="text-align:right;">83</td> <td style="text-align:right;">31</td> <td style="text-align:right;">52</td> <td style="text-align:right;">68</td> </tr> <tr><td>115</td> <td>D物件</td> <td style="text-align:right;">1,055</td> <td style="text-align:right;">1,090</td> <td style="text-align:right;">1,250</td> <td style="text-align:right;">1,095</td> <td style="text-align:right;">95.5%</td> <td style="text-align:right;">35</td> <td style="text-align:right;">11</td> <td style="text-align:right;">23</td> <td style="text-align:right;">31</td> </tr> <tr><td>116</td> <td>E物件</td> <td style="text-align:right;">735</td> <td style="text-align:right;">757</td> <td style="text-align:right;">792</td> <td style="text-align:right;">770</td> <td style="text-align:right;">%</td> <td style="text-align:right;">16</td> <td style="text-align:right;">0</td> <td style="text-align:right;">16</td> <td style="text-align:right;">16</td> </tr> </tbody> </table> </body> </html>
回答2件
0
これでいいんですよね？
IE11,firefox,chromeで確認してみましたがどれも動くようです。
ざっくり見た感じでもズレはないように思えます。
#1だけが機能していないというのはA物件の行が固定されてBとCだけが動くんですか？？
私が見た限りだとA,B,Cどれも動きました。
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>sample</title> 6 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script> 7 <script src="https://use.fontawesome.com/d62c90183a.js"></script> 8 <script type="text/javascript" src="http://webkaru.net/jquery-plugin/sources/tablesorter/jquery.tablesorter.js"></script> 9 <script type="text/javascript"> 10 $(document).ready(function() 11 { 12 $("#myTable").tablesorter(); 13 } 14 ); 15 </script> 16 17 18 </head> 19 <body> 20 21 22 23 24 25<table id="myTable" class="tablesorter" border="1" style="border: 1px solid #aaa; border-collapse: collapse; width:1300px;"> 26<thead> 27 <tr> 28 <th>#<i class="fa fa-sort" aria-hidden="true"></i></th> 29 <th>物件名称<i class="fa fa-sort" aria-hidden="true"></th> 30 <th>取得価額<i class="fa fa-sort" aria-hidden="true"></th> 31 <th>取得時評価<i class="fa fa-sort" aria-hidden="true"></th> 32 <th>期末評価<i class="fa fa-sort" aria-hidden="true"></th> 33 <th>期末簿価<i class="fa fa-sort" aria-hidden="true"></th> 34 <th>稼働率<i class="fa fa-sort" aria-hidden="true"></th> 35 <th>賃貸事業収入等<i class="fa fa-sort" aria-hidden="true"></th> 36 <th>賃貸事業費用等<i class="fa fa-sort" aria-hidden="true"></th> 37 <th>賃貸事業損益<i class="fa fa-sort" aria-hidden="true"></th> 38 <th>NOI<i class="fa fa-sort" aria-hidden="true"></th> 39 </tr> 40</thead> 41 42 43 44<tbody> 45 <tr><td>1</td> 46<td>A物件</td> 47<td style="text-align:right;">30,816</td> 48<td style="text-align:right;">31,000</td> 49<td style="text-align:right;">28,100</td> 50<td style="text-align:right;">32,131</td> 51<td style="text-align:right;">94.2%</td> 52<td style="text-align:right;">1,053</td> 53<td style="text-align:right;">519</td> 54<td style="text-align:right;">534</td> 55<td style="text-align:right;">712</td> 56</tr> 57 58 <tr><td>2</td> 59<td>B物件</td> 60<td style="text-align:right;">1,760</td> 61<td style="text-align:right;">1,760</td> 62<td style="text-align:right;">1,910</td> 63<td style="text-align:right;">1,562</td> 64<td style="text-align:right;">98.8%</td> 65<td style="text-align:right;">55</td> 66<td style="text-align:right;">27</td> 67<td style="text-align:right;">27</td> 68<td style="text-align:right;">39</td> 69</tr> 70 71 <tr><td>3</td> 72<td>C物件</td> 73<td style="text-align:right;">3,230</td> 74<td style="text-align:right;">3,240</td> 75<td style="text-align:right;">3,010</td> 76<td style="text-align:right;">2,990</td> 77<td style="text-align:right;">95.7%</td> 78<td style="text-align:right;">83</td> 79<td style="text-align:right;">31</td> 80<td style="text-align:right;">52</td> 81<td style="text-align:right;">68</td> 82</tr> 83 84 85 </tbody> 86 87</table> 88 89</body> 90</html>
投稿2016/11/10 15:46
総合スコア2722
0
ベストアンサー
「A物件の行が固定され～」の否定がなかったので問題はここだと認識し、2回目以降はA物件の行が動くかどうかで確認しています。
後付け後付けはやめて質問は正確に行ってください。
今回の質問は行ではなく列のほうですね。
案件名など列は正確にソートされますが、取引価額など列のソートが正確にいかないということです。
原因はカンマ区切りのようです。
どうやら対応していないようですね。
カンマを取ってしまえばちゃんとソートされるようになります。
また残したい場合は、こちらを参考にしてみてください。
◆【jQuery】tablesorterでカンマ区切りの数値をソート
http://fanblogs.jp/newprogramer/archive/56/0
投稿2016/11/11 02:15
総合スコア2722
ご回答有難うございます。
曖昧な、質問の方法にお詫び申しあげます。今後は問題点を明確にし、正確に行うように努めます。
また、カンマが問題でしたか。。
ご教示頂いたサイトで勉強してみます。
いずれにしてもお力添えに改めて深謝を申し上げます。
宜しくお願い申し上げます。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/11/10 16:01
2016/11/10 16:06
2016/11/10 22:54