HOME　SITE　　　　　　　　　　　　　　　　　　　　　　　　　　　　　jQuery　DataTables　このページは工事中　　　　　　　　　　　　　　　　　　2014-10-29　11-01 改　
　No　種名　科名　ページ　欄をクリックで並べ替え（連続クリックで正順・逆順）
　Show−−−−表示件数
　Search−−−検索
　Showing 1 to 20 of 20 entries。
　Previous12Next−−−Previous（前データ）　Next（次データ）
 　複数列の並び替えは Shift + 項目

　下の例では ページ → Shift + 科名 で 17ページ と 21ページ の行が替わる。

　Show : 25 entries		 　１．jQuery ダウンロード
　２．DataTables ダウンロード
　３．アップロード
　４．ソース
　５．呼び出し
　６．パラメータ設定
　
パラメータはデフォルト　「No　種名　科名　ページ　欄をクリック」 パラメータ設定例（画面）
No 種名 科名 ページ（サンプル）
1 Dipterocarpus alata フタバガキ科 21
2 Oroxylum indicam ノウゼンカズラ科 19
3 アオイゴケ ヒルガオ科 21
4 アオイスミレ スミレ科 16
5 アオキ ミズキ科 24
6 アオギリ アオギリ科 02
7 アオツヅラフジ ツヅラフジ科 17
8 アオハダ モチノキ科 26
9 アカガシ ブナ科 new
10 アカカタバミ カタバミ科 07
11 アカザ アカザ科 02
12 アカシデ カバノキ科 08
13 アカネ アカネ科 02
14 アカネスミレ スミレ科 16
15 アカバナ アカバナ科 02
16 アカマツ マツ科 01
17 アカミヤドリギ ヤドリギ科 26
18 アカメガシワ トウダイグサ科 17
19 アカメヤナギ ヤナギ科 26
20 アカモノ ツツジ科 17

　Show・Search・Showing を非表示
6

　パラメータ設定
<script>
　$(document).ready(function(){
　　$('#table1').dataTable( {
　　　"bPaginate": true,
　　　"bFilter": true,
　　　"bInfo": true,
　　　"bAutoWidth": true,
　　　"bScrollCollapse": false,
　　　"bScrollInfinite": false,
　　});
　});
</script>


<script>
　$(document).ready(function(){
　　$('#table1').dataTable( {
　　　"bPaginate": false,
　　　"bFilter": false,
　　　"bInfo": false,
　　　"bAutoWidth": false,
　　　"bScrollCollapse": true,
　　　"bScrollInfinite": true,
　　　"sScrollY": "250px"
　　});
　});
</script>
　
DataTables　パラメータ
画面 デフォルト 設定例
1 "bPaginate": true false
2 "bFilter": true false
3 "bInfo": true false
4
"bAutoWidth": true false
"bScrollCollapse": false true テーブル幅の設定は<style で指定　下記例
　 "bScrollInfinite": false true
"sScrollY": "250px"
　
テーブル幅設定

<TITLE></TITLE> の上の行

<STYLE type="text/css">
<!--
body{
　width: 600px;
}
#table1{
　border: 1px solid black;
}
-->
</STYLE>
1
　jQuery と DataTables のダウンロード

１．jQuery

1.1 ダウンロード

　http://jquery.com/

　Download jQuery v1.11.1 or v2.1.1

　Download the compressed, production jQuery 1.11.1　右ボタンクリック＞対象をファイルに保存

　jquery-1.11.1.min.js ホームページのルートディレクトリー（例） に保存。

　これで終わり。以後に出る画面は無視。
2
２．DataTables

1.1 ダウンロード
　http://www.datatables.net/

　Download
　Download DataTables V1.10.3＞名前をつけて保存
　DataTables-1.10.3.zip　任意のフォルダーに保存、これで終わり。以後に出る画面は無視。

1.2
　jquery.dataTables.min.js を ホームページのルートディレクトリー （例）にコピー・貼り付け。

　jquery.dataTables.min.js と jquery.dataTables.js の違いは？。
　jquery.js は上の jquery-1.11.1.min.js と同じもの？。
3
３．jquery-1.11.1.min.js と jquery.dataTables.min.js のアップロード
　　
　Home Page Builder のサイト転送でアップロードされる。
4
４．ソース　正しくは メニュー「表示」＞「ソース」 を参照。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 18.0.7.0 for Windows">
<script language="javascript" src="../jquery-1.11.1.min.js" type="text/javascript"></script>
<script language="javascript" src="../jquery.dataTables.min.js" type="text/javascript"></script>		 5
５．呼び出し　ディレクトリーを合わす　ホームページのルートディレクトリー （例）
<TITLE>jquery-datatables</TITLE> </head>
<body>
　<table id="table1" border="1" cellspacing="0">
　　<thead>
　　　<tr>
　　　　<th align="center">No</th> −−−−−−−−− 項目行は <th にする。
　　　　<th align="center">種名</th>
　　　　<th align="center">科名</th>
　　　　<th align="center">ページ（サンプル）</th>
　　　</tr>
　　</thead>
　　<tbody>
　　　<tr>
　　　　<td align="right">1</td>
　　　　<td>Dipterocarpus alata</td>
　　　　<td>フタバガキ科</td>
　　　　<td align="center"><a href="http://nono22.sakura.ne.jp/kinomi/kinomi21.htm" target="_blank">21</a></td>
　　　</tr>

　　　この間省略

　　　<tr>
　　　　<td align="right">20</td>
　　　　<td>アカモノ</td>
　　　　<td>ツツジ科</td>
　　　　<td align="center"><a href="http://nono22.sakura.ne.jp/kinomi/kinomi17.htm" target="_blank">17</a></td>
　　　</tr>
　　</tbody>
　</table>
　テーブル
　<script>
　　$(document).ready(function(){
　　　$('#table1').dataTable( {
　　　　"bPaginate": true,
　　　　"bFilter": true,
　　　　"bInfo": true,
　　　　"bAutoWidth": true,
　　　　"bScrollCollapse": false,
　　　　"bScrollInfinite": false,
　　　}); 　＊１
　　});
　</script>
　パラメータ設定







＊１　HPB のプレビューで「識別子、文字列または数がありません」の
　　　エラーメッセージが出る、原因？。実行は可。
</body>
</html>