一、无刷新分页

1.实现原理：前端通过ajax请求获取服务器数据，再由JS把数据组成html渲染到页面中
2.服务器php代码（获取分页数据信息）

  1. <?php
  3. require('connection.php');//链接数据库操作
  5. //获取当前数据记录总条数
  6. $sql="select count(*) as 'nums' from v_staffs;";
  7. $stmt=$pdo->prepare($sql);
  8. $stmt->execute();
  9. $result=$stmt->fetch();
  10. // var_dump($result);
  11. $nums=$result['nums'];
  12. $num=10;//每页显示记录数
  13. $pages=ceil($nums/$num);//获取总页数
  14. // echo $pages;
  17. // 获取当前分页的数据记录信息
  18. $sql='select * from v_staffs limit ?,?;';
  20. // echo $_GET['p'];
  21. $page=$_GET['p']??1;//页码数
  22. $start=($page-1)*$num;//通过页码数获取起始记录数
  23. $stmt=$pdo->prepare($sql);
  25. $stmt->bindParam(1,$start,PDO::PARAM_INT);
  26. $stmt->bindParam(2,$num,PDO::PARAM_INT);
  28. $stmt->execute();
  30. // echo print_r($stmt->fetchAll(),true);
  32. $rows=$stmt->fetchAll(); 
  33. $res=['data'=>$rows,'pages'=>$pages];
  34. echo json_encode($res);
  35. // return json_encode($rows);

