JQuery頁面的表格數據的增加與分頁的實現

2024-05-06 15:57:12

字體：大中小

來源：轉載

供稿：網友

使用JQuery實現頁面的表格數據的增加與分頁，具體示例如下，喜歡的朋友可以參考下

復制代碼代碼如下:

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

var starIndex;
var endIndex;

// 用戶提交信息
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 = $("<tr ></tr>");
$td1 = $("<td></td>");
$td2 = $("<td></td>");
$td3 = $("<td></td>");
$td4 = $("<td></td>");
$td5 = $("<td></td>");

$tr.append($td1.append("<input type='checkbox'>"));
$tr.append($td2.append(name));
$tr.append($td3.append(sex));
$tr.append($td4.append(age));
$tr.append($td5.append("<input type='button' value='刪除'>"));

$("#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 < countPage) {
nowPag++;
}
} else if ("last" == idValue) {
// alert(idValue);
nowPag = countPage;
}

}
// alert(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] view plaincopy在CODE上查看代碼片派生到我的代碼片

<!DOCTYPE html>
<html>
<head>
<title>用jquery實現</title>

<meta content="keyword1,keyword2,keyword3">
<meta content="this is my page">
<meta content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-2.0.3.min.js"></script>

<style type="text/css">
div {
border: 1px black solid;
}

#tableDiv {
height: 500px;
}

#insertDiv {
width: 300px;
margin-right: 550px;
}

#tableDiv {
width: 500px;
margin-left: 350px;
}

#top {
width: 500px;
height: 400px;
}

#topTable,#contentTable,#bottomTable {
width: 450px;
}
</style>

<script type="text/javascript" src="../js/jqueryTablePageNation.js"></script>
</head>

<body>
<div>
<form action="">

<div>
<table>
<tr>
<td>姓名<input type="text" value="donghogyu"></td>
</tr>
<tr>
<td>性別<input type="radio" value="男"
checked="checked">男<input type="radio"
value="女">女
</td>

</tr>
<tr>
<td>年齡<input type="text" value="21"></td>
</tr>
<tr>
<td><input type="button"
value="添加數據"></td>
</tr>
</table>
</div>

<div>
<div>
<table>
<thead>

<th><input type="checkbox">全選</th>
<th>姓名</th>
<th>性別</th>
<th>密碼</th>
<th>操作</th>

</thead>
<tbody>

</tbody>
</table>
</div>

<div>
<table>
<tr>
<td><input type="button" value="首頁"></td>
<td><input type="button" value="上一頁"></td>
<td><input type="button" value="下一頁"></td>
<td><input type="button" value="末頁"></td>
<td><select>
<option value="3">3</option>
<option value="5">5</option>
<option value="10">10</option>
</select>條</td>
</tr>
<tr>
<td colspan="6"><span>當前從0條到第0條記錄.</span></td>
</tr>
<tr>
<td colspan="6"><span>當前是第0頁,共0頁.</span></td>
</tr>
</table>

</div>
</div>

</form>
</div>
</body>
</html>