zoukankan      html  css  js  c++  java
  • Vue.js实现分页

    • 效果图
    • 代码
      <!DOCTYPE html>
      <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
      <head>
          <meta charset="UTF-8">
          <title>用户管理页面</title>
      
          <!-- Bootstrap core CSS -->
          <link href="bootstrap-4.3.1-dist/css/bootstrap.css" rel="stylesheet">
          <link href="css/bootstrap.min.css" rel="stylesheet">
          <link href="css/dashboard.css" rel="stylesheet">
      
          <script src="bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
          <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
          <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
          <script src="js/jquery.min.js"></script>
          <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
      
      
          <!-- 异步提交的库 -->
          <script src="js/vue-resource.min.js"></script>
          <style>
              .page-div-style {
                  width: 100%;
                  text-align: center;
              }
      
      
          </style>
      </head>
      <body>
      
      <!-- container自适应 -->
      <div class="container">
          <!-- 为表格添加基础样式 ,
              .table为任意<table>添加基本样式,
              .table-striped可以给tbody之内的每一行添加斑马条纹样式
              .table-bordered为表格和其中的每个单元格增加边框
          -->
      
      
          <table class="table table-bordered">
              <!-- 表格标题行的容器元素,用来识别表格列 -->
              <thead>
              <tr>
                  <!-- 特殊的表格单元格,用来识别行或列 -->
                  <th>序号</th>
                  <th>用户名</th>
                  <th>昵称</th>
                  <th>手机号</th>
                  <th>邮箱</th>
                  <th>操作</th>
              </tr>
              </thead>
              <!-- 表格主题中的表格行的容器元素 -->
              <tbody id="example">
              <!-- 一组出现在单行单元格的容器元素 -->
              <tr v-for="item in items">
                  <td> {{ item.num }}</td>
                  <td> {{ item.username }}</td>
                  <td> {{ item.avatar }}</td>
                  <td> {{ item.phone }}</td>
                  <td> {{ item.email }}</td>
                  <td>
                      <!--<button class="btn btn-warning" v-bind:value="item.id" v-on:click="reviewClick">
                          审核
                      </button>-->
                      <button class="btn btn-warning" v-bind:value="item.id" v-on:click="editorClick">
                          编辑
                      </button>
                      <!--
                           data-target:想要在页面上加载的模拟框的目标。
                           data-toggle:用于打开模态窗口。
                       -->
                      <button class="btn btn-warning" v-bind:value="item.id" v-on:click="deleteClick">
                          删除
                      </button>
      
      
                  </td>
              </tr>
              </tbody>
          </table>
          <div class="page-div-style" id="page">
              <nav aria-label="Page navigation example">
                  <ul class="pagination">
                      <li class="page-item" v-show="isShowPrevious"><a class="page-link" v-on:click="previous">Previous</a>
                      </li>
                      <li class="page-item" v-for="item in pageCounts" v-on:click="pageClick"
                          v-bind:class="{active : item.isActive}">
                          <a class="page-link">{{item.pages}}</a>
      
                      <li class="page-item">
                          <a class="page-link" v-show="isShowNext" v-on:click="next">Next</a>
                      </li>
                  </ul>
              </nav>
             
            
          </div>
      
      </div>
      
      </body>
      <script>
         var v = new Vue({
              el: '#page',
              data: {
                  pageCounts: [],
                  curPage: 1,
                  start: 1,
                  end: 5,
                  total: 0,
                  pageCount: 5,
                  pages: 0,
                  isShowPrevious: false,
                  isShowNext: false,
              },
              methods: {
                  next() {
                      v.curPage++;
                      var param = {"pageCount": v.pageCount, "curPage": v.curPage, "total": v.total}
                      sendPost(param);
                  },
                  previous() {
                      v.curPage--;
                      var param = {"pageCount": v.pageCount, "curPage": v.curPage, "total": v.total}
                      sendPost(param);
                  },
                  pageClick(event) {
                      //
                      v.curPage = event.target.innerHTML;
                      var param = {"pageCount": v.pageCount, "curPage": v.curPage, "total": v.total}
                      sendPost(param);
                      console.log(event.target.innerHTML);
                  }
              }
          })
          var vm = new Vue({
              el: '#example',
              data: {
                  items: [],
              },
              methods: {
                  reviewClick(event) {
                      //获取id
      
                  },
                  editorClick(event) {
                      //获取id
                      //console.log(event.target.value);
                      var userIframe = window.parent.document.getElementById('userIframe');
                      userIframe.src = "user_info.html?id=" + event.target.value;
                      //window.location.href = "user_info.html?id=" + event.target.value;
                  },
                  deleteClick(event) {
                      Vue.http.get('/deleteUserById/' + event.target.value).then(function (res) {
                          console.log(JSON.parse(res.bodyText));
                          var param = {"pageCount": v.pageCount, "curPage": v.curPage, "total": v.total}
                          sendPost(param);
                      }, function (res) {
      
                      })
                      console.log("删除" + event.target.value);
                  },
              }
          })
          var param = {"pageCount": v.pageCount, "curPage": v.curPage, "total": v.total}
      
          sendPost(param);
      
          function sendPost(param) {
              Vue.http.post('/allUser', param).then(function (res) {
                      //请求成功
                      var result = JSON.parse(res.bodyText);
                      var data = result[0];
                      var sum = result[1];
                      v.total = Math.ceil((sum.total / sum.pageCount));
                      if (v.total < 5)
                          v.end = v.total;
                      //将分页的数据清空为0
                      v.pageCounts.length = 0;
                      //判断上一页、下一页是否显示
                      if (sum.curPage == 1 && v.total == 1) {
                          v.isShowPrevious = false;
                          v.isShowNext = false;
                      } else if (sum.curPage == 1 && v.total != 1 && v.total != 0) {
                          v.isShowPrevious = false;
                          v.isShowNext = true;
                      } else if (sum.curPage == v.total) {
                          v.isShowPrevious = true;
                          v.isShowNext = false;
                      } else {
                          v.isShowPrevious = true;
                          v.isShowNext = true;
                      }
                      if (v.curPage == v.end && v.end < v.total) {
                          v.start++;
                          v.end++;
                      } else if (v.curPage == v.start && v.start > 1) {
                          v.start--;
                          v.end--;
                      }
                      //获取显示的椰树
                      for (var i = v.start; i <= v.end; i++) {
                          v.pageCounts.push({
                              pages: i,
                              isActive: i == v.curPage ? true : false,
                          })
                      }
      
                      //获取服务端传递过来的数据,
                      vm.items.length = 0;
                      for (var i = 0; i < data.length; i++) {
                          //触发数组更新
                          vm.items.push({
                              num: (parseInt([i]) + 1),
                              username: data[i].username,
                              phone: data[i].phone,
                              email: data[i].email,
                              avatar: data[i].avatar,
                              id: data[i].id,
                          })
                      }
      
      
                  }
                  ,
      
                  function (res) {
                      //请求失败
                  }
              );
          }
      </script>
      </html>
  • 相关阅读:
    AGC037F Counting of Subarrays
    AGC025F Addition and Andition
    CF506C Mr. Kitayuta vs. Bamboos
    AGC032D Rotation Sort
    ARC101F Robots and Exits
    AGC032E Modulo Pairing
    CF559E Gerald and Path
    CF685C Optimal Point
    聊聊Mysql索引和redis跳表
    什么是线程安全
  • 原文地址:https://www.cnblogs.com/fatRabbit-/p/10802059.html
Copyright © 2011-2022 走看看