2.前端js获取数据请求和页面渲染

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>员工信息表(无刷新分页)</title>
  9.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  10. </head>
  12. <body>
  13.     <main>
  14.         <table border="1" cellpadding='3' cellspacing='0'>
  15.             <caption>员工信息表</caption>
  16.             <tr id="title">
  17.                 <th>编号</th>
  18.                 <th>姓名</th>
  19.                 <th>年龄</th>
  20.                 <th>性别</th>
  21.                 <th>工资</th>
  22.                 <th>邮箱</th>
  23.                 <th>职位</th>
  24.                 <th>负责区域</th>
  25.                 <th>操作</th>
  26.             </tr>
  28.         </table>
  29.         <!--页码部分 -->
  30.         <div id='page'>
  32.         </div>
  33.     </main>
  34. </body>
  35. <script>
  36.     //页面主体内容获取和生成函数
  37.     function getrows(data) {
  38.     //如果页面已经记录信息需要移除
  39.         if ($($("table>tbody")[0]).children().length > 1) {
  40.             $($("table>tbody")[0]).children().remove("tr:not(#title)");
  41.         };
  42.         //生成html内容
  43.         var content = "";
  44.         data.forEach((item) => {
  45.             content += `<tr>
  46.                     <td>${item["id"]}</td>
  47.                     <td>${item["name"]}</td>
  48.                     <td>${item["age"]}</td>
  49.                     <td>${item["gender"]}</td>
  50.                     <td>${item["salary"]}</td>
  51.                     <td>${item["email"]}</td>
  52.                     <td>${item["postion"]}</td>
  53.                     <td>${item["area"]}</td>
  54.                     <td><button><a href="http://php.edu/test/edit.php?id=${item["id"]}" target="_blank">编辑</a></button><button class="delete" data-index="${item["id"]}">删除</button></td>
  55.                     </tr>
  56.                     `;
  57.         });
  58.         //渲染到页面中取
  59.         $('#title').after(content);
  60.     }
  61. //生成分条条函数
  62.     function getpage(pages) {
  63.     //如果没有分页条则生成
  64.         if ($("#page").children().length == 0) {
  65.             var plink = "<span>首页</span><span>&lt</span>";
  66.             for (var i = 1; i <= pages; i++) {
  67.                 plink += `<span>${i}</span>`;
  68.             }
  69.             plink += "<span>&gt;</span><span>尾页</span>"
  70.                 // console.log(plink);
  71.             $("#page").append(plink);
  72.         }
  73.         // console.log($("#page").children().length);
  75.     }
  76. //ajax获取数据信息函数
  77.     function getdata(page) {
  78.         $.ajax({
  79.             type: 'GET',
  80.             url: 'http://php.edu/test/staffs_api.php',
  81.             data: {
  82.                 p: page
  83.             },
  84.             dataType: 'json',
  85.             success: function(res) {
  86.                 // console.log(res);
  87.                 var data = res['data'];
  88.                 var pages = res['pages'];
  89.                 // console.log(data, pages);
  90.                 //调用函数生成页面信息
  91.                 getrows(data);
  92.                 getpage(pages);
  94.             }
  95.         });
  96.     }
  97. //首次打开页面默认获取首页数据信息并展示
  98.     window.onload = function() {
  99.         getdata(1);
  100.     }
  101. //通过委托事件实现翻页（上一页下一页功能没有实现）
  102.     $('#page').click(function(ev) {
  103.         // console.log(ev.target.textContent, ev.currentTarget);
  104.         var currentpage = ev.target.textContent;
  106.         switch (currentpage) {
  107.             case "首页":
  108.                 getdata(1);
  109.                 break;
  110.             case "尾页":
  111.                 var count = $(ev.currentTarget).children().length - 4;
  112.                 getdata(count);
  113.                 break;
  114.             case "<":
  115.                 console.log('上一页');
  116.                 break;
  117.             case ">":
  118.                 console.log("下一页");
  119.                 break;
  120.             default:
  121.                 getdata(currentpage);
  122.         }
  124.     });
  125.     //删除数据功能，通过ajaxComplete()函数来获取动态生成的信息
  126.     $(document).ajaxComplete(function() {
  127.         // console.log($('.delete'));
  128.         $('.delete').click(function(ev) {
  129.             var id = $(ev.target).data("index");
  130.             // console.log(id);
  131.             if (window.confirm("确定删除吗？")) {
  132.                 $.ajax({
  133.                     type: 'GET',
  134.                     url: 'http://php.edu/test/delete.php',
  135.                     data: {
  136.                         id: id
  137.                     },
  138.                     dataType: 'json',
  139.                     success: function(res) {
  140.                         if (res[0] > 0) {
  141.                             return alert("删除成功");
  142.                         } else {
  143.                             return alert("删除失败");
  144.                         }
  145.                     }
  146.                 });
  147.                 window.location.reload();
  148.             } else {
  149.                 return false;
  150.             }
  151.         });
  152.     });
  153. </script>
  154. <style>
  155.     main {
  156.         width: 1000px;
  157.         margin: 10px auto;
  158.     }
  160.     table {
  161.         width: 1000px;
  162.     }
  164.     #page {
  165.         margin-top: 10px;
  166.         width: 1000px;
  167.         display: flex;
  168.         justify-content: space-around;
  169.     }
  171.     #page>span {
  172.         width: 46px;
  173.         height: 20px;
  174.         background-color: lightgray;
  175.         /* border: 1px solid black; */
  176.         text-align: center;
  177.         color: whitesmoke;
  178.         line-height: 20px;
  179.     }
  181.     #page>span:hover {
  182.         cursor: pointer;
  183.         background-color: white;
  184.         color: red;
  185.     }
  187.     th,
  188.     td {
  189.         text-align: center;
  190.     }
  191. </style>
  193. </html>

二、编辑功能

