JQuery頁面的表格資料的增加與分頁的實作_jquery

複製程式碼 程式碼如下:

var countPage;
var nowPag = 1;
var pageSize;
var countSize;

var starIndex;
var endo>; // 使用者提交資訊
var name;
var sex;
var age;

// 定義行號
var num = 1;

$( document).ready(function() {
// 註冊新增使用者的事件
$("#submit").click(function() {
// 取得使用者提交的資訊
name = $("#name").val();
sex = $("input[name='sex']:checked").val();
age = $("#age") .val();
pageSize = $("#selectSize option:selected").val();
// alert(name sex age pageSize);

// 建立表格下的tr物件
$tr = $("");
$td1 = $("");
$td2 = $("");
$td3 = $("");
$td4 = $("" );
$td5 = $("");

$tr.append($td1.append(""));
$tr.append($td2.append(name));
$tr.append($td3.append(sex));
$tr.append($td4.append(age)) ;
$tr.append($td5.append(""));

$("#show").append($tr );
pageNation();

});
// 註冊選擇顯示條數的操作
$("#selectSize").change(function() {
pageSize = $("#selectSize option:selected").val();
pageNation();
});

// 註冊分頁操作的按鈕點選事件
$( "#first").click(pageNation);
$("#back").click(pageNation);
$("#next").click(pageNation);
$("# last").click(pageNation);

});

// 分頁操作的函數
var pageNation = function() {
// 取得所有的資料列數
countSize = $("#show tr").size();
// 取得總頁數
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 nowPag ;
}
} else if ("last" == idValue) {
// alert(idValue);
nowPag = countPage;
}

nowPag = countPage;
}

}
// alert(pageSize);
// 取得顯示開始與結束的下標
starIndex = (nowPag - 1) * pageSize 1;
endIndex = nowPag * pageSize;

if (endIndex > countSize) {
// alert("下標大於總記錄數" endIndex);
endIndex = countSize;
}

if (countSize // 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 "p.");
};


[html] view plaincopy在CODE上查看代碼片派生到我的代碼片

全選
第個姓名第>個
性別第>
密碼
操作第>;

頭>



表>

3選項>
5選項>
10選項>
條


目前從0筆到第0筆。


目前是第0頁，共0頁。

表>

表格>

身體>