您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
JQuery页面的表格数据的增加与分页的实现
作者：佚名 责任编辑：admin 更新时间：2022-06-22
使用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 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(); }); // 注册选择显示条数的操作 $("#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 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="添加数据"></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- 上一个程序编程： jquery动态加载select下拉框示例代码
- 下一个程序编程： 实现修改密码时密码框显示保存到cookie的密码
