JQuery實現頁面的表格資料的增加與分頁
阿新 • • 發佈：2019-01-04
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> <!--<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">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>