Community Learn Tools Library Leisure
search
English
Home > List of blog posts > PHP实战: 实现数据的分页显示和编辑,删除功能.(基于ajax无刷新, 源码)
Blogger Information
Blog 17
fans 1
comment 0
visits 14494
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
PHP实战: 实现数据的分页显示和编辑,删除功能.(基于ajax无刷新, 源码)
zl的php学习博客
Original
1149 people have browsed it

PS: 本次提交的是一个文件夹,由于博客不能提交文件夹,所以我按照文件目录直接贴的代码.

效果展示

效果图

目录结构

内容

<span id="1">job</span>

<span id="1.1">config</span>

<span id="1.1.1">config.php</span>
  1. <?php
  3. return [
  4.     'type' => 'mysql',
  5.     'host' => '127.0.0.1',
  6.     'dbname' => 'phpedu',
  7.     'port' => '3306',
  8.     'charset' => 'utf8mb4',
  9.     'username' => 'admin',
  10.     'password' => '123456'
  11. ];
<span id="1.1.2">connect.php</span>
  1. <?php
  3. function connect()
  4. {
  5.     $config = require __DIR__ . '/config.php';
  7.     extract($config);
  9.     // 'mysql:host=127.0.0.1;dbname=phpedu;port=3306;charset=utf8mb4';
  10.     $dsn = sprintf('%s:host=%s;dbname=%s;port=%s;charset=%s', $type, $host, $dbname, $port, $charset);
  12.     try {
  13.         $pdo = new PDO($dsn, $username, $password);
  14.         $pdo->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
  15.         return $pdo;
  16.     } catch (PDOException $e) {
  17.         die('连接失败: ' . $e->getMessage());
  18.     }
  19. }

<span id="1.2">controller</span>

<span id="1.2.1">handle.php</span>
  1. <?php
  3. $handle = $_GET['handle'] ?? $_POST['handle'] ?? 'select';
  5. //var_dump($_POST);
  6. //echo $handle;
  7. //die();
  8. switch ($handle) {
  9.     case 'select':
  10.         require __DIR__ . '/select.php';
  11.         break;
  12.     case 'update':
  13.         require __DIR__ . '/update.php';
  14.         break;
  15.     case 'delete':
  16.         require __DIR__ . '/delete.php';
  17.         break;
  18. }
<span id="1.2.2">delete.php</span>
  1. <?php
  3. require dirname(__DIR__) . '../config/connect.php';
  6. $sid = $_POST['sid'];
  7. if (empty($sid)) {
  8.     echo json_encode(['message' => '请求参数为null', 'code' => -20001]);
  9. } else {
  10.     $pdo = connect();
  12.     $sql = "DELETE FROM `staffs` where sid=?";
  13.     $stmt = $pdo->prepare($sql);
  14.     $stmt->execute([$sid]);
  16.     if ($stmt->rowCount()) {
  17.         echo json_encode(['message' => '删除成功', 'code' => 0]);
  18.     } else {
  19.         echo json_encode(['message' => '删除失败', 'code' => -20001]);
  20.     }
  21. }
<span id="1.2.3">select.php</span>
  1. <?php
  3. //function select($page = 1): string
  4. //{
  5. require dirname(__DIR__) . '../config/connect.php';
  7. $page = $_GET['p'] ?? 1;
  8. $limit = 10;
  9. $offset = ($page - 1) * $limit;
  11. $pdo = connect();
  13. // 获取分页数据
  14. $sql = "SELECT sid, name, gender, age, birthday, salary, create_d, update_d FROM `staffs` LIMIT ? OFFSET ?;";
  15. $stmt = $pdo->prepare($sql);
  16. $stmt->bindParam(1, $limit, PDO::PARAM_INT);
  17. $stmt->bindParam(2, $offset, PDO::PARAM_INT);
  18. $stmt->execute();
  19. $limitData = $stmt->fetchAll();
  20. // 获取总数据
  21. $sql = "SELECT ceil(count(1)/{$limit}) countPage FROM `staffs`;";
  22. $stmt = $pdo->prepare($sql);
  23. $stmt->execute();
  24. $countPage = $stmt->fetch();
  25. //var_dump($stmt->fetchAll(PDO::FETCH_ASSOC));
  26. echo json_encode(['page' => $page, 'countPage' => $countPage['countPage'], 'data' => $limitData]);
  27. //}
<span id="1.2.4">update.php</span>
  1. <?php
  3. require dirname(__DIR__) . '../config/connect.php';
  5. $sid = $_POST['sid'];
  6. $name = $_POST['name'];
  7. $gender = $_POST['gender'];
  8. $age = $_POST['age'];
  9. $birthday = $_POST['birthday'];
  10. $salary = $_POST['salary'];
  12. //var_dump($_POST, $salary);
  14. //die();
  15. if (empty($sid) || empty($name) || empty($gender) || empty($age) || empty($birthday) || empty($salary)) {
  16.     echo json_encode(['message' => '请求参数为null', 'code' => -20001]);
  17. } else {
  18.     $pdo = connect();
  20.     $sql = <<< SQL
  21.         UPDATE `staffs` 
  22.         SET name = ?, gender = ?, age = ?, birthday = ?, salary = ? 
  23.         WHERE sid = ?;
  24.     SQL;
  25.     $stmt = $pdo->prepare($sql);
  26.     $stmt->execute([$name, $gender, $age, $birthday, $salary, $sid]);
  28.     if ($stmt->rowCount()) {
  29.         echo json_encode(['message' => '修改成功', 'code' => 0]);
  30.     } else {
  31.         echo json_encode(['message' => '修改失败', 'code' => -20002, 'data' => print_r($_POST, true)]);
  32.     }
  33. }

<span id="1.3">pure-css3-icons</span>

