# add pagination in device page

src/styles/index.scss

@@ -4,6 +4,7 @@
 @import './element-ui.scss';
 @import './sidebar.scss';
 @import './btn.scss';
+@import './pagination.scss';
 
 body {
   height: 100%;

src/styles/pagination.scss

@@ -0,0 +1,60 @@
+.pagination {
+  float: right;
+  font-weight: normal;
+  padding: 2rem 0 1rem 0;
+  .btn-prev {
+    border: 1px solid #d1dbe5;
+    border-right: 0;
+    border-radius: 0 !important;
+    background: #fff !important;
+    margin: 0 !important;
+  }
+  .btn-next {
+    border: 1px solid #d1dbe5;
+    // border-left: 0;
+    background: #fff !important;
+    border-radius: 0!important;
+    margin: 0 !important;
+  }
+  .el-pager li {
+    border: 1px solid #d1dbe5;
+    box-sizing: border-box;
+    background: #fff !important;
+    border-radius: 0!important;
+    border-right: 0;
+    padding: 0;
+    margin: 0 !important;
+  }
+  .el-pager li:not(.disabled).active {
+    background: #409EFF !important;
+    border-color: #409EFF;
+  }
+  .el-pagination__jump {
+    margin-left: .8rem;
+  }
+  .el-pagination__editor.el-input {
+    width: 2.5rem;
+  }
+}
+// mobile
+@media screen and (max-width: 375px) {
+  .pagination {
+    display: flex !important;
+    justify-content: center;
+    float: none;
+    padding: 1rem 0 1rem 0;
+    .el-pager li {
+      // height: 1.5rem;
+      // line-height: 1.5rem;
+      font-size: .5rem !important;
+      // min-width: 1.5rem !important;
+    }
+    .el-pagination__total {
+      // margin-right: 2rem;
+      display: none !important;
+    }
+    .el-pagination__jump {
+      display: none !important;
+    }
+  }
+}

src/views/counter/device.vue

@@ -70,6 +70,14 @@
         </template>
       </el-table-column>
     </el-table>
+    <el-pagination
+      class="pagination"
+      background
+      layout="total, prev, pager, next, jumper"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+      :total="total">
+    </el-pagination>
   </div>
 </template>
 
@@ -84,7 +92,8 @@ export default {
       DeviceSearchForm: {
         device_id: null,
         status: null
-      }
+      },
+      total: 0
     }
   },
   methods: {
@@ -92,6 +101,7 @@ export default {
       fetchDeviceList(params).then(response => {
         this.deviceList = response.data.results
         console.log(this.deviceList)
+        this.total = response.data.count
         this.listLoading = false
       })
     },
@@ -102,6 +112,15 @@ export default {
     resetSearch() {
       this.DeviceSearchForm.device_id = ''
       this.getDevices()
+    },
+    handleCurrentChange(page) {
+      // console.log(page)
+      this.listLoading = true
+      this.getDevices({ page })
+    },
+    handleSizeChange(page) {
+      this.listLoading = true
+      this.getDevices({ page })
     }
   },
   created() {
@@ -114,6 +133,5 @@ export default {
 </script>
 
 <style lang="scss">
-  .search-input {
+  
-  }
 </style>

src/views/counter/logs.vue

@@ -99,64 +99,5 @@ export default {
 </script>
 
 <style lang="scss">
-  .pagination {
+  
-      float: right;
-      font-weight: normal;
-      padding: 2rem 0 1rem 0;
-      .btn-prev {
-        border: 1px solid #d1dbe5;
-        border-right: 0;
-        border-radius: 0 !important;
-        background: #fff !important;
-        margin: 0 !important;
-      }
-      .btn-next {
-        border: 1px solid #d1dbe5;
-        // border-left: 0;
-        background: #fff !important;
-        border-radius: 0!important;
-        margin: 0 !important;
-      }
-      .el-pager li {
-        border: 1px solid #d1dbe5;
-        box-sizing: border-box;
-        background: #fff !important;
-        border-radius: 0!important;
-        border-right: 0;
-        padding: 0;
-        margin: 0 !important;
-      }
-      .el-pager li:not(.disabled).active {
-        background: #409EFF !important;
-        border-color: #409EFF;
-      }
-      .el-pagination__jump {
-        margin-left: .8rem;
-      }
-      .el-pagination__editor.el-input {
-        width: 2.5rem;
-      }
-  }
-  // mobile
-  @media screen and (max-width: 375px) {
-    .pagination {
-      display: flex !important;
-      justify-content: center;
-      float: none;
-      padding: 1rem 0 1rem 0;
-      .el-pager li {
-        // height: 1.5rem;
-        // line-height: 1.5rem;
-        font-size: .5rem !important;
-        // min-width: 1.5rem !important;
-      }
-      .el-pagination__total {
-        // margin-right: 2rem;
-        display: none !important;
-      }
-      .el-pagination__jump {
-        display: none !important;
-      }
-    }
-  }
 </style>