QHMの新タイプHAIKの活用と実験、オープンソースの活用

[ JQuery ]

TableSorterプラグイン

説明

• 以前にQHMを使わないサンプルだったものを以下のように動かしてみます。
• 今回はさらに、http://tablesorter.com/docs/ で公開されている http://tablesorter.com/docs/example-pager.html の 「Pager plugin」を追加で動かしてみます。
• 上記からプラグインをダウンロードして、ライブラリを読み込むようにしてWebの説明を参考にコードを追加します。
• 行数を変えた時に画面の高さが左のメニューより小さい時に表示が正しく出来ないのですが、雰囲気がわかると思います。
• ボタンデータを用意していませんので、ページ移動のナビゲーション部分がぱっと見地味です。
• 2019-04-16 ドキュメントのURLが変わっていたので https://mottie.github.io/tablesorter/docs/ を参照して調整。

実行結果

ソースコード

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="jquery/js/jquery.tablesorter.pager.js"></script>
 
<style type="text/css">
 
th.header { 
    background-color: #DDDDDD; 
    background-image: url(../img/small.gif);     
    cursor: pointer; 
    font-weight: bold; 
    background-repeat: no-repeat; 
    background-position: center left; 
    padding-left: 20px; 
    border-right: 1px solid #dad9c7; 
    margin-left: -1px; 
} 
 
th.headerSortDown { 
    background-image: url(./img/small_desc.gif); 
    background-color: #FF9933; 
} 
 
th.headerSortUp { 
    background-image: url(./img/small_asc.gif); 
    background-color: #3399FF; 
} 
                                                               
 
</style>
 
 
<script type="text/javascript">
$(function() {
 
  // 少いデータだと寂しいのでテーブルの部分をJavaScriptで作成する
  // input type=text の変更内容にもソートが対応するのかテスト
  html  ='<table  id="list2" border="1"  class="tablesorter">'+"\n";
  html +='<thead>'+"\n";
  html +='<tr><th>数字</th><th>漢字</th>'
        +'<th>カタカナ</th><th>ひらがな</th>'
        +'<th>英字</th></tr>'+"\n";
  html +='</thead>'+"\n";
  html +='<tbody>'+"\n";
  for (i=1001; i<2000; i++) {
    html +='<tr>'+"\n";
    html +='<td><input type="text" value="'+i+'" id= "a"></td>'+"\n";
    x = i % 5;
    html +='<td>安部'+x +'</td>'+"\n";
    x = i % 7;
    html +='<td>ア'+x+'ベ</td>'+"\n";
    html +='<td>あべ</td>'+"\n";
    x = i % 13;
    html +='<td>ab'+x+'e<br>改行もOKなのかな'+i+'</td>'+"\n";
    html +='</tr>'+"\n";
  }
 
  html +='</tbody>'+"\n";
  html +='</table>'+"\n";
 
  $("#hogehoge").html(html);
  $("#list2").tablesorter().tablesorterPager({container: $("#pager")}); 
 
 
});
 
 
</script>
 
<div id="hogehoge">
<!-- ソースでは分かりませんが、ここにテーブルが表示されます -->
</div>
<div id="pager" class="pager" style="margin:8px;font-size:150%; top:1001px; position: absolute;">
<form>
<span class="first">first</span>:
<span class="prev">prev</span>
<input type="text" class="pagedisplay">
<span class="next">next</span>・
<span class="last">last</span>
<select class="pagesize">
<option selected="selected" value="10">10</option>
  <option value="20">20</option>
  <option value="30">30</option>
  <option value="40">40</option>
</select>
</form>
</div>