萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> JQuery頁面的表格數據的增加與分頁的實現

JQuery頁面的表格數據的增加與分頁的實現

 使用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
copyright © 萬盛學電腦網 all rights reserved