var countPage;
var pageSize;
var endIndex; // ユーザーが送信した情報
var name;
var sex;
// 行番号を定義
$( document).ready(function() {
// ユーザー追加イベントを登録
$("#submit").click(function() {
// ユーザーが送信した情報を取得
名前 = $("#name").val();
性別 = $("input[name='性別']:checked").val();
年齢 = $(" #age") .val();
pageSize = $("#selectSize option:selected").val();
//alert(name sex age pageSize);
//テーブル tr object
$tr = $("
|
"); の下に作成します。
$td1 = $("
$td2 = $(" | gt; | ");
$td3 = $("
gt; | ");
$ td4 = $( "
");
$td5 = $("
$tr.append($) td1.append( ""));
$tr.append($td2.append(name));
$tr.append($td3.append(性別) ));
$tr.append($td4.append(age));
$tr.append($td5.append("" ));
$("#show").append($tr);
});表示アイテム数
$("#selectSize").change(function() {
pageSize = $("#selectSize option:selected").val();
pageNation();
});
// ページング操作のボタン クリック イベントを登録します
$("#first").click(pageNation); ;
$(" #next").click(pageNation);
});ページング操作用関数
var pageNation = function() {
// 全データ項目数を取得
countSize = $("#show tr").size();
// Get総ページ数
countPage = Math.ceil(countSize / pageSize);
// ページめくり操作を処理します
if (this.nodeType == 1) {
var idValue = $(this).attr("id ");
if ("first" == idValue) {
//alert(idValue)
nowPag = 1; else if (" back" == idValue) {
//alert(nowPag);
if (nowPag > 1) {
nowPag--;
}
} else if (" next" == idValue) {
//alert(idValue);
if (nowPag < countPage) {
nowPag ;
}
} else if ("last" == idValue) ) {
//alert( idValue);
nowPag = countPage>}
}
// alter(pageSize);ディスプレイのインデックス
starIndex = ( nowPag - 1) * pageSize 1;
endIndex = nowPag * pageSize;
if (endIndex > countSize) {
//alert("インデックスがレコードの合計数より大きいです。" endIndex);
endIndex = countSize;
}
if (countSize < pageSize) {
//alert("レコードの合計数レコードがページあたりの表示項目数より少ないです" endIndex);
endIndex = countSize;
}
//alert(starIndex);
if (starIndex == endIndex) {
// 表示操作
$("# show tr:eq(" (starIndex - 1) ")").show();
$("#show tr:lt(") (starIndex - 1) ")").hide();
} else {
// 表示操作
$("#show tr:gt(" (starIndex - 1) ")")。 show();
$("#show tr:lt( " (endIndex - 1) ")").show();
// 隠し操作
$("#show tr :lt(" (starIndex - 1) ")").hide ();
$("#show tr:gt(" (endIndex - 1) ")").hide();
}
// 下部の表示操作を変更します
$("# sizeInfo")
.html(
「現在、「 starIndex 」レコードから「 endIndex 」レコードまで、合計「 countSize
" レコード。");
$("#pageInfo") .html("現在のページは " nowPag "、合計 " countPage " ページです。");
[html] プレーンコピーを表示 コード部分
;jquery を使用して実装する
< ;meta name="keywords" content="keyword1,keyword2,keyword3">
| 
