add pagination

adminUser-edit.html

@@ -949,7 +949,7 @@ $("#nft_add_form").submit(function(e) {
     userid,
     account,
     hashed_password: '',
-    is_superuser,
+    is_superuser: $("#is_active_checkbox").is(':checked'),
     is_active: $("#is_active_checkbox").is(':checked')
   }
 

assets/css/style.css

@@ -1098,4 +1098,13 @@ h1, h2, h3, h4, h5, h6 {
 .btn-changeImg:hover {
   background-color: #012970;
   color: white;
+}
+
+.prev-btn, .next-btn {
+  outline: none;
+  border: 1px solid #012970;
+  border-radius: .5rem;
+  display: inline-block;
+  padding: .3rem .6rem;
+  
 }

assets/js/ark.js

@@ -43,6 +43,11 @@ $("#btn_login").click(function() {
             let access_token = get_access_token();
 
             if (access_token == undefined) {
+                Swal.fire({
+                    title: '權限不足',
+                    icon: 'info',
+                    confirmButtonColor: '#3085d6'
+                });
                 window.location.replace("login.html");
             }
 
@@ -64,7 +69,7 @@ $("#btn_login").click(function() {
             console.log(xhr.responseText); // test
 
             var res = JSON.parse(xhr.responseText);
-            
+            console.log(res.detail);
             if (res.detail == 'Incorrect email or password') {
                 Swal.fire({
                     title: '注意',

user.html

@@ -594,6 +594,10 @@
               <!-- End Table with stripped rows -->
 
             </div>
+            <div class="d-flex justify-content-center mb-3">
+              <span class="prev-btn prev" style="margin-right: .3rem;">prev</span>
+              <span class="next-btn next" style="margin-left: .3rem;">next</span>
+            </div>
           </div>
 
         </div>
@@ -683,13 +687,36 @@
 $(document).ready(function($) {
   // 檢查是否可存取該頁面
   checkRoute();
+  let num_per_page = 20;
+  let n = 0;
+
+  let totalPage;
+
+  $('.prev').click(function(){
+    if(n <= 0) {
+      n = 0;
+    } else {
+      n --;
+    }
+    pagination(data)
+  })
+
+  $('.next').click(function(){
+    if(n >= totalPage) {
+      n = totalPage;
+    } else {
+      n ++;
+    }
+    pagination(data)
+  })
 
   var url = 'https://api.ptt.cx:8750/api/v1/user/';
   var access_token = get_access_token();
   var headers = {'Authorization': 'Bearer ' + access_token}
-  let num_per_page = 20;
   
 
+  let data = [];
+  
   $.ajax({
     url: url,
     headers: headers,
@@ -697,10 +724,10 @@ $(document).ready(function($) {
       console.log(res); // test
       var temp = "";
       var adminStr = "";
-      
       let f = 0;
       for (let i=0; i < res.length; i++) {
         if (res[i].userid) {
+          data.push(res[i]);
           f++;
           temp += `<tr>
                     <th scope="row">${f}</th>
@@ -708,7 +735,10 @@ $(document).ready(function($) {
                   </tr>`
         }
       }
+      
       $(".userdata").html(temp);
+      totalPage = Math.ceil(data.length / 20);
+      pagination(data);
       let j = 0;
       for (let i=0; i < res.length; i++) {
         if (res[i].account) {
@@ -739,6 +769,24 @@ $(document).ready(function($) {
     }
   });
 
+  function pagination(data) {
+    console.log(data);
+    let d = data.slice(num_per_page*n, (num_per_page*n)+20);
+    let temp;
+    // console.log(n);
+    // console.log(d);
+    // console.log(num_per_page*n);
+    for (let i=0; i < d.length; i++) {
+          
+          temp += `<tr>
+                    <th scope="row">${i+num_per_page*n +1}</th>
+                    <td>${d[i].userid}</td>
+                  </tr>`
+
+    }
+    $(".userdata").html(temp);
+  }
+
 });