（一）功能实现原理
1.通过分页的编辑按钮获取要编辑数据记录的id,然后通过编辑页面把要编辑的记录显示出来，
2.通过ajax获取新的数据，通过id,更新信息
（二）实现代码
1.前端代码

  1. <?php
  3. include('connection.php');
  5. $sql="select * from v_staffs where id=:id;";
  7. $stmt=$pdo->prepare($sql);
  8. $id=$_GET["id"];
  9. $stmt->bindParam(':id',$id,PDO::PARAM_INT);
  11. $stmt->execute();
  12. // $stmt->debugDumpParams();
  13. $row=$stmt->fetch();
  14. // var_dump($row);
  15. // exit();
  16. ?>
  18. <!DOCTYPE html>
  19. <html lang="en">
  20. <head>
  21.     <meta charset="UTF-8">
  22.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  23.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  24.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  25.     <title>员工信息修改</title>
  26. </head>
  27. <body>
  28. <body>
  29.     <table border="1" cellpadding='3' cellspacing='0'>
  30.     <caption>修改员工信息</caption>
  31.     <tr>
  32.         <th>编号</th>
  33.         <th>姓名</th>
  34.         <th>年龄</th>
  35.         <th>性别</th>
  36.         <th>工资</th>
  37.         <th>邮箱</th>
  38.     </tr>
  39.     <tr>
  40.         <td id="id"><?= $row["id"] ?></td>
  41.         <td><input type="text" name="name" value="<?= $row["name"] ?>"></td>
  42.         <td><input type="text" name="age" value="<?= $row["age"] ?>"></td>
  43.         <td><input type="text" name="gender" value="<?= $row["gender"] ?>"></td>
  44.         <td><input type="text" name="salary" value="<?= $row["salary"] ?>"></td>
  45.         <td><input type="text" name="email" value="<?= $row["email"] ?>"></td>
  46.     </tr>
  47.     </table>
  48.     <button id="update">提交</button>
  49. </body>
  50. <script>
  51.     $("#update").click(function(){
  52.         $.ajax({
  53.             type: 'POST',
  54.             url: 'http://php.edu/test/update.php',
  55.             data: {
  56.             //获取新数据
  57.                 name: $("[name='name']").val(),
  58.                 age:$("[name='age']").val(),
  59.                 gender:$("[name='gender']").val(),
  60.                 salary:$("[name='salary']").val(),
  61.                 email:$("[name='email']").val(),
  62.                 id:$("#id").text()
  63.             },
  64.             dataType: 'json',
  65.             success: function(res) {
  66.             //确认更新成功
  67.                 alert(res[1]);
  68.                 window.close();//关闭窗口
  69.             }
  70.         });
  71.     });
  73. </script>
  74. </html>

2.后端代码

  1. <?php
  3. include('connection.php');
  5. $sql="update staffs set name=?,age=?,gender=?,salary=?,email=? where id=?;";
  7. $stmt=$pdo->prepare($sql);
  8. $stmt->execute([$_POST['name'],$_POST["age"],$_POST["gender"],$_POST["salary"],$_POST["email"],$_POST['id']]);
  9. // $stmt->debugDumpParams();
  10. if($stmt->rowCount()>0){
  11.     echo json_encode([$stmt->rowCount(),"更新成功"]);
  12. }else{
  13.     echo json_encode([0,"更新失败"]);
  14. }

运行效果图

更多相关文章

  1. 第11章 0223-命名空间2与数据库基础1，学习心得、笔记(命名空间引
  2. js的变量与常量、常用数据
  3. 实战：从Mysql数据库frm文件中，提取表结构创建SQL语句
  4. MySQL安全性解决方案
  5. 生产系统数据丢失恢复案例
  6. IntelliJ IDEA 激活码 2021.02.28日更新
  7. 2021-2-28
  8. PHP实战: 实现数据的分页显示和编辑,删除功能.(无刷新,基于ajax)
  9. FreeRTOS例程3-串口中断接收不定长的数据与二值信号量的使用

随机推荐

  1. 报错 src/png_io.c:3:17: error: png.h:
  2. Python语法教程总结规范
  3. python中字典的操作
  4. Python：运算类内建函数列举
  5. Python学习总结-（15）---返回函数和闭包初步
  6. 卸载gcc，ubuntu系统崩溃解决
  7. Python语言及其应用 PDF
  8. Django：测试成功加载静态文件
  9. 如何将json转换为对象？
  10. 环境变量的安装以及python cahrm的安装以