JQuery頁(yè)面的表格數(shù)據(jù)的增加與分頁(yè)的實(shí)現(xiàn)

更新時(shí)間：2013年12月10日 17:21:25 作者：

使用JQuery實(shí)現(xiàn)頁(yè)面的表格數(shù)據(jù)的增加與分頁(yè)，具體示例如下，喜歡的朋友可以參考下

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

var starIndex; 
var endIndex; 

// 用戶(hù)提交信息 
var name; 
var sex; 
var age; 

// 定義行號(hào) 
var num = 1; 

$(document).ready(function() { 
// 注冊(cè)添加用戶(hù)的事件 
$("#submit").click(function() { 
// 獲取用戶(hù)提交的信息 
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對(duì)象 
$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(); 

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

// 注冊(cè)分頁(yè)操作的按鈕點(diǎn)擊事件 
$("#first").click(pageNation); 
$("#back").click(pageNation); 
$("#next").click(pageNation); 
$("#last").click(pageNation); 

}); 

// 分頁(yè)操作的函數(shù) 
var pageNation = function() { 
// 獲取所有的數(shù)據(jù)條數(shù) 
countSize = $("#show tr").size(); 
// 獲取總頁(yè)數(shù) 
countPage = Math.ceil(countSize / pageSize); 

// 處理翻頁(yè)的操作 
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); 
// 獲取顯示開(kāi)始和結(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ù)小小于每頁(yè)的顯示條數(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 + "頁(yè),共" + countPage + "頁(yè)."); 
}; 


[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="首頁(yè)" id="first"></td> 
<td><input type="button" value="上一頁(yè)" id="back"></td> 
<td><input type="button" value="下一頁(yè)" id="next"></td> 
<td><input type="button" value="末頁(yè)" 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頁(yè),共0頁(yè).</span></td> 
</tr> 
</table> 

</div> 
</div> 


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