JQuery实现页面的表格数据的增加与分页

来源：互联网发布：缺少网络协议怎么办编辑：程序博客网时间：2024/05/22 06:50

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 + "页.");
};

<!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>

<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">10</option>
                           </select>条</td>
                       </tr>
                       <tr align="center">
                           <td colspan="6"><span id="sizeInfo">当前从0条到第0条记录.</span></td>
                       </tr>
                       <tr align="center">
                           <td colspan="6"><span id="pageInfo">当前是第0页,共0页.</span></td>
                       </tr>
                   </table>

               </div>
           </div>

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

0 0