<span id="1.3.1">icono.min.css</span>

  1. .icono-areaChart,.icono-barChart,.icono-book,.icono-book:after,.icono-book:before,.icono-bookmarkEmpty,.icono-bookmarkEmpty:before,.icono-camera,.icono-chain:after,.icono-chain:before,.icono-clock,.icono-commentEmpty,.icono-creditCard,.icono-crop,.icono-crop:before,.icono-display,.icono-document,.icono-eye,.icono-file,.icono-flag:after,.icono-flag:before,.icono-folder,.icono-forbidden,.icono-frown,.icono-frown:after,.icono-headphone,.icono-heart,.icono-heart:after,.icono-heart:before,.icono-home,.icono-home:after,.icono-home:before,.icono-imac,.icono-imacBold,.icono-image,.icono-infinity:after,.icono-infinity:before,.icono-iphone,.icono-iphoneBold,.icono-keyboard,.icono-macbook:before,.icono-macbookBold:before,.icono-mail,.icono-mail:before,.icono-market,.icono-market:after,.icono-meh,.icono-meh:after,.icono-microphone,.icono-microphone:before,.icono-mouse,.icono-mouse:before,.icono-nexus,.icono-paperClip,.icono-paperClip:after,.icono-paperClip:before,.icono-piano,.icono-pin,.icono-pin:before,.icono-power,.icono-rename,.icono-ruler,.icono-search,.icono-signIn,.icono-signIn:before,.icono-signOut,.icono-signOut:before,.icono-smile,.icono-smile:after,.icono-stroke,.icono-sync,.icono-tag,.icono-tag:after,.icono-terminal,.icono-trash,.icono-user,.icono-user:before,.icono-video,.icono-volumeHigh:after,.icono-volumeHigh:before,.icono-volumeLow:before,.icono-volumeMedium:before,.icono-youtube,.icono-youtube:before,[class*=icono-check][class*=Circle],[class*=icono-][class*=Circle],[class*=icono-][class*=Square]{border:2px solid}.icono-chain:after,.icono-chain:before,.icono-downArrow:before,.icono-dropper:before,.icono-flickr:after,.icono-flickr:before,.icono-indent:before,.icono-leftArrow:before,.icono-list:before,.icono-outdent:before,.icono-paperClip:before,.icono-rename:before,.icono-rightArrow:before,.icono-upArrow:before,.icono-video:before,.icono-volumeDecrease:after,.icono-volumeDecrease:before,.icono-volumeHigh:after,.icono-volumeHigh:before,.icono-volumeIncrease:after,.icono-volumeIncrease:before,.icono-volumeLow:before,.icono-volumeMedium:before,.icono-volumeMute:after,.icono-volumeMute:before,.stickCenterV{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.icono-cup:after,.icono-display:after,.icono-display:before,.icono-imac:after,.icono-imacBold:after,.icono-imacBold:before,.icono-iphone:after,.icono-iphone:before,.icono-macbook:before,.icono-macbookBold:before,.icono-market:after,.icono-microphone:after,.icono-microphone:before,.icono-mouse:after,.icono-mouse:before,.icono-search:before,.icono-sitemap:after,.icono-sitemap:before,.icono-tag:after,.icono-textAlignCenter[class*=icono-textAlign]:after,.icono-textAlignCenter[class*=icono-textAlign]:before,.icono-trash:before,.icono-user:before,.stickCenterH,[class*=icono-exclamation]:after{position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.icono-camera:before,.icono-clock:after,.icono-clock:before,.icono-document:after,.icono-eye:before,.icono-forbidden:before,.icono-gear:before,.icono-gplus:after,.icono-instagram:before,.icono-keyboard:before,.icono-pin:before,.icono-video:after,.icono-youtube:after,.stickCenter,[class*=icono-check]:before,[class*=icono-plus]:after,[class*=icono-plus]:before,[class*=icono-cross]:after,[class*=icono-cross]:before{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.spin[class*=spin]{-webkit-animation:loading-spinner 2s infinite linear;animation:loading-spinner 2s infinite linear}@-webkit-keyframes loading-spinner{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes loading-spinner{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.icono-icono{width:13px;height:4px;box-shadow:inset 0 0 0 32px,0 16px,17px -18px;-webkit-transform:skew(0,30deg);transform:skew(0,30deg);margin:11px 19px 19px 2px}.icono-icono:before{position:absolute;width:13px;height:4px;box-shadow:inset 0 0 0 32px,0 16px,-17px -17px;right:-17px;top:-10px;-webkit-transform:skew(0,-48deg);transform:skew(0,-48deg)}.icono-icono:after{position:absolute;width:22px;height:15px;left:0;top:-5px;border:4px solid;border-top-color:transparent;border-bottom:none;-webkit-transform:skew(0,-30deg) scaleY(.6);transform:skew(0,-30deg) scaleY(.6)}.icono-home{width:22px;height:16px;border-top:none;margin:15px 6px 3px}.icono-home:before{width:18px;height:18px;-webkit-transform:rotate(45deg);transform:rotate(45deg);position:absolute;left:-2px;top:-7px;border-right-color:transparent;border-bottom-color:transparent}.icono-home:after{width:6px;height:10px;bottom:0;position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);border-width:1px;border-bottom:none}.icono-mail{width:28px;height:18px;overflow:hidden;margin:8px 3px}.icono-mail:before{position:absolute;width:25px;height:25px;-webkit-transform:rotate(50deg) skew(-10deg,-20deg);transform:rotate(50deg) skew(-10deg,-20deg);top:-20px;left:-3px}.icono-rss{width:22px;height:22px;overflow:hidden;margin:6px}.icono-rss:after,.icono-rss:before{position:absolute;border-radius:50%}.icono-rss:before{width:6px;height:6px;box-shadow:0 0 32px inset;left:0;bottom:0}.icono-rss:after{width:27px;height:27px;right:15%;top:15%;border:4px solid transparent;box-shadow:inset 0 0 0 2px,0 0 0 2px}.icono-file:before,.icono-heart,.icono-power{border-top-color:transparent}.icono-file:before,.icono-heart:before,.icono-reset:before,.icono-sync,.icono-sync:after,.icono-sync:before{border-right-color:transparent}.icono-document:before,.icono-heart:after,.icono-reset:before{border-bottom-color:transparent}.icono-bars,.icono-hamburger{width:20px;height:2px;box-shadow:inset 0 0 0 32px,0 -6px,0 6px;margin:16px 7px}.icono-power:before,[class*=icono-check]:after,[class*=icono-check]:before,[class*=icono-plus]:after,[class*=icono-plus]:before,[class*=icono-cross]:after,[class*=icono-cross]:before{box-shadow:inset 0 0 0 32px}[class*=icono-plus],[class*=icono-cross]{width:30px;height:30px;margin:2px}[class*=icono-check]:before,[class*=icono-plus]:before,[class*=icono-cross]:before{width:20px;height:2px}[class*=icono-plus]:after,[class*=icono-cross]:after{height:20px;width:2px}[class*=Circle][class*=icono-check]:before,[class*=icono-plus][class*=Circle]:before,[class*=icono-cross][class*=Circle]:before{width:18px}[class*=icono-plus][class*=Circle]:after,[class*=icono-cross][class*=Circle]:after{height:18px}.icono-cross,.icono-crossCircle{-webkit-transform:rotate(45deg);transform:rotate(45deg)}[class*=icono-check]{width:28px;height:28px;margin:3px 0 3px 6px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}[class*=icono-check]:after{position:absolute;height:12px;width:2px;left:4px;bottom:14px}[class*=icono-check][class*=Circle]{border-radius:50%;width:30px;height:30px;margin:2px}[class*=icono-check][class*=Circle]:before{width:14px;top:15px;left:14px}[class*=icono-check][class*=Circle]:after{height:8px;left:7px;bottom:10px}.icono-power{width:22px;height:22px;border-radius:50%;margin:6px}.icono-power:before{position:absolute;top:-15%;left:8px;width:2px;height:60%}.icono-heart{width:20px;height:20px;border-left-color:transparent;-webkit-transform:rotate(45deg);transform:rotate(45deg);border-radius:4px 0;margin:9px 7px 5px}.icono-heart:after,.icono-heart:before{position:absolute}.icono-heart:before{width:8px;height:14px;left:-10px;bottom:-2px;border-radius:20px 0 0 20px}.icono-heart:after{width:14px;height:8px;right:-2px;top:-10px;border-radius:20px 20px 0 0}.icono-infinity{width:32px;height:16px;margin:9px 1px}.icono-infinity:after,.icono-infinity:before{width:10px;height:10px;position:absolute;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.icono-infinity:before{left:0;border-radius:32px 0 32px 32px}.icono-infinity:after{right:1px;border-radius:32px 32px 32px 0}.icono-flag{width:22px;height:25px;border-left:3px solid;margin:5px 6px 4px}.icono-flag:after,.icono-flag:before{position:absolute;width:9px;height:8px}.icono-flag:before{left:-2px;top:1px;border-radius:0 2px 0 0;border-right-width:3px}.icono-flag:after{width:5px;left:9px;top:4px;border-left-width:3px;border-radius:2px 2px 0}.icono-file{width:26px;height:32px;border-radius:0 12px 0 0;margin:1px 4px}.icono-file:before{position:absolute;top:-2px;right:-2px;border-style:solid;width:0;height:0;border-width:5px}.icono-document{width:26px;height:32px;border-radius:0 0 0 10px;margin:1px 4px}.icono-document:before{position:absolute;width:0;height:0;left:-3px;bottom:-3px;border-width:5px;border-style:solid;border-left-color:transparent}.icono-folder:after,.icono-folder:before{left:-12px;position:absolute;border-style:solid}.icono-document:after{width:13px;height:2px;box-shadow:inset 0 0 0 32px,0 -5px 0 0,0 5px 0 0}.icono-folder{width:18px;height:22px;border-left-width:0;border-radius:0 3px 3px 0;margin:8px 2px 4px 14px}.icono-folder:before{width:12px;height:20px;bottom:-2px;border-width:0 0 2px 2px;border-radius:0 0 0 3px}.icono-folder:after{width:10px;height:5px;top:-7px;border-width:2px 2px 0;border-radius:3px 3px 0 0}.icono-pin{width:26px;height:26px;border-radius:50% 50% 50% 0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);margin:1px 4px 7px}.icono-pin:before{position:absolute;width:6px;height:6px;border-radius:50%}.icono-frown,.icono-meh,.icono-smile{border-radius:50%;height:30px;width:30px;margin:2px}.icono-frown:before,.icono-meh:before,.icono-smile:before{border-radius:50%;box-shadow:8px 0 0 0,0 0 0 2px inset;height:4px;width:4px;left:7px;position:absolute;top:27%}.icono-frown:after,.icono-meh:after,.icono-smile:after{border-radius:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);border-top-color:transparent;border-left-color:transparent;border-right-color:transparent;height:16px;left:50%;position:absolute;top:6%;width:16px}.icono-eye{border-radius:80% 20%;-webkit-transform:rotate(45deg);transform:rotate(45deg);border-width:2px 1px 1px 2px;height:28px;width:28px;margin:3px}.icono-eye:before{border-radius:50%;box-shadow:0 -3px 0 3px inset;height:11px;width:11px}.icono-sliders{height:30px;width:30px;margin:2px}.icono-sliders:after,.icono-sliders:before{-webkit-transform:translateX(-50%);transform:translateX(-50%);left:50%;position:absolute}.icono-sliders:before{width:8px;height:7px;border-radius:2px;top:67%;box-shadow:inset 0 0 0 32px,10px -10px,-10px -14px}.icono-sliders:after{position:absolute;width:2px;height:100%;box-shadow:inset 0 0 0 32px,10px 0,-10px 0}.icono-share{height:9px;width:9px;border-radius:50%;box-shadow:inset 0 0 0 32px,22px -11px 0 0,22px 11px 0 0;margin:12px 24px 13px 1px}.icono-reset,.icono-sync{border-radius:50%;margin:4px;border-left-color:transparent}.icono-share:after,.icono-share:before{position:absolute;width:24px;height:2px;box-shadow:inset 0 0 0 32px;left:0}.icono-share:before{top:-2px;-webkit-transform:rotate(-25deg);transform:rotate(-25deg)}.icono-share:after{top:9px;-webkit-transform:rotate(25deg);transform:rotate(25deg)}.icono-sync{width:26px;height:26px}.icono-sync:after,.icono-sync:before{position:absolute;width:0;height:0;border-width:6px;border-style:solid;border-bottom-color:transparent;border-left-color:transparent}.icono-sync:before{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);right:-7px;top:0}.icono-sync:after{-webkit-transform:rotate(135deg);transform:rotate(135deg);left:-7px;bottom:0}.icono-reset{width:26px;height:26px;border-width:2px;border-style:solid}.icono-reset:before{position:absolute;width:0;height:0;left:-7px;bottom:0;border-width:6px;border-style:solid;border-left-color:transparent;-webkit-transform:rotate(135deg);transform:rotate(135deg)}.icono-gear{width:32px;height:32px;border:3px dotted;border-radius:50%;margin:1px}.icono-gear:before{width:22px;height:22px;box-shadow:0 0 0 3px,0 0 0 2px inset;border-radius:50%;border:6px solid transparent;box-sizing:border-box}.icono-signIn:before,.icono-signOut:before{position:absolute;top:7px;border-bottom:none;-webkit-transform:rotate(45deg)}.icono-signIn{width:18px;height:32px;border-left:none;border-radius:0 3px 3px 0;margin:1px 8px}.icono-signIn:before{width:11px;height:11px;left:-10px;border-left:none;transform:rotate(45deg);border-radius:0 4px 0 0}.icono-signOut{width:18px;height:32px;border-right:none;border-radius:3px 0 0 3px;margin:1px 8px}.icono-signOut:before{width:11px;height:11px;right:-2px;border-left:none;transform:rotate(45deg);border-radius:0 4px 0 0}.icono-support{width:26px;height:26px;border:5px solid transparent;box-shadow:0 0 0 2px inset,0 0 0 2px;border-radius:50%;margin:4px}.icono-dropper,.icono-youtube:after,.icono-youtube:before{border-top-color:transparent;border-bottom-color:transparent}.icono-support:after,.icono-support:before{width:7px;height:7px;top:-3px;box-shadow:inset 0 0 0 32px,21px 0 0 0;position:absolute}.icono-support:before{left:-3px;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.icono-support:after{right:-3px;-webkit-transform:rotate(135deg);transform:rotate(135deg)}.icono-dropper{width:40px;height:14px;border-width:3px;border-style:solid;border-right:none;border-left-color:transparent;box-shadow:-9px 0 0 2px inset,0 0 0 2px inset;border-radius:50% 6px 6px 50%;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);margin:12px -2px 8px -4px}.icono-rename:before,.icono-youtube{border-right-color:transparent;border-left-color:transparent}.icono-dropper:before{width:4px;height:14px;right:10px;box-shadow:inset 0 0 0 32px}.icono-tiles{width:4px;height:4px;box-shadow:0 -8px 0,-8px -8px 0,8px -8px 0,0 0 0 32px inset,-8px 0 0,8px 0 0,0 8px 0,-8px 8px 0,8px 8px 0;margin:15px}.icono-list,.icono-list:before{height:4px;box-shadow:inset 0 0 0 32px,0 -8px 0 0,0 8px 0 0}.icono-list{width:4px;margin:15px 26px 15px 4px}.icono-list:before{width:18px;left:8px}.icono-chain{width:16px;height:2px;box-shadow:inset 0 0 0 32px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);margin:16px 9px}.icono-chain:after,.icono-chain:before{width:12px;height:8px;border-radius:4px}.icono-chain:before{right:-10px}.icono-chain:after{left:-10px}.icono-youtube{border-radius:10px;width:32px;height:22px;margin:6px 1px}.icono-youtube:before{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:6px/3px}.icono-youtube:after{width:0;height:0;border-width:4px 0 4px 8px;border-style:solid}.icono-rename{width:26px;height:10px;border-color:transparent;border-width:3px;box-shadow:0 0 0 1px,11px 0 0 0 inset;margin:12px 4px}.icono-rename:before{width:1px;height:18px;left:9px;border-width:2px 4px;border-style:solid;box-shadow:0 0 0 1px inset}.icono-search{width:22px;height:22px;border-radius:50%;-webkit-transform:rotate(45deg);transform:rotate(45deg);margin:4px 4px 8px 8px}.icono-search:before{width:4px;height:11px;box-shadow:inset 0 0 0 32px;top:19px;border-radius:0 0 1px 1px}.icono-book,.icono-book:before{border-top:none;border-radius:0 0 0 6px}.icono-book{width:26px;height:22px;margin:10px 4px 2px}.icono-book:after,.icono-book:before{width:24px;left:-2px;position:absolute;box-sizing:border-box}.icono-book:before{height:7px;border-right:none;top:-5px}.icono-book:after{height:8px;top:-8px;border-bottom:none;border-radius:6px 0 0}.icono-forbidden{width:28px;height:28px;border-width:3px;border-radius:50%;margin:3px;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.icono-forbidden:before{width:24px;height:4px;box-shadow:inset 0 0 0 32px}.icono-trash{width:22px;height:22px;border-radius:0 0 3px 3px;border-top:none;margin:9px 6px 3px}.icono-trash:before{width:8px;height:2px;top:-6px;box-shadow:inset 0 0 0 32px,-10px 2px 0 0,-6px 2px 0 0,0 2px 0 0,6px 2px 0 0,10px 2px 0 0}.icono-keyboard{width:32px;height:22px;border-radius:3px;margin:6px 1px}.icono-keyboard:before{width:2px;height:2px;box-shadow:-2px -4px 0,-6px -4px 0,-10px -4px 0,2px -4px 0,6px -4px 0,8px -4px 0,10px -4px 0,-4px 0 0,-8px 0 0,-10px 0 0,inset 0 0 0 32px,4px 0 0,8px 0 0,10px 0 0,4px 4px 0,2px 4px 0,0 4px 0,-2px 4px 0,-6px 4px 0,-10px 4px 0,6px 4px 0,10px 4px 0}.icono-mouse{width:23px;height:32px;border-radius:11px 11px 12px 12px;margin:1px 5px 1px 6px}.icono-mouse:before{width:1px;height:6px;border-radius:2px;border-color:transparent;border-width:1px;top:5px;box-shadow:0 0 0 1px,0 0 0 2px inset}.icono-mouse:after{width:1px;height:4px;top:0;box-shadow:inset 0 0 0 32px,0 13px 0 0}.icono-user{width:32px;height:14px;border-radius:64px 64px 0 0/64px;margin:18px 1px 2px}.icono-user:before{width:12px;height:12px;top:-20px;border-radius:50%}.icono-crop{width:21px;height:21px;border-left:none;border-bottom:none;margin:9px 9px 4px 4px}.icono-crop:before{position:absolute;width:21px;height:21px;top:-7px;right:-7px;border-top:none;border-right:none;box-sizing:border-box}.icono-imac,.icono-iphone,.icono-macbook:before{border-color:transparent}.icono-crop:after{width:27px;height:1px;position:absolute;top:0;right:0;bottom:12px;left:2px;margin:auto;box-shadow:inset 0 0 0 32px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.icono-image:before,.icono-tag{-webkit-transform:rotate(45deg)}.icono-display{width:26px;height:22px;margin:4px 4px 8px}.icono-display:before{width:4px;height:3px;bottom:-5px;box-shadow:inset 0 0 0 32px}.icono-display:after{width:14px;height:2px;bottom:-6px;box-shadow:inset 0 0 0 32px}.icono-imac{width:28px;height:24px;border-width:2px 2px 6px;border-radius:3px;box-shadow:0 0 0 1px,0 0 0 1px inset;margin:3px 3px 7px}.icono-imac:after,.icono-imac:before,.icono-imacBold:after,.icono-imacBold:before{box-shadow:inset 0 0 0 32px}.icono-imac:before{position:absolute;height:4px;right:-3px;left:-3px;bottom:-6px;border-radius:0 0 3px 3px}.icono-imac:after{width:9px;height:7px;bottom:-12px;border-radius:32px 32px 0 0/64px}.icono-imacBold{width:28px;height:22px;border-radius:4px;margin:4px 3px 8px}.icono-imacBold:before{width:9px;height:7px;bottom:-6px;border-radius:32px 32px 0 0/64px}.icono-imacBold:after{width:24px;height:3px;bottom:0}.icono-iphone{width:19px;height:31px;border-radius:3px;border-width:5px 1px;box-shadow:0 0 0 1px,0 0 0 1px inset;margin:2px 8px 1px 7px}.icono-iphone:after,.icono-iphone:before,.icono-macbook{box-shadow:inset 0 0 0 32px}.icono-iphone:before{width:3px;height:1px;top:-3px}.icono-iphone:after{width:3px;height:3px;bottom:-4px;border-radius:50%}.icono-iphoneBold{width:20px;height:32px;margin:1px 7px;border-radius:4px;border-width:5px 2px}.icono-macbook{width:32px;height:2px;border-radius:0 0 32px 32px/3px;margin:25px 1px 7px}.icono-macbook:before{width:20px;height:14px;bottom:2px;border-width:3px 1px 1px;border-radius:3px 3px 0 0;box-shadow:0 0 0 1px,0 0 0 1px inset}.icono-macbookBold{width:32px;height:2px;box-shadow:inset 0 0 0 32px;margin:25px 1px 7px}.icono-macbookBold:before{width:20px;height:14px;bottom:2px;border-width:3px 2px 1px;border-radius:3px 3px 0 0}.icono-image{width:30px;height:26px;border-radius:3px;overflow:hidden;margin:4px 2px}.icono-image:before{position:absolute;width:20px;height:20px;left:-2px;top:14px;transform:rotate(45deg);box-shadow:inset 0 0 0 32px,10px -6px 0 0}.icono-image:after{position:absolute;width:4px;height:4px;border-radius:50%;box-shadow:inset 0 0 0 32px;top:5px;right:5px}.icono-headphone{width:30px;height:27px;border-bottom-color:transparent;border-radius:32px/32px 32px 16px 16px;margin:2px 2px 5px}.icono-headphone:before{position:absolute;width:4px;height:12px;left:1px;bottom:-4px;border-radius:5px;box-shadow:inset 0 0 0 32px,20px 0 0 0}.icono-music{width:18px;height:6px;-webkit-transform:skewY(-15deg);transform:skewY(-15deg);box-shadow:inset 0 0 0 32px;border-radius:2px 2px 0 0;margin:4px 5px 24px 11px}.icono-music:after,.icono-music:before{box-shadow:inset 0 0 0 32px,16px 0 0 0;position:absolute}.icono-music:before{width:2px;height:16px;left:0;top:4px}.icono-music:after{width:10px;height:8px;left:-8px;top:17px;border-radius:50%}.icono-video{width:20px;height:20px;margin:7px}.icono-video:before{width:3px;height:3px;left:-8px;box-shadow:inset 0 0 0 32px,0 -8px 0 0,0 8px 0 0,29px 0 0 0,29px -8px 0 0,29px 8px 0 0}.icono-video:after{width:0;height:0;border-width:4px 0 4px 6px;border-style:solid;border-top-color:transparent;border-bottom-color:transparent}.icono-nexus{width:21px;height:32px;border-width:3px 1px;border-radius:16px/3px;margin:1px 7px 1px 6px}.icono-microphone{width:22px;height:15px;border-width:0 2px 2px;border-radius:20px/0 0 20px 20px;margin:12px 6px 7px}.icono-microphone:before{width:10px;height:18px;top:-11px;border-radius:20px}.icono-microphone:after{width:2px;height:2px;bottom:-4px;box-shadow:inset 0 0 0 32px,0 2px,0 4px,-2px 4px,-4px 4px,-6px 4px,2px 4px,4px 4px,6px 4px}.icono-asterisk,.icono-asterisk:after,.icono-asterisk:before{width:4px;height:20px;box-shadow:inset 0 0 0 32px;border-radius:1px;margin:7px 15px}.icono-paperClip,.icono-paperClip:before{border-radius:0 16px 16px 0;border-left:none}.icono-asterisk:after,.icono-asterisk:before{position:absolute;margin:0;left:0;top:0}.icono-asterisk:before{-webkit-transform:rotate(-58deg);transform:rotate(-58deg)}.icono-asterisk:after{-webkit-transform:rotate(58deg);transform:rotate(58deg)}.icono-terminal{width:28px;height:24px;margin:5px 3px}.icono-terminal:before{width:5px;height:5px;position:absolute;top:50%;-webkit-transform:translateY(-50%) rotate(45deg);transform:translateY(-50%) rotate(45deg);left:3px;border-width:2px 2px 0 0;border-style:solid}.icono-terminal:after{position:absolute;width:5px;height:0;border-bottom:2px solid;right:6px;bottom:4px}.icono-paperClip{width:24px;height:18px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);margin:5px 0 11px 10px}.icono-paperClip:before{width:18px;height:6px;right:2px}.icono-paperClip:after{position:absolute;width:12px;height:10px;left:-12px;top:-2px;border-right:none;border-radius:16px 0 0 16px}.icono-market{width:32px;height:12px;border-top:none;margin:19px 1px 3px}.icono-market:before{width:6px;height:13px;position:absolute;top:-15px;left:-5px;border-radius:0 0 10px 10px;border-left:none;box-shadow:inset 0 0 0 32px,8px 0 0,16px 0 0,24px 0 0,32px 0 0}.icono-market:after{width:6px;height:6px;bottom:-2px}.icono-clock{width:26px;height:26px;border-radius:50%;margin:4px}.icono-clock:after,.icono-clock:before{top:35%;box-shadow:inset 0 0 0 32px;border-radius:2px}.icono-clock:before{width:2px;height:9px}.icono-clock:after{width:6px;height:2px;-webkit-transform-origin:left center;transform-origin:left center;-webkit-transform:rotate(45deg) translate(1px,2px);transform:rotate(45deg) translate(1px,2px)}[class*=icono-textAlign]{width:28px;height:22px;margin:6px 3px}[class*=icono-textAlign]:after,[class*=icono-textAlign]:before{position:absolute;height:2px;box-shadow:inset 0 0 0 32px,0 8px 0 0,0 16px 0 0;right:0}[class*=icono-textAlign]:before{width:28px;top:0}[class*=icono-textAlign]:after{width:18px;top:4px}[class*=icono-textAlign].icono-textAlignLeft:after,[class*=icono-textAlign].icono-textAlignLeft:before{left:0}[class*=icono-exclamation]{overflow:visible;width:30px;border-bottom:2px solid;border-radius:0 0 4px 4px;margin:26px 2px 6px}[class*=icono-exclamation]:before{position:absolute;width:26px;height:26px;left:1px;top:-14px;border-width:2px 0 0 2px;border-style:solid;border-radius:4px 0;-webkit-transform:rotate(45deg) skew(12deg,12deg);transform:rotate(45deg) skew(12deg,12deg)}[class*=icono-exclamation]:after{width:4px;height:3px;top:-14px;box-shadow:inset 0 0 0 32px,0 3px,0 8px}[class*=icono-exclamation][class*=Circle]{height:30px;margin:2px}[class*=icono-exclamation][class*=Circle]:before{display:none}[class*=icono-exclamation][class*=Circle]:after{box-shadow:inset 0 0 0 32px,0 3px,0 5px,0 10px;top:6px}.icono-frown:after{-webkit-transform:translateX(-50%) rotate(180deg);transform:translateX(-50%) rotate(180deg);-webkit-transform-origin:center 85%;transform-origin:center 85%}.icono-meh:after{top:0;width:12px;border-left-width:0;border-right-width:0;border-radius:0}.icono-indent,.icono-outdent{width:20px;height:16px;border-width:4px 0 4px 8px;border-style:solid;border-color:transparent;box-shadow:0 -2px,0 2px,inset 0 2px,inset 0 -2px;margin:9px 7px}.icono-indent:before,.icono-outdent:before{left:-8px;border:5px solid;border-top-color:transparent;border-bottom-color:transparent;border-right-width:0}.icono-outdent:before{border-left-width:0;border-right-width:5px}.icono-locationArrow{width:32px;height:32px;margin:1px}.icono-locationArrow:before{position:absolute;left:7px;top:16px;border-width:6px 0 6px 6px;border-style:solid;border-left-color:transparent;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.icono-locationArrow:after{position:absolute;top:10px;left:2px;border-width:10px;border-style:solid;border-bottom-color:transparent;border-left-color:transparent;-webkit-transform:skew(-30deg,-30deg);transform:skew(-30deg,-30deg)}.icono-comment:before,.icono-commentEmpty:before{-webkit-transform:rotate(-45deg);position:absolute}.icono-commentEmpty{width:30px;height:22px;border-radius:4px 4px 7px 7px;border-bottom-color:transparent;margin:5px 2px 7px}.icono-commentEmpty:before{width:6px;height:6px;border-width:0 0 2px 2px;border-style:solid;transform:rotate(-45deg);bottom:-4px;left:6px}.icono-commentEmpty:after{position:absolute;width:8px;height:2px;border-width:0 12px 0 6px;border-style:solid;bottom:0;left:0}.icono-comment{width:30px;height:20px;box-shadow:inset 0 0 0 32px;border-radius:4px;margin:5px 2px 9px}.icono-comment:before{width:8px;height:8px;box-shadow:inset 0 0 0 32px;transform:rotate(-45deg);bottom:-4px;left:6px}.icono-areaChart,.icono-barChart{width:30px;height:22px;margin:4px 0 8px 4px;overflow:hidden}.icono-areaChart{border-top-width:0;border-right-width:0;border-color:transparent;box-shadow:-2px 2px}.icono-areaChart:before{position:absolute;left:0;bottom:7px;border:6px solid transparent;border-bottom-color:currentColor;box-shadow:0 7px}.icono-areaChart:after{position:absolute;left:11px;bottom:4px;border-width:0 6px 13px;border-style:solid;border-color:transparent transparent currentColor;box-shadow:0 4px}.icono-barChart{border-top-width:0;border-right-width:0;border-color:transparent;box-shadow:-2px 2px}.icono-barChart:before{position:absolute;left:0;bottom:0;width:4px;height:15px;box-shadow:inset 0 -8px 0 0,6px 0,12px 7px,18px 5px}.icono-pieChart{width:0;height:0;border:15px solid;border-right-color:transparent;border-radius:50%;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);margin:2px}.icono-pieChart:before{position:absolute;width:0;height:0;left:-11px;top:-14px;border:14px solid;border-left-color:transparent;border-bottom-color:transparent;border-top-color:transparent;border-radius:50%}.icono-bookmark{width:0;height:0;border:9px solid;border-bottom-color:transparent;box-shadow:0 -4px;border-radius:3px 3px 0 0;margin:10px 8px 6px}.icono-bookmarkEmpty{width:18px;height:22px;border-bottom:none;border-radius:3px 3px 2px 2px;overflow:hidden;margin:6px 8px}.icono-bookmarkEmpty:before{position:absolute;width:12px;height:12px;bottom:0;left:0;border-right:none;border-bottom:none;-webkit-transform:rotate(45deg) translate(35%,35%);transform:rotate(45deg) translate(35%,35%)}.icono-filter{width:0;height:0;border:10px solid;border-bottom:none;border-left-color:transparent;border-right-color:transparent;padding:3px;box-shadow:inset 0 7px;margin:9px 4px}.icono-volume,.icono-volumeDecrease,.icono-volumeHigh,.icono-volumeIncrease,.icono-volumeLow,.icono-volumeMedium,.icono-volumeMute{width:0;height:0;border:7px solid;border-left:none;border-top-color:transparent;border-bottom-color:transparent;padding:6px 3px;box-shadow:inset 4px 0;margin:4px 10px 4px 11px}.icono-volumeHigh,.icono-volumeLow,.icono-volumeMedium{margin:4px 14px 4px 7px}.icono-volumeHigh:after,.icono-volumeHigh:before,.icono-volumeLow:before,.icono-volumeMedium:before{width:15px;height:15px;position:absolute;border-radius:50%;border-top-color:transparent;border-bottom-color:transparent;border-left-color:transparent;left:2px}.icono-volumeHigh,.icono-volumeMedium{margin:4px 16px 4px 5px}.icono-volumeHigh:before,.icono-volumeMedium:before{border-style:double;border-width:6px;left:-2px}.icono-volumeHigh{margin:4px 18px 4px 3px}.icono-volumeHigh:after{width:32px;height:32px;left:-7px}.icono-volumeDecrease,.icono-volumeIncrease,.icono-volumeMute{margin:4px 16px 4px 5px}.icono-volumeDecrease:after,.icono-volumeDecrease:before,.icono-volumeIncrease:after,.icono-volumeIncrease:before,.icono-volumeMute:after,.icono-volumeMute:before{box-shadow:inset 0 0 0 32px}.icono-volumeDecrease:before,.icono-volumeIncrease:before,.icono-volumeMute:before{width:10px;height:2px;left:17px}.icono-volumeIncrease:after,.icono-volumeMute:after{height:10px;width:2px;left:21px}.icono-volumeMute:after,.icono-volumeMute:before{-webkit-transform:translateY(-50%) rotate(45deg);transform:translateY(-50%) rotate(45deg)}.icono-tag{width:18px;height:24px;border-radius:6px 6px 4px 4px;border-top:none;transform:rotate(45deg);margin:5px 8px}.icono-tag:before{position:absolute;top:-4px;left:1px;width:10px;height:10px;border-width:2px 0 0 2px;border-style:solid;-webkit-transform:rotate(45deg);transform:rotate(45deg);border-radius:5px 0 0}.icono-tag:after{top:1px;width:3px;height:3px;border-radius:50%}.icono-calendar{width:32px;height:28px;border-width:4px 2px 2px;border-style:solid;border-radius:4px;margin:5px 1px 1px}.icono-calendar:before{position:absolute;width:4px;height:4px;top:3px;left:3px;box-shadow:inset 0 0 0 32px,6px 0,12px 0,18px 0,0 6px,6px 6px,12px 6px,18px 6px,0 12px,6px 12px,12px 12px,18px 12px}.icono-calendar:after{position:absolute;width:4px;height:8px;box-shadow:inset 0 0 0 32px,16px 0;border-radius:4px;top:-8px;left:4px}.icono-camera{width:32px;height:24px;border-radius:4px;margin:5px 1px}.icono-camera:before{width:10px;height:10px;border:1px solid transparent;box-shadow:inset 0 0 0 1px,0 0 0 2px;border-radius:50%}.icono-camera:after{position:absolute;width:4px;height:2px;right:2px;top:2px;box-shadow:inset 0 0 0 32px}.icono-piano{width:31px;height:22px;margin:6px 1px}.icono-piano:before{position:absolute;left:4px;top:0;width:1px;height:100%;box-shadow:-1px 0,3px 0,7px 0,11px 0,15px 0,19px 0}.icono-piano:after{position:absolute;width:3px;height:13px;left:4px;top:0;box-shadow:inset 1px 0,inset -1px 0,-2px 0,2px 0,10px 0,14px 0,18px 0}.icono-ruler{width:27px;height:12px;margin:11px 4px 11px 3px}.icono-ruler:before{position:absolute;width:1px;height:4px;box-shadow:inset 0 0 0 32px,6px 0,12px 0;left:5px;top:0}.icono-ruler:after{position:absolute;width:1px;height:2px;box-shadow:inset 0 0 0 32px,2px 0,6px 0,8px 0,12px 0,14px 0,18px 0,20px 0;left:1px;top:0}.icono-facebook{width:9px;height:26px;box-shadow:inset 2px 4px 0 0;border-left:3px solid;border-radius:5px 0 0;margin:4px 11px 4px 14px}.icono-facebook:before{position:absolute;top:9px;left:-6px;width:11px;height:0;border-top:4px solid;border-right:1px solid transparent}.icono-twitter{width:14px;height:23px;border-radius:0 0 0 8px;box-shadow:-6px 2px 0 0;margin:4px 7px 7px 13px}.icono-twitter:before{position:absolute;bottom:-2px;left:-6px;width:17px;height:6px;border-radius:0 0 0 8px;box-shadow:inset 4px -6px,0 -11px}.icono-twitter:after{position:absolute;width:6px;height:6px;box-shadow:inset 0 0 0 32px,13px 8px,13px 19px;border-radius:50%;left:-6px}.icono-gplus{width:10px;height:2px;box-shadow:inset 0 0 0 32px;margin:14px 4px 18px 20px}.icono-gplus:before{position:absolute;top:-5px;right:10px;content:"g"!important;font-family:georgia;font-size:32px;text-indent:0;line-height:0}.icono-gplus:after{width:2px;height:10px;box-shadow:inset 0 0 0 32px}.icono-linkedIn{width:5px;height:16px;box-shadow:inset 0 0 0 32px,8px 0;margin:12px 24px 6px 5px}.icono-linkedIn:before{position:absolute;width:5px;height:5px;box-shadow:inset 0 0 0 32px;top:-7px;left:0;border-radius:50%}.icono-linkedIn:after{position:absolute;width:12px;height:16px;border-right:1px solid;left:11px;bottom:0;border-radius:8px 5px 0 0/11px 5px 0 0;box-shadow:inset -4px 4px}.icono-instagram{width:26px;height:26px;box-shadow:inset 0 0 0 2px;border-radius:4px;margin:4px}.icono-instagram:before{width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 3px}.icono-instagram:after{position:absolute;width:5px;height:5px;border-radius:1px;right:3px;top:3px;box-shadow:0 0 0 2px,1px 1px 0 2px,-5px -1px 0 1px,-10px -1px 0 1px,-16px 1px 0 2px}.icono-flickr{width:24px;height:24px;overflow:hidden;border-radius:4px;margin:5px}.icono-flickr:after,.icono-flickr:before{width:7px;height:7px;border-radius:50%}.icono-flickr:before{left:4px;box-shadow:0 0 0 1px,0 -10px 0 6px,0 10px 0 6px,-4px 0 0 3px}.icono-flickr:after{right:4px;box-shadow:0 0 0 1px,0 -10px 0 6px,0 10px 0 6px,4px 0 0 3px}.icono-delicious{width:24px;height:24px;overflow:hidden;border-radius:4px;box-shadow:inset 0 0 0 2px;margin:5px}.icono-delicious:before{position:absolute;width:12px;height:12px;box-shadow:inset 0 0 0 32px,12px -12px 0 0;left:0;bottom:0}.icono-codepen{width:2px;height:10px;box-shadow:inset 0 0 0 32px,0 15px,-11px 7px,11px 7px;margin:4px 16px 20px}.icono-codepen:after,.icono-codepen:before{top:3px;width:11px;height:4px;position:absolute}.icono-codepen:before{right:2px;-webkit-transform:skew(0,-35deg) scaleY(.6);transform:skew(0,-35deg) scaleY(.6);box-shadow:inset 0 0 0 32px,0 13px,11px 26px,12px 39px}.icono-codepen:after{left:2px;-webkit-transform:skew(0,35deg) scaleY(.6);transform:skew(0,35deg) scaleY(.6);box-shadow:inset 0 0 0 32px,0 13px,-11px 26px,-12px 39px}.icono-blogger{width:24px;height:14px;border-radius:0 0 7px 7px;margin:14px 5px 6px}.icono-blogger,.icono-blogger:before{border-width:6px;border-style:solid}.icono-blogger:before{position:absolute;width:8px;height:2px;left:-6px;top:-15px;border-radius:6px 6px 0 0}.icono-disqus{width:31px;height:31px;box-shadow:inset 0 0 0 32px;border-radius:50%;margin:1px 1px 2px 2px}.icono-disqus:before{position:absolute;width:0;height:0;border:5px solid transparent;border-top:10px solid;-webkit-transform:rotate(50deg);transform:rotate(50deg);left:-5px;top:20px}.icono-dribbble{width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 2px;overflow:hidden;position:relative;background-image:radial-gradient(50% 100%,transparent 0,transparent 9px,currentColor 10px,currentColor 11px,transparent 12px);background-repeat:no-repeat;background-position:-8px center;-webkit-transform:rotate(-25deg);transform:rotate(-25deg);margin:4px}.icono-dribbble:after,.icono-dribbble:before{position:absolute;border-radius:50%;border:2px solid;width:40px;height:30px}.icono-dribbble:after{top:14px;left:-7px;width:32px}.icono-dribbble:before{left:-6px;top:-23px}.icono-creditCard{width:32px;height:24px;border-radius:3px;margin:5px 1px}.icono-creditCard:before{position:absolute;top:4px;width:100%;height:6px;box-shadow:inset 0 0 0 32px}.icono-creditCard:after{left:3px;bottom:3px;position:absolute;width:4px;height:2px;box-shadow:inset 0 0 0 32px,6px 0}.icono-cup{width:22px;height:16px;box-shadow:inset 0 0 0 32px;border-radius:0 0 5px 5px;margin:6px 6px 12px}.icono-cup:before{position:absolute;right:-3px;top:4px;width:5px;height:5px;border-radius:50%;box-shadow:0 0 0 2px}.icono-cup:after{bottom:-5px;width:26px;height:3px;border-radius:0 0 3px 3px;box-shadow:inset 0 0 0 32px}.icono-play{width:0;height:0;border-width:10px 0 10px 16px;border-style:solid;border-top-color:transparent;border-bottom-color:transparent;margin:7px 9px}.icono-pause{width:6px;height:20px;margin:7px 20px 7px 8px;box-shadow:inset 0 0 0 32px,12px 0 0 0}.icono-stop{width:0;height:0;border:10px solid;margin:7px}.icono-rewind{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.icono-forward,.icono-rewind{width:0;height:0;border:10px solid transparent;border-left:10px solid;margin:7px}.icono-forward:before,.icono-rewind:before{position:absolute;left:0;top:-10px;width:0;height:0;border:10px solid transparent;border-left:10px solid}.icono-next,.icono-previous{width:0;height:0;border:10px solid transparent;border-left:10px solid;border-right:none;margin:7px 14px 7px 10px;box-shadow:4px 0}.icono-previous{-webkit-transform:rotate(180deg);transform:rotate(180deg);margin:7px 10px 7px 14px}.icono-caretDown,.icono-caretDownCircle,.icono-caretDownSquare,.icono-caretLeft,.icono-caretLeftCircle,.icono-caretLeftSquare,.icono-caretRight,.icono-caretRightCircle,.icono-caretRightSquare,.icono-caretUp,.icono-caretUpCircle,.icono-caretUpSquare{width:12px;height:20px;margin:7px 11px}.icono-caretDown:after,.icono-caretDown:before,.icono-caretDownCircle:after,.icono-caretDownCircle:before,.icono-caretDownSquare:after,.icono-caretDownSquare:before,.icono-caretLeft:after,.icono-caretLeft:before,.icono-caretLeftCircle:after,.icono-caretLeftCircle:before,.icono-caretLeftSquare:after,.icono-caretLeftSquare:before,.icono-caretRight:after,.icono-caretRight:before,.icono-caretRightCircle:after,.icono-caretRightCircle:before,.icono-caretRightSquare:after,.icono-caretRightSquare:before,.icono-caretUp:after,.icono-caretUp:before,.icono-caretUpCircle:after,.icono-caretUpCircle:before,.icono-caretUpSquare:after,.icono-caretUpSquare:before{width:14px;height:2px;position:absolute;top:0;bottom:0;margin:auto 0;right:2px;box-shadow:inset 0 0 0 32px;-webkit-transform-origin:right;transform-origin:right}.icono-caretDown:before,.icono-caretDownCircle:before,.icono-caretDownSquare:before,.icono-caretLeft:before,.icono-caretLeftCircle:before,.icono-caretLeftSquare:before,.icono-caretRight:before,.icono-caretRightCircle:before,.icono-caretRightSquare:before,.icono-caretUp:before,.icono-caretUpCircle:before,.icono-caretUpSquare:before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.icono-caretDown:after,.icono-caretDownCircle:after,.icono-caretDownSquare:after,.icono-caretLeft:after,.icono-caretLeftCircle:after,.icono-caretLeftSquare:after,.icono-caretRight:after,.icono-caretRightCircle:after,.icono-caretRightSquare:after,.icono-caretUp:after,.icono-caretUpCircle:after,.icono-caretUpSquare:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.icono-caretLeft,.icono-caretLeftCircle,.icono-caretLeftSquare{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.icono-caretUp,.icono-caretUpCircle,.icono-caretUpSquare{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.icono-caretDown,.icono-caretDownCircle,.icono-caretDownSquare{-webkit-transform:rotate(90deg);transform:rotate(90deg)}[class*=icono-caret][class*=Circle]:after,[class*=icono-caret][class*=Circle]:before,[class*=icono-caret][class*=Square]:after,[class*=icono-caret][class*=Square]:before{width:11px;right:8px}.icono-downArrow,.icono-leftArrow,.icono-rightArrow,.icono-upArrow{width:16px;height:4px;margin:15px 9px;box-shadow:inset 0 0 0 2px;-webkit-transform:translateX(-3px);transform:translateX(-3px)}.icono-moon,.icono-sun{width:22px;height:22px;margin:6px}.icono-downArrow:before,.icono-leftArrow:before,.icono-rightArrow:before,.icono-upArrow:before{border-style:solid;border-width:8px 0 8px 8px;border-color:transparent;border-left-color:inherit;left:100%;right:auto}.icono-leftArrow{-webkit-transform:translateX(3px) rotate(180deg);transform:translateX(3px) rotate(180deg)}.icono-upArrow{-webkit-transform:translateY(3px) rotate(-90deg);transform:translateY(3px) rotate(-90deg)}.icono-downArrow{-webkit-transform:translateY(-3px) rotate(90deg);transform:translateY(-3px) rotate(90deg)}.icono-sun{border:2px solid;border-radius:50%;box-shadow:-15px 0 0 -9px,15px 0 0 -9px,0 -15px 0 -9px,0 15px 0 -9px,11px 11px 0 -9px,-11px -11px 0 -9px,11px -11px 0 -9px,-11px 11px 0 -9px}.icono-moon{border-radius:50%;overflow:hidden}.icono-moon:before{position:absolute;width:20px;height:20px;top:-2px;left:6px;border-radius:50%;box-shadow:0 0 0 32px}.icono-cart{width:22px;height:0;border-width:14px 6px 0 2px;border-style:solid;border-right-color:transparent;border-left-color:transparent;margin:9px 3px 11px 9px}.icono-cart:before{position:absolute;width:4px;height:4px;border-radius:50%;box-shadow:inset 0 0 0 32px,13px 0,-4px -20px 0 1px;top:2px;left:-3px}.icono-sitemap{width:24px;height:2px;box-shadow:0 -5px;margin:21px 5px 11px}.icono-sitemap:before{width:6px;height:6px;border-radius:2px;box-shadow:inset 0 0 0 32px,11px 0,-11px 0,0 -14px 0 1px}.icono-sitemap:after{width:2px;height:10px;box-shadow:0 -7px,11px -5px,-11px -5px}.icono-circle{width:22px;height:22px;border:2px solid;border-radius:50%;margin:6px}.icono-ellipsis{width:4px;height:4px;box-shadow:0 -8px 0,0 0 0 32px inset,0 8px 0;margin:15px}.icono-spinner{width:22px;height:22px;border-radius:50%;box-shadow:-16px 0 0 -9px,-11px -11px 0 -9px,0 -16px 0 -9px,11px -11px 0 -8px,16px 0 0 -7px,11px 11px 0 -7px,0 16px 0 -7px,-11px 11px 0 -7px;margin:7px}.icono-bluetooth{width:3px;height:26px;box-shadow:inset 0 0 0 32px;margin:4px 15px 4px 16px}.icono-bluetooth:after,.icono-bluetooth:before{position:absolute;width:18px;height:8px;border-width:3px 3px 3px 0;border-style:solid;border-top-color:transparent;top:2px;left:-13px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.icono-bluetooth:after{top:10px;-webkit-transform:rotate(45deg) rotateX(180deg);transform:rotate(45deg) rotateX(180deg)}[class*=icono-]{display:inline-block;vertical-align:middle;position:relative;font-style:normal;color:currentColor;text-align:left;text-indent:-9999px;direction:ltr}[class*=icono-]:after,[class*=icono-]:before{content:'';pointer-events:none}[class*=icono-][class*=Circle]{border-radius:50%;width:30px;height:30px;margin:2px}[class*=icono-][class*=Square]{border-radius:4px;width:30px;height:30px;margin:2px}[class*=icono-],[class*=icono-] *{box-sizing:border-box}

<span id="1.4">event.js</span>

  1. let userData = {};
  2. let delUser = {};
  3. let editUser = {};
  4. /**
  5.  * 分页跳转的方法
  6.  * @param e: 被点击元素的上级元素
  7.  */
  8. document.querySelector('.paging').addEventListener('click', function (e) {
  9.     e.preventDefault();
  10.     console.log(e, e.target, this);
  11.     if (e.target === this) return;
  12.     // window.location.href = e.target.href;
  13.     myAjax(e.target.href.split('?')[1].split('=')[1])
  14. })
  16. /**
  17.  * 打开编辑用户的弹出窗的方法
  18.  * @param sid: 被编辑的用户的id
  19.  */
  20. function edit(sid) {
  21.     editUser = userData.data.filter(item => parseInt(item.sid) === parseInt(sid))[0];
  22.     document.querySelector('.masking').style.display = 'block';
  23.     document.querySelector('.edit-confirm').style.display = 'block';
  25.     console.log(editUser)
  26.     const form = document.querySelector('.edit-form');
  27.     let html = `<form>
  28.                       <label for="name">姓名: </label>
  29.                       <input type="text" name="name" id="name" value="${editUser.name}">
  30.                       <label for="${editUser.gender}">性别: </label>
  31.                       <div>`;
  32.     if (editUser.gender === 'male') {
  33.         html += `<input type="radio" name="gender" value="male" id="male" checked /><label for="male">男</label>
  34.                  <input type="radio" name="gender" value="female" id="female" /><label for="female">女</label>`
  35.     } else {
  36.         html += `<input type="radio" name="gender" value="male" id="male" /><label for="male">男</label>
  37.                  <input type="radio" name="gender" value="female" id="female" checked /><label for="female">女</label>`
  38.     }
  39.     html += `</div>
  40.                   <label for="age">年龄: </label>
  41. <!--              <input type="text" name="age" id="age" value="${editUser.age}">-->
  42.                   <input type="number" name="age" id="age" value="${editUser.age}" min="0" max="100" onkeypress="return (/[\\d]/.test(String.fromCharCode(event.keyCode)))" style="ime-mode: disabled">
  43.                   <label for="birthday">生日: </label>
  44.                   <input type="date" name="birthday" id="birthday" value="${editUser.birthday}">
  45.                   <label for="salary">工资: </label>
  46.                   <input type="text" name="salary" id="salary" value="${editUser.salary}" min="0">
  47.               </form>`;
  48.     form.innerHTML = html;
  49. }
  51. /**
  52.  * 关闭编辑用户的弹出窗的方法
  53.  */
  54. function editMaskingClose() {
  55.     document.querySelector('.masking').style.display = 'none';
  56.     document.querySelector('.edit-confirm').style.display = 'none';
  57. }
  59. /**
  60.  * 编辑的方法
  61.  * @param sid
  62.  */
  63. function editMaskingConfirm() {
  64.     const form = document.forms[0];
  65.     console.log(form.salary.value, parseFloat(form.salary.value));
  66.     if (/^[0-9]+.?[0-9]*$/.test(form.salary.value)) {
  67.         const xhr = new XMLHttpRequest();
  69.         const formData = new FormData();
  70.         formData.append('handle', 'update');
  71.         formData.append('sid', editUser.sid);
  72.         formData.append('name', form.name.value);
  73.         formData.append('gender', form.gender.value);
  74.         formData.append('age', parseInt(form.age.value));
  75.         formData.append('birthday', form.birthday.value);
  76.         formData.append('salary', parseFloat(form.salary.value));
  78.         xhr.open('POST', './Controller/handle.php?handle=update');
  79.         xhr.onload = (xhr) => {
  80.             const data = JSON.parse(xhr.target.response);
  81.             alert(data.code + ':' + data.message);
  82.             editMaskingClose();
  83.             if (data.code === 0) {
  84.                 myAjax(parseInt(userData.page));
  85.             }
  86.         }
  88.         xhr.send(formData);
  89.     } else {
  90.         alert('请输入正确的内容: 数字,小数');
  91.         form.salary.focus();
  92.     }
  93. }
  95. /**
  96.  * 打开是否删除用户的提示
  97.  * @param sid: 要删除的用户的id
  98.  */
  99. function del(sid) {
  100.     delUser = userData.data.filter(item => parseInt(item.sid) === parseInt(sid))[0];
  101.     document.querySelector('.masking').style.display = 'block';
  102.     document.querySelector('.del-confirm').style.display = 'block';
  103. }
  105. /**
  106.  * 关闭是否删除用户的提示
  107.  */
  108. function delMaskingClose() {
  109.     document.querySelector('.masking').style.display = 'none';
  110.     document.querySelector('.del-confirm').style.display = 'none';
  111. }
  113. /**
  114.  * 确定删除用户的方法
  115.  */
  116. function delMaskingConfirm() {
  117.     const xhr = new XMLHttpRequest();
  119.     const formData = new FormData();
  120.     formData.append('handle', 'delete');
  121.     formData.append('sid', delUser.sid);
  123.     xhr.open('POST', './Controller/handle.php?handle=delete');
  124.     xhr.onload = (xhr) => {
  125.         const data = JSON.parse(xhr.target.response);
  126.         alert(data.code + ':' + data.message);
  127.         delMaskingClose();
  128.         if (data.code === 0) {
  129.             myAjax(parseInt(userData.page));
  130.         }
  131.     }
  133.     xhr.send(formData);
  134. }
  137. /**
  138.  * 页面完成初始化后,自动调用的方法
  139.  */
  140. window.onload = function () {
  141.     myAjax();
  142. };
  144. /**
  145.  * 获取用户数据的方法
  146.  * @param page:当前页
  147.  */
  148. function myAjax(page = 1) {
  149.     const xhr = new XMLHttpRequest();
  150.     xhr.open('GET', './Controller/handle.php?handle=select&p=' + page);
  151.     xhr.onload = (xhr) => {
  152.         // console.log(JSON.parse(xhr.target.response));
  153.         userData = JSON.parse(xhr.target.response);
  154.         let tbodyDom = document.querySelector('.tbody');
  155.         tbodyDom.innerHTML = '';
  156.         const flag = new DocumentFragment();
  157.         for (let i = 0; i < userData.data.length; i++) {
  158.             const tr = document.createElement('tr');
  159.             tr.innerHTML = "<td>" + userData.data[i].sid + "</td>" +
  160.                 "<td>" + userData.data[i].name + "</td>" +
  161.                 "<td>" + userData.data[i].gender + "</td>" +
  162.                 "<td>" + userData.data[i].age + "</td>" +
  163.                 "<td>" + userData.data[i].birthday + "</td>" +
  164.                 "<td>" + userData.data[i].salary + "</td>" +
  165.                 "<td>" + userData.data[i].create_d + "</td>" +
  166.                 "<td>" + userData.data[i].update_d + "</td>" +
  167.                 "<td><button onclick='edit(" + userData.data[i].sid + ")'>编辑</button>" +
  168.                 "<button onclick='del(" + userData.data[i].sid + ")'>删除</button></td>";
  169.             flag.appendChild(tr);
  170.         }
  171.         tbodyDom.appendChild(flag);
  172.         paging(parseInt(userData.page), parseInt(userData.countPage));
  173.     }
  174.     xhr.send();
  175. }
  177. /**
  178.  * js动态添加分页组件的方法
  179.  * @param page:当前页
  180.  * @param countPage:总页
  181.  */
  182. function paging(page, countPage) {
  183.     let paging = document.querySelector('.paging');
  184.     paging.innerHTML = '';
  185.     const flag = new DocumentFragment();
  187.     let a = ac(1, '首页');
  188.     flag.appendChild(a);
  189.     a = ac(page - 1 <= 0 ? 1 : page - 1, '上一页');
  190.     flag.appendChild(a);
  192.     /*if (page - 5 === 0  && page + 5 <= countPage){
  194.     }else
  195.     */
  196.     if (page >= 7) {
  197.         a = document.createElement('a');
  198.         a.textContent = '...';
  199.         a.style.pointerEvents = 'none';
  200.         a.onclick = () => {return false};
  201.         flag.appendChild(a);
  203.         const p = page + 5 < countPage ? page + 5 : countPage;
  204.         for (let i = page - 5; i <= p; i++) {
  205.             const a = document.createElement('a');
  206.             a.textContent = i;
  207.             a.href = '/index.php?p=' + i;
  208.             a.className = i === page ? 'active' : '';
  209.             flag.appendChild(a);
  210.         }
  211.         if (page + 5 <= countPage) {
  212.             a = document.createElement('a');
  213.             a.textContent = '...';
  214.             a.style.pointerEvents = 'none';
  215.             a.onclick = () => {return false};
  216.             flag.appendChild(a);
  217.         }
  218.     } else {
  219.         for (let i = 1; i <= 8; i++) {
  220.             a = document.createElement('a');
  221.             a.textContent = i;
  222.             a.href = '/index.php?p=' + i;
  223.             a.className = i === page ? 'active' : '';
  224.             flag.appendChild(a);
  225.         }
  226.         a = document.createElement('a');
  227.         a.textContent = '...';
  228.         a.style.pointerEvents = 'none';
  229.         a.onclick = () => {return false};
  230.         flag.appendChild(a);
  231.     }
  233.     a = ac(page + 1 > countPage ? countPage : page + 1, '下一页');
  234.     flag.appendChild(a);
  235.     a = ac(countPage, '尾页');
  236.     flag.appendChild(a);
  238.     paging.appendChild(flag);
  239. }
  241. /**
  242.  * 生成分页按钮的方法
  243.  * @param p: 分页按钮的url参数
  244.  * @param text: 分页按钮的内容
  245.  */
  246. function ac(p, text) {
  247.     const a = document.createElement('a');
  248.     a.textContent = text;
  249.     a.href = '/index.php?p=' + p;
  250.     return a;
  251. }

<span id="1.5">style.css</span>

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5.     color: #555555;
  6. }
  8. body {
  9.     display: flex;
  10.     flex-direction: column;
  11.     align-items: center;
  12. }
  14. /*禁掉input[type=number]的箭头*/
  15. input::-webkit-outer-spin-button,
  16. input::-webkit-inner-spin-button {
  17.     -webkit-appearance: none;
  18. }
  19. input[type="number"] {
  20.     -moz-appearance: textfield;
  21. }
  23. /*表格样式*/
  24. table {
  25.     width: 90%;
  26.     border: 1px solid;
  27.     border-collapse: collapse;
  28.     text-align: center;
  29. }
  31. table caption {
  32.     font-size: 1.2rem;
  33.     margin: 10px;
  34. }
  35. table td,
  36. table th {
  37.     border: 1px solid;
  38.     padding: 5px;
  39. }
  41. table tr:hover {
  42.     background-color: #eeeeee;
  43. }
  45. table thead tr:only-of-type {
  46.     background-color: lightcyan;
  47. }
  49. table button {
  50.     width: 56px;
  51.     height: 26px;
  52. }
  53. table button:last-of-type {
  54.     color: red;
  55. }
  56. table button {
  57.     cursor: pointer;
  58.     margin: 0 3px;
  59. }
  60. /*分页条样式*/
  61. body > p {
  62.     display: flex;
  63. }
  65. p > a {
  66.     text-decoration: none;
  67.     color: #555555;
  68.     border: 1px solid #888888;
  69.     padding: 5px 10px;
  70.     margin: 10px 2px;
  71. }
  73. .active {
  74.     background-color: seagreen;
  75.     color: white;
  76.     border: 1px solid seagreen;
  77. }
  79. .paging {
  80.     display: flex;
  81.     margin-top: 2em;
  82. }
  83. .paging > a {
  84.     text-decoration: none;
  85.     color: #555555;
  86.     border: 1px solid #888888;
  87.     padding: 5px 10px;
  88.     margin: 10px 2px;
  89. }
  90. .masking {
  91.     position: fixed;
  92.     top: 0;
  93.     right: 0;
  94.     bottom: 0;
  95.     left: 0;
  96.     background-color: rgba(0, 0, 0, .5);
  97.     display: none;
  98. }
  99. .masking .del-confirm {
  100.     width: 400px;
  101.     height: 300px;
  102.     background-color: #f4eded;
  103.     border-radius: 1em;
  104.     position: absolute;
  105.     margin: auto;
  106.     top: 0;
  107.     right: 0;
  108.     bottom: 0;
  109.     left: 0;
  110.     display: none;
  111. }
  112. .masking .edit-confirm {
  113.     width: 600px;
  114.     height: 400px;
  115.     background-color: #f4eded;
  116.     border-radius: 1em;
  117.     position: absolute;
  118.     margin: auto;
  119.     top: 0;
  120.     right: 0;
  121.     bottom: 0;
  122.     left: 0;
  123.     display: none;
  124. }
  125. .masking header,
  126. .masking footer {
  127.     display: flex;
  128.     justify-content: space-between;
  129.     align-items: center;
  130.     padding: 8px 16px;
  131.     border-bottom: 1px solid #3a3a3a;
  132. }
  133. .masking header button,
  134. .masking footer button {
  135.     background-color: transparent;
  136.     border: none;
  137.     height: 34px;
  138.     width: 50px;
  139.     cursor: pointer;
  140. }
  141. .masking masking-body {
  142.     height: calc(100% - 100px);
  143.     display: block;
  144.     padding: 16px;
  145. }
  146. .masking footer {
  147.     justify-content: center;
  148.     border-top: 1px solid #3a3a3a;
  149. }
  150. .masking footer button {
  151.     border: 1px solid #0d8aa5;
  152.     margin: 0 32px;
  153. }
  155. .masking .edit-confirm form {
  156.     display: grid;
  157.     grid-template-columns: 4em 1fr;
  158.     grid-template-rows: repeat(5, 2em);
  159.     gap: 1em 0;
  160. }
  161. .masking .edit-confirm form > label {
  162.     place-self: center;
  163. }
  165. .masking .edit-confirm form > input,
  166. .masking .edit-confirm form > div {
  167.     padding: 0 .5em;
  168.     line-height: 2em;
  169. }

<span id="1.6">index.php</span>

  1. <?php
  2. //require './Controller/handle.php';
  3. ?>
  4. <!DOCTYPE html>
  5. <html lang="en">
  7.     <head>
  8.         <meta charset="UTF-8">
  9.         <title>分页</title>
  10.         <link rel="stylesheet" href="./style.css">
  11.         <link rel="stylesheet" href="./pure-css3-icons/icono.min.css">
  12.     </head>
  14.     <body>
  15.         <table>
  16.             <caption>信息管理</caption>
  17.             <thead>
  18.             <tr>
  19.                 <th>序号</th>
  20.                 <th>姓名</th>
  21.                 <th>性别</th>
  22.                 <th>年龄</th>
  23.                 <th>生日</th>
  24.                 <th>工资</th>
  25.                 <th>添加时间</th>
  26.                 <th>修改时间</th>
  27.                 <th>操作</th>
  28.             </tr>
  29.             </thead>
  30.             <tbody class="tbody"></tbody>
  31.         </table>
  32.         <div class="paging"></div>
  34.         <div class="masking">
  35.             <div class="del-confirm">
  36.                 <header>
  37.                     <h3>警告</h3>
  38.                     <button onclick="delMaskingClose()"><i class="icono-cross"></i></button>
  39.                 </header>
  40.                 <masking-body>
  41.                     确定删除
  42.                 </masking-body>
  43.                 <footer>
  44.                     <button onclick="delMaskingClose()">取消</button>
  45.                     <button onclick="delMaskingConfirm()">确定</button>
  46.                 </footer>
  47.             </div>
  48.             <div class="edit-confirm">
  49.                 <header>
  50.                     <h3>编辑</h3>
  51.                     <button onclick="editMaskingClose()"><i class="icono-cross"></i></button>
  52.                 </header>
  53.                 <masking-body class="edit-form">
  54.                 </masking-body>
  55.                 <footer>
  56.                     <button onclick="editMaskingClose()">取消</button>
  57.                     <button onclick="editMaskingConfirm()">确定</button>
  58.                 </footer>
  59.             </div>
  60.         </div>
  61.         <script src="./event.js"></script>
  62.     </body>
  64. </html>

<span id="1.7">数据表</span>

  1. /*
  2. Navicat MySQL Data Transfer
  4. Source Server         : php_test
  5. Source Server Version : 50726
  6. Source Host           : localhost:3306
  7. Source Database       : phpedu
  9. Target Server Type    : MYSQL
  10. Target Server Version : 50726
  11. File Encoding         : 65001
  13. Date: 2021-02-27 16:11:15
  14. */
  16. SET FOREIGN_KEY_CHECKS=0;
  18. -- ----------------------------
  19. -- Table structure for staffs
  20. -- ----------------------------
  21. DROP TABLE IF EXISTS `staffs`;
  22. CREATE TABLE `staffs` (
  23.   `sid` int(10) unsigned NOT NULL AUTO_INCREMENT,
  24.   `name` varchar(150) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '姓名',
  25.   `gender` enum('male','female') COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '性别',
  26.   `age` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '年龄',
  27.   `birthday` date NOT NULL COMMENT '生日',
  28.   `salary` float(10,2) unsigned NOT NULL DEFAULT '3000.00' COMMENT '工资',
  29.   `create_d` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建日期',
  30.   `update_d` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新日期',
  31.   PRIMARY KEY (`sid`)
  32. ) ENGINE=InnoDB AUTO_INCREMENT=199 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
  34. -- ----------------------------
  35. -- Records of staffs
  36. -- ----------------------------
  37. INSERT INTO `staffs` VALUES ('3', 'wanger', 'female', '29', '1992-01-01', '9000.00', '2021-02-25 14:33:00', '2021-02-25 14:40:21');
  38. INSERT INTO `staffs` VALUES ('4', '张三1', 'male', '30', '1991-03-01', '9000.00', '2021-02-25 14:33:00', '2021-02-25 15:29:20');
  39. INSERT INTO `staffs` VALUES ('5', '张三2', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:33:00', '2021-02-25 14:40:21');
  40. INSERT INTO `staffs` VALUES ('6', '张三3', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:33:00', '2021-02-25 14:40:21');
  41. INSERT INTO `staffs` VALUES ('7', '张三4', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:33:00', '2021-02-25 14:40:21');
  42. INSERT INTO `staffs` VALUES ('8', '张三5', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:33:00', '2021-02-25 14:40:21');
  43. INSERT INTO `staffs` VALUES ('9', '张三6', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:33:00', '2021-02-25 14:40:21');
  44. INSERT INTO `staffs` VALUES ('10', '张三7', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:33:00', '2021-02-27 15:34:10');
  45. INSERT INTO `staffs` VALUES ('11', '张三.131', 'male', '30', '1097-01-01', '1900111.50', '2021-02-25 14:34:56', '2021-02-27 15:41:40');
  46. INSERT INTO `staffs` VALUES ('13', 'wanger', 'female', '29', '1992-01-01', '12141.00', '2021-02-25 14:34:56', '2021-02-27 15:35:06');
  47. INSERT INTO `staffs` VALUES ('14', '张三1', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:34:56', '2021-02-25 14:40:21');
  48. INSERT INTO `staffs` VALUES ('15', '张三2', 'male', '30', '1991-01-01', '242343.98', '2021-02-25 14:34:56', '2021-02-27 15:46:02');
  49. INSERT INTO `staffs` VALUES ('16', '张三3', 'male', '30', '1991-01-01', '9000.90', '2021-02-25 14:34:56', '2021-02-27 15:46:08');
  50. INSERT INTO `staffs` VALUES ('17', '张三4', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:34:56', '2021-02-25 14:40:21');
  51. INSERT INTO `staffs` VALUES ('18', '张三5', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:34:56', '2021-02-25 14:40:21');
  52. INSERT INTO `staffs` VALUES ('19', '张三6', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:34:56', '2021-02-25 14:40:21');
  53. INSERT INTO `staffs` VALUES ('20', '张三7', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:34:56', '2021-02-25 14:40:21');
  54. INSERT INTO `staffs` VALUES ('26', '张三', 'male', '30', '1991-01-01', '19000.00', '2021-02-25 14:35:26', '2021-02-25 14:41:10');
  55. INSERT INTO `staffs` VALUES ('27', '李四', 'male', '30', '1991-01-02', '9000.00', '2021-02-25 14:35:26', '2021-02-25 14:40:21');
  56. INSERT INTO `staffs` VALUES ('28', 'wanger', 'female', '29', '1992-01-01', '9000.00', '2021-02-25 14:35:26', '2021-02-25 14:40:21');
  57. INSERT INTO `staffs` VALUES ('29', '张三1', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:26', '2021-02-25 14:40:21');
  58. INSERT INTO `staffs` VALUES ('30', '张三2', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:26', '2021-02-25 14:40:21');
  59. INSERT INTO `staffs` VALUES ('31', '张三3', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:26', '2021-02-25 14:40:21');
  60. INSERT INTO `staffs` VALUES ('32', '张三4', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:26', '2021-02-25 14:40:21');
  61. INSERT INTO `staffs` VALUES ('33', '张三5', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:26', '2021-02-25 14:40:21');
  62. INSERT INTO `staffs` VALUES ('34', '张三6', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:26', '2021-02-25 14:40:21');
  63. INSERT INTO `staffs` VALUES ('35', '张三7', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:26', '2021-02-25 14:40:21');
  64. INSERT INTO `staffs` VALUES ('36', '张三', 'male', '30', '1991-01-01', '19000.00', '2021-02-25 14:35:26', '2021-02-25 14:41:10');
  65. INSERT INTO `staffs` VALUES ('37', '李四', 'male', '30', '1991-01-02', '9000.00', '2021-02-25 14:35:26', '2021-02-25 14:40:21');
  66. INSERT INTO `staffs` VALUES ('38', 'wanger', 'female', '29', '1992-01-01', '9000.00', '2021-02-25 14:35:26', '2021-02-25 14:40:21');
  67. INSERT INTO `staffs` VALUES ('39', '张三1', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:26', '2021-02-25 14:40:21');
  68. INSERT INTO `staffs` VALUES ('40', '张三2', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:26', '2021-02-25 14:40:21');
  69. INSERT INTO `staffs` VALUES ('41', '张三3', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:26', '2021-02-25 14:40:21');
  70. INSERT INTO `staffs` VALUES ('42', '张三4', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:26', '2021-02-25 14:40:21');
  71. INSERT INTO `staffs` VALUES ('43', '张三5', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:26', '2021-02-25 14:40:21');
  72. INSERT INTO `staffs` VALUES ('44', '张三6', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:26', '2021-02-25 14:40:21');
  73. INSERT INTO `staffs` VALUES ('45', '张三7', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:26', '2021-02-25 14:40:21');
  74. INSERT INTO `staffs` VALUES ('57', '张三', 'male', '30', '1991-01-01', '19000.00', '2021-02-25 14:35:29', '2021-02-25 14:41:10');
  75. INSERT INTO `staffs` VALUES ('58', '李四', 'male', '30', '1991-01-02', '9000.00', '2021-02-25 14:35:29', '2021-02-25 14:40:21');
  76. INSERT INTO `staffs` VALUES ('59', 'wanger', 'female', '29', '1992-01-01', '9000.00', '2021-02-25 14:35:29', '2021-02-25 14:40:21');
  77. INSERT INTO `staffs` VALUES ('60', '张三1', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:29', '2021-02-25 14:40:21');
  78. INSERT INTO `staffs` VALUES ('61', '张三2', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:29', '2021-02-25 14:40:21');
  79. INSERT INTO `staffs` VALUES ('62', '张三3', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:29', '2021-02-25 14:40:21');
  80. INSERT INTO `staffs` VALUES ('63', '张三4', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:29', '2021-02-25 14:40:21');
  81. INSERT INTO `staffs` VALUES ('64', '张三5', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:29', '2021-02-25 14:40:21');
  82. INSERT INTO `staffs` VALUES ('65', '张三6', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:29', '2021-02-25 14:40:21');
  83. INSERT INTO `staffs` VALUES ('66', '张三7', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:29', '2021-02-25 14:40:21');
  84. INSERT INTO `staffs` VALUES ('67', '张三', 'male', '30', '1991-01-01', '19000.00', '2021-02-25 14:35:29', '2021-02-25 14:41:10');
  85. INSERT INTO `staffs` VALUES ('68', '李四', 'male', '30', '1991-01-02', '9000.00', '2021-02-25 14:35:29', '2021-02-25 14:40:21');
  86. INSERT INTO `staffs` VALUES ('69', 'wanger', 'female', '29', '1992-01-01', '9000.00', '2021-02-25 14:35:29', '2021-02-25 14:40:21');
  87. INSERT INTO `staffs` VALUES ('70', '张三1', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:29', '2021-02-25 14:40:21');
  88. INSERT INTO `staffs` VALUES ('71', '张三2', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:29', '2021-02-25 14:40:21');
  89. INSERT INTO `staffs` VALUES ('72', '张三3', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:29', '2021-02-25 14:40:21');
  90. INSERT INTO `staffs` VALUES ('73', '张三4', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:29', '2021-02-25 14:40:21');
  91. INSERT INTO `staffs` VALUES ('74', '张三5', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:29', '2021-02-25 14:40:21');
  92. INSERT INTO `staffs` VALUES ('75', '张三6', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:29', '2021-02-25 14:40:21');
  93. INSERT INTO `staffs` VALUES ('76', '张三7', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:29', '2021-02-25 14:40:21');
  94. INSERT INTO `staffs` VALUES ('77', '张三', 'male', '30', '1991-01-01', '19000.00', '2021-02-25 14:35:29', '2021-02-25 14:41:10');
  95. INSERT INTO `staffs` VALUES ('78', '李四', 'male', '30', '1991-01-02', '9000.00', '2021-02-25 14:35:29', '2021-02-25 14:40:21');
  96. INSERT INTO `staffs` VALUES ('79', 'wanger', 'female', '29', '1992-01-01', '9000.00', '2021-02-25 14:35:29', '2021-02-25 14:40:21');
  97. INSERT INTO `staffs` VALUES ('80', '张三1', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:29', '2021-02-25 14:40:21');
  98. INSERT INTO `staffs` VALUES ('81', '张三2', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:29', '2021-02-25 14:40:21');
  99. INSERT INTO `staffs` VALUES ('82', '张三3', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:29', '2021-02-25 14:40:21');
  100. INSERT INTO `staffs` VALUES ('83', '张三4', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:29', '2021-02-25 14:40:21');
  101. INSERT INTO `staffs` VALUES ('84', '张三5', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:29', '2021-02-25 14:40:21');
  102. INSERT INTO `staffs` VALUES ('85', '张三6', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:29', '2021-02-25 14:40:21');
  103. INSERT INTO `staffs` VALUES ('86', '张三7', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:29', '2021-02-25 14:40:21');
  104. INSERT INTO `staffs` VALUES ('87', '张三', 'male', '30', '1991-01-01', '19000.00', '2021-02-25 14:35:29', '2021-02-25 14:41:10');
  105. INSERT INTO `staffs` VALUES ('88', '李四', 'male', '30', '1991-01-02', '9000.00', '2021-02-25 14:35:29', '2021-02-25 14:40:21');
  106. INSERT INTO `staffs` VALUES ('89', 'wanger', 'female', '29', '1992-01-01', '9000.00', '2021-02-25 14:35:29', '2021-02-25 14:40:21');
  107. INSERT INTO `staffs` VALUES ('90', '张三1', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:29', '2021-02-25 14:40:21');
  108. INSERT INTO `staffs` VALUES ('91', '张三2', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:29', '2021-02-25 14:40:21');
  109. INSERT INTO `staffs` VALUES ('92', '张三3', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:29', '2021-02-25 14:40:21');
  110. INSERT INTO `staffs` VALUES ('93', '张三4', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:29', '2021-02-25 14:40:21');
  111. INSERT INTO `staffs` VALUES ('94', '张三5', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:29', '2021-02-25 14:40:21');
  112. INSERT INTO `staffs` VALUES ('95', '张三6', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:29', '2021-02-25 14:40:21');
  113. INSERT INTO `staffs` VALUES ('96', '张三7', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:29', '2021-02-25 14:40:21');
  114. INSERT INTO `staffs` VALUES ('120', '张三', 'male', '30', '1991-01-01', '19000.00', '2021-02-25 14:35:31', '2021-02-25 14:41:10');
  115. INSERT INTO `staffs` VALUES ('121', '李四', 'male', '30', '1991-01-02', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  116. INSERT INTO `staffs` VALUES ('122', 'wanger', 'female', '29', '1992-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  117. INSERT INTO `staffs` VALUES ('123', '张三1', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  118. INSERT INTO `staffs` VALUES ('124', '张三2', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  119. INSERT INTO `staffs` VALUES ('125', '张三3', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  120. INSERT INTO `staffs` VALUES ('126', '张三4', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  121. INSERT INTO `staffs` VALUES ('127', '张三5', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  122. INSERT INTO `staffs` VALUES ('128', '张三6', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  123. INSERT INTO `staffs` VALUES ('129', '张三7', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  124. INSERT INTO `staffs` VALUES ('130', '张三', 'male', '30', '1991-01-01', '19000.00', '2021-02-25 14:35:31', '2021-02-25 14:41:10');
  125. INSERT INTO `staffs` VALUES ('131', '李四', 'male', '30', '1991-01-02', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  126. INSERT INTO `staffs` VALUES ('132', 'wanger', 'female', '29', '1992-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  127. INSERT INTO `staffs` VALUES ('133', '张三1', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  128. INSERT INTO `staffs` VALUES ('134', '张三2', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  129. INSERT INTO `staffs` VALUES ('135', '张三3', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  130. INSERT INTO `staffs` VALUES ('136', '张三4', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  131. INSERT INTO `staffs` VALUES ('137', '张三5', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  132. INSERT INTO `staffs` VALUES ('138', '张三6', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  133. INSERT INTO `staffs` VALUES ('139', '张三7', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  134. INSERT INTO `staffs` VALUES ('140', '张三', 'male', '30', '1991-01-01', '19000.00', '2021-02-25 14:35:31', '2021-02-25 14:41:10');
  135. INSERT INTO `staffs` VALUES ('141', '李四', 'male', '30', '1991-01-02', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  136. INSERT INTO `staffs` VALUES ('142', 'wanger', 'female', '29', '1992-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  137. INSERT INTO `staffs` VALUES ('143', '张三1', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  138. INSERT INTO `staffs` VALUES ('144', '张三2', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  139. INSERT INTO `staffs` VALUES ('145', '张三3', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  140. INSERT INTO `staffs` VALUES ('146', '张三4', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  141. INSERT INTO `staffs` VALUES ('147', '张三5', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  142. INSERT INTO `staffs` VALUES ('148', '张三6', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  143. INSERT INTO `staffs` VALUES ('149', '张三7', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  144. INSERT INTO `staffs` VALUES ('150', '张三', 'male', '30', '1991-01-01', '19000.00', '2021-02-25 14:35:31', '2021-02-25 14:41:10');
  145. INSERT INTO `staffs` VALUES ('151', '李四', 'male', '30', '1991-01-02', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  146. INSERT INTO `staffs` VALUES ('152', 'wanger', 'female', '29', '1992-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  147. INSERT INTO `staffs` VALUES ('153', '张三1', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  148. INSERT INTO `staffs` VALUES ('154', '张三2', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  149. INSERT INTO `staffs` VALUES ('155', '张三3', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  150. INSERT INTO `staffs` VALUES ('156', '张三4', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  151. INSERT INTO `staffs` VALUES ('157', '张三5', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  152. INSERT INTO `staffs` VALUES ('158', '张三6', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  153. INSERT INTO `staffs` VALUES ('159', '张三7', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  154. INSERT INTO `staffs` VALUES ('160', '张三', 'male', '30', '1991-01-01', '19000.00', '2021-02-25 14:35:31', '2021-02-25 14:41:10');
  155. INSERT INTO `staffs` VALUES ('161', '李四', 'male', '30', '1991-01-02', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  156. INSERT INTO `staffs` VALUES ('162', 'wanger', 'female', '29', '1992-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  157. INSERT INTO `staffs` VALUES ('163', '张三1', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  158. INSERT INTO `staffs` VALUES ('164', '张三2', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  159. INSERT INTO `staffs` VALUES ('165', '张三3', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  160. INSERT INTO `staffs` VALUES ('166', '张三4', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  161. INSERT INTO `staffs` VALUES ('167', '张三5', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  162. INSERT INTO `staffs` VALUES ('168', '张三6', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  163. INSERT INTO `staffs` VALUES ('169', '张三7', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  164. INSERT INTO `staffs` VALUES ('170', '张三', 'male', '30', '1991-01-01', '19000.00', '2021-02-25 14:35:31', '2021-02-25 14:41:10');
  165. INSERT INTO `staffs` VALUES ('171', '李四', 'male', '30', '1991-01-02', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  166. INSERT INTO `staffs` VALUES ('172', 'wanger', 'female', '29', '1992-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  167. INSERT INTO `staffs` VALUES ('173', '张三1', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  168. INSERT INTO `staffs` VALUES ('174', '张三2', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  169. INSERT INTO `staffs` VALUES ('175', '张三3', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  170. INSERT INTO `staffs` VALUES ('176', '张三4', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  171. INSERT INTO `staffs` VALUES ('177', '张三5', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  172. INSERT INTO `staffs` VALUES ('178', '张三6', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  173. INSERT INTO `staffs` VALUES ('179', '张三7', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  174. INSERT INTO `staffs` VALUES ('180', '张三', 'male', '30', '1991-01-01', '19000.00', '2021-02-25 14:35:31', '2021-02-25 14:41:10');
  175. INSERT INTO `staffs` VALUES ('181', '李四', 'male', '30', '1991-01-02', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  176. INSERT INTO `staffs` VALUES ('182', 'wanger', 'female', '29', '1992-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  177. INSERT INTO `staffs` VALUES ('183', '张三1', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  178. INSERT INTO `staffs` VALUES ('184', '张三2', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  179. INSERT INTO `staffs` VALUES ('185', '张三3', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  180. INSERT INTO `staffs` VALUES ('186', '张三4', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  181. INSERT INTO `staffs` VALUES ('187', '张三5', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  182. INSERT INTO `staffs` VALUES ('188', '张三6', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  183. INSERT INTO `staffs` VALUES ('189', '张三7', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  184. INSERT INTO `staffs` VALUES ('190', '张三', 'male', '30', '1991-01-01', '19000.00', '2021-02-25 14:35:31', '2021-02-25 14:41:10');
  185. INSERT INTO `staffs` VALUES ('191', '李四', 'male', '30', '1991-01-02', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  186. INSERT INTO `staffs` VALUES ('192', 'wanger', 'female', '29', '1992-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  187. INSERT INTO `staffs` VALUES ('193', '张三1', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  188. INSERT INTO `staffs` VALUES ('194', '张三2', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  189. INSERT INTO `staffs` VALUES ('195', '张三3', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  190. INSERT INTO `staffs` VALUES ('196', '张三4', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  191. INSERT INTO `staffs` VALUES ('197', '张三5', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');
  192. INSERT INTO `staffs` VALUES ('198', '张三6', 'male', '30', '1991-01-01', '9000.00', '2021-02-25 14:35:31', '2021-02-25 14:40:21');

[1]:
[1]: “效果图”

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：很棒，极好
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post