<div class="codetitle"> <span><a style="CURSOR: pointer" data="71169" class="copybut" id="copybut71169" onclick="doCopy('code71169')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code71169"> <br>var countPage; <br>var nowPag = 1; <br>var pageSize; <br>var countSize; <br><br>var starIndex; <br>var endIndex; <br><br>// 用户提交信息 <br>var name; <br>var sex; <br>var age; <br><br>// 定义行号 <br>var num = 1; <br><br>$(document).ready(function() { <br>// 注册添加用户的事件 <br>$("#submit").click(function() { <br>// 获取用户提交的信息 <br>name = $("#name").val(); <br>sex = $("input[name='sex']:checked").val(); <br>age = $("#age").val(); <br>pageSize = $("#selectSize option:selected").val(); <br>// alert(name sex age pageSize); <br><br>// 创建表格下的tr对象 <br>$tr = $("<tr class='data' ></tr>"); <br>$td1 = $("<td></td>"); <br>$td2 = $("<td></td>"); <br>$td3 = $("<td></td>"); <br>$td4 = $("<td></td>"); <br>$td5 = $("<td></td>"); <br><br>$tr.append($td1.append("<input type='checkbox'>")); <br>$tr.append($td2.append(name)); <br>$tr.append($td3.append(sex)); <br>$tr.append($td4.append(age)); <br>$tr.append($td5.append("<input type='button' value='删除'>")); <br><br>$("#show").append($tr); <br>pageNation(); <br><br>}); <br>// 注册选择显示条数的操作 <br>$("#selectSize").change(function() { <br>pageSize = $("#selectSize option:selected").val(); <br>pageNation(); <br>}); <br><br>// 注册分页操作的按钮点击事件 <br>$("#first").click(pageNation); <br>$("#back").click(pageNation); <br>$("#next").click(pageNation); <br>$("#last").click(pageNation); <br><br>}); <br><br>// 分页操作的函数 <br>var pageNation = function() { <br>// 获取所有的数据条数 <br>countSize = $("#show tr").size(); <br>// 获取总页数 <br>countPage = Math.ceil(countSize / pageSize); <br><br>// 处理翻页的操作 <br>if (this.nodeType == 1) { <br>var idValue = $(this).attr("id"); <br>if ("first" == idValue) { <br>// alert(idValue); <br>nowPag = 1; <br>} else if ("back" == idValue) { <br>// alert(nowPag); <br>if (nowPag > 1) { <br>nowPag--; <br>} <br><br>} else if ("next" == idValue) { <br>// alert(idValue); <br>if (nowPag < countPage) { <BR>nowPag ; <BR>} <BR>} else if ("last" == idValue) { <BR>// alert(idValue); <BR>nowPag = countPage; <BR>} <br><br>} <BR>// alert(pageSize); <BR>// 获取显示开始和结束的下标 <BR>starIndex = (nowPag - 1) * pageSize 1; <BR>endIndex = nowPag * pageSize; <br><br>if (endIndex > countSize) { <br>// alert("下标大于总记录数" endIndex); <br>endIndex = countSize; <br>} <br><br>if (countSize < pageSize) { <BR>// alert("总记录数小小于每页的显示条数" endIndex); <BR>endIndex = countSize; <BR>} <br><br>// alert(starIndex); <br><br>if (starIndex == endIndex) { <BR>// 显示的操作 <BR>$("#show tr:eq(" (starIndex - 1) ")").show(); <BR>$("#show tr:lt(" (starIndex - 1) ")").hide(); <BR>} else { <BR>// 显示的操作 <BR>$("#show tr:gt(" (starIndex - 1) ")").show(); <BR>$("#show tr:lt(" (endIndex - 1) ")").show(); <br><br>// 隐藏的操作 <BR>$("#show tr:lt(" (starIndex - 1) ")").hide(); <BR>$("#show tr:gt(" (endIndex - 1) ")").hide(); <BR>} <BR>// 改变底部显示操作 <BR>$("#sizeInfo") <BR>.html( <BR>"当前从" starIndex "条到第" endIndex "条记录,共" countSize <BR> "条记录."); <BR>$("#pageInfo").html("当前是第" nowPag "页,共" countPage "页."); <BR>}; <br><br><BR>[html] view plaincopy在CODE上查看代码片派生到我的代码片 <br><br><!DOCTYPE html> <br><html> <br><head> <br><title>用jquery实现</title> <br><br><meta name="keywords" content="keyword1,keyword2,keyword3"> <br><meta name="description" content="this is my page"> <br><meta name="content-type" content="text/html; charset=UTF-8"> <br><script type="text/javascript" src="../js/jquery-2.0.3.min.js"></script> <br><!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <br><style type="text/css"> <br>div { <br>border: 1px black solid; <br>} <br><br>#tableDiv { <br>height: 500px; <br>} <br><br>#insertDiv { <br>width: 300px; <br>margin-right: 550px; <br>} <br><br>#tableDiv { <br>width: 500px; <br>margin-left: 350px; <br>} <br><br>#top { <br>width: 500px; <br>height: 400px; <br>} <br><br>#topTable,#contentTable,#bottomTable { <br>width: 450px; <br>}<br></风格> <br><br><br><script type="text/javascript" src="../js/jqueryTablePageNation.js"></script> <br></头> <br><br><身体> <br><div id="content"align="center"> <br> <br><br><div id="insertDiv" style="width: 263px; "> <br> <br><tr> <br><td>姓名<input type="text" id="name" value="donghogyu"></td> <br></tr> <br><tr> <br><td>性别<input type="radio" name="sex" value="男">checked="checked">男<input type="radio" name="sex">value="女">女<br> </td>; <br><br></tr> <br><tr> <br><td>年龄<input type="text" id="age" value="21"></td> <br></tr> <br><tr> <br><tdalign="center"><input type="button" id="submit"<BR>value="数据添加"></td> <br></tr> <br></表> <br></div> <br><br><div id="tableDiv"> <br><div id="top"> <br> <br><头> <br><br><th><input type="checkbox">全选</th> <br>第个姓名第>个<br>性别第> <br><th>密码</th> <br>操作第>; <br><br></头> <br><tbody id="show"> <br><br></tbody> <br></表> <br></div> <br><br><div id="bottom"> <br><table id="bottomTable" border="1px"> <br><tralign> <br><td><input type="button" value="首页" id="first"></td> <br><td><input type="button" value="上一页" id="back"></td> <br><td><input type="button" value="下一页" id="next"></td> <br><td><input type="button" value="末页" id="last"></td> <br><td><select id="selectSize"> <br>3选项> <br>5选项> <br>10选项> <br></select>条</td> <br></tr> <br><tralign> <br><td colspan="6"><span id="sizeInfo">当前从0条到第0条记录。</span></td> <br></tr> <br><tralign> <br><td colspan="6"><span id="pageInfo">当前是第0页,共0页。</span></td> <br></tr> <br></表> <br><br></div> <br></div> <br><br><br></表格> <br></div> <br></身体> <br></html> <br></tralign></tralign></tralign> </table> </tbody> </div> </div>