JQuery頁面的表格數(shù)據(jù)的增加與分頁的實(shí)現(xiàn)
更新時間：2013年12月10日 17:21:25 作者：
使用JQuery實(shí)現(xiàn)頁面的表格數(shù)據(jù)的增加與分頁，具體示例如下，喜歡的朋友可以參考下
復(fù)制代碼 代碼如下:
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);
// 創(chuàng)建表格下的tr對象
$tr = $("<tr class='data' ></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();
});
// 注冊選擇顯示條數(shù)的操作
$("#selectSize").change(function() {
pageSize = $("#selectSize option:selected").val();
pageNation();
});
// 注冊分頁操作的按鈕點(diǎn)擊事件
$("#first").click(pageNation);
$("#back").click(pageNation);
$("#next").click(pageNation);
$("#last").click(pageNation);
});
// 分頁操作的函數(shù)
var pageNation = function() {
// 獲取所有的數(shù)據(jù)條數(shù)
countSize = $("#show tr").size();
// 獲取總頁數(shù)
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);
// 獲取顯示開始和結(jié)束的下標(biāo)
starIndex = (nowPag - 1) * pageSize + 1;
endIndex = nowPag * pageSize;
if (endIndex > countSize) {
// alert("下標(biāo)大于總記錄數(shù)"+endIndex);
endIndex = countSize;
}
if (countSize < pageSize) {
// alert("總記錄數(shù)小小于每頁的顯示條數(shù)"+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(
"當(dāng)前從" + starIndex + "條到第" + endIndex + "條記錄,共" + countSize
+ "條記錄.");
$("#pageInfo").html("當(dāng)前是第" + nowPag + "頁,共" + countPage + "頁.");
};
[html] view plaincopy在CODE上查看代碼片派生到我的代碼片
<!DOCTYPE html>
<html>
<head>
<title>用jquery實(shí)現(xiàn)</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-2.0.3.min.js"></script>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<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 id="content" align="center">
<form action="">
<div id="insertDiv" style="width: 263px; ">
<table id="insertData" border="1px">
<tr>
<td>姓名<input type="text" id="name" value="donghogyu"></td>
</tr>
<tr>
<td>性別<input type="radio" name="sex" value="男"
checked="checked">男<input type="radio" name="sex"
value="女">女
</td>
</tr>
<tr>
<td>年齡<input type="text" id="age" value="21"></td>
</tr>
<tr>
<td align="center"><input type="button" id="submit"
value="添加數(shù)據(jù)"></td>
</tr>
</table>
</div>
<div id="tableDiv">
<div id="top">
<table id="topTable" border="1px">
<thead>
<th><input type="checkbox">全選</th>
<th>姓名</th>
<th>性別</th>
<th>密碼</th>
<th>操作</th>
</thead>
<tbody id="show">
</tbody>
</table>
</div>
<div id="bottom">
<table id="bottomTable" border="1px">
<tr align="center">
<td><input type="button" value="首頁" id="first"></td>
<td><input type="button" value="上一頁" id="back"></td>
<td><input type="button" value="下一頁" id="next"></td>
<td><input type="button" value="末頁" id="last"></td>
<td><select id="selectSize">
<option value="3">3</option>
<option value="5">5</option>
<option value="10">10</option>
</select>條</td>
</tr>
<tr align="center">
<td colspan="6"><span id="sizeInfo">當(dāng)前從0條到第0條記錄.</span></td>
</tr>
<tr align="center">
<td colspan="6"><span id="pageInfo">當(dāng)前是第0頁,共0頁.</span></td>
</tr>
</table>
</div>
</div>
</form>
</div>
</body>
</html>
相關(guān)文章
jQuery實(shí)現(xiàn)圖片上傳預(yù)覽效果功能完整實(shí)例【測試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)圖片上傳預(yù)覽效果功能,結(jié)合完整實(shí)例形式分析了jQuery處理圖片上傳預(yù)覽相關(guān)事件響應(yīng)、瀏覽器判斷、圖片及頁面元素動態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-05-05
忙了一夜，終于把jquery的顏色選擇插件寫完了，不多說了，看看代碼吧。2008-10-10
Yii-自定義刪除確認(rèn)彈框(zyd)jquery實(shí)現(xiàn)代碼
Yii-自定義刪除確認(rèn)彈框(zyd),簡單/時尚/大方適合比較愛酷的人使用，時尚的你可不要錯過了哈，希望本文知識點(diǎn)可以幫助到你2013-03-03
使用jQuery同時控制四張圖片的伸縮實(shí)現(xiàn)代碼
控制圖片的伸縮想必大家都有看到過吧，不過同時控制四張圖片的伸縮卻不是那么的常見吧，接下來為大家詳細(xì)介紹下jQuery同時控制四張圖片的伸縮2013-04-04
EasyUI在表單提交之前進(jìn)行驗(yàn)證的實(shí)例代碼
這篇文章主要介紹了EasyUI在表單提交之前進(jìn)行驗(yàn)證的實(shí)例代碼的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
jquery 動態(tài)遍歷select 賦值的實(shí)例
今天小編就為大家分享一篇jquery 動態(tài)遍歷select 賦值的實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
JQuery中判斷一個元素下面是否有內(nèi)容或者有某個標(biāo)簽的判斷代碼
網(wǎng)站開發(fā)時，我們時常需要把沒有內(nèi)容的標(biāo)簽隱藏或者去掉。在用JQ有兩種好的解決辦法2012-02-02
jQuery 動態(tài)酷效果實(shí)現(xiàn)總結(jié)
jQuery是一個優(yōu)秀的JavaScript框架，可以很好的解決不同瀏覽器兼容的問題，尤其是在ASP.NET MVC下，它的作用更加的凸顯。2009-12-12
基于jQuery實(shí)現(xiàn)中英文切換導(dǎo)航條效果
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)中英文切換導(dǎo)航條效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了jQuery中的類名選擇器（.class）用法,簡單介紹了jQuery類名選擇器的概念、原理并結(jié)合實(shí)例形式分析了類選擇器的簡單使用方法,需要的朋友可以參考下2018-05-05