博客列表 >PHP实战: 实现数据的分页显示和编辑,删除功能.(基于ajax无刷新, 源码)

PHP实战: 实现数据的分页显示和编辑,删除功能.(基于ajax无刷新, 源码)

zl的php学习博客
zl的php学习博客原创
2021年02月28日 16:12:041148浏览

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

效果展示

效果图

目录结构

内容

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

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

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

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

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

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

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

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

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

  1. <?php
  2. //require './Controller/handle.php';
  3. ?>
  4. <!DOCTYPE html>
  5. <html lang="en">
  6. <head>
  7. <meta charset="UTF-8">
  8. <title>分页</title>
  9. <link rel="stylesheet" href="./style.css">
  10. <link rel="stylesheet" href="./pure-css3-icons/icono.min.css">
  11. </head>
  12. <body>
  13. <table>
  14. <caption>信息管理</caption>
  15. <thead>
  16. <tr>
  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>
  27. </thead>
  28. <tbody class="tbody"></tbody>
  29. </table>
  30. <div class="paging"></div>
  31. <div class="masking">
  32. <div class="del-confirm">
  33. <header>
  34. <h3>警告</h3>
  35. <button onclick="delMaskingClose()"><i class="icono-cross"></i></button>
  36. </header>
  37. <masking-body>
  38. 确定删除
  39. </masking-body>
  40. <footer>
  41. <button onclick="delMaskingClose()">取消</button>
  42. <button onclick="delMaskingConfirm()">确定</button>
  43. </footer>
  44. </div>
  45. <div class="edit-confirm">
  46. <header>
  47. <h3>编辑</h3>
  48. <button onclick="editMaskingClose()"><i class="icono-cross"></i></button>
  49. </header>
  50. <masking-body class="edit-form">
  51. </masking-body>
  52. <footer>
  53. <button onclick="editMaskingClose()">取消</button>
  54. <button onclick="editMaskingConfirm()">确定</button>
  55. </footer>
  56. </div>
  57. </div>
  58. <script src="./event.js"></script>
  59. </body>
  60. </html>

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

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

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议