style: 材料-调差跳转分页ui

app/public/js/material_file.js

@@ -6,7 +6,10 @@
  * @date 2020/06/30
  * @version
  */
+
 $(document).ready(function () {
+    // 每页最多几个附件
+    const pageCount = 15;
     // 全局fileData初始化
     let fileData = fileList || []
     handleFileList(fileData)
@@ -82,10 +85,15 @@ $(document).ready(function () {
                 if (parseInt(curPageNo) !== 1) {
                     getAllList(curPageNo - 1)
                 }
-            } else {
-                if (parseInt(curPageNo) !== Math.ceil(total/15)) {
+            } else if(btnType === 'Next') {
+                if (parseInt(curPageNo) !== Math.ceil(total/pageCount)) {
+                    console.log('parseInt(curPageNo) + 1', parseInt(curPageNo) + 1)
                     getAllList(parseInt(curPageNo) + 1)
                 }
+            } else if(btnType === 'Start') {
+                getAllList(1)
+            } else {
+                getAllList(Math.ceil(total/pageCount))
             }
         } else {
 
@@ -94,8 +102,7 @@ $(document).ready(function () {
     })
     // 生成所有附件列表
     function getAllList(currPageNum = 1) {
-        // 每页最多几个附件
-        const pageCount = 15;
+        console.log('currPageNum', currPageNum)
          // 未选中checkbox，需要过滤出来当前期的数据
         const filterFileData = fileData && fileData.filter(file => file.mid === parseInt(mid) && file.tid === parseInt(tid))
         const total = calcCount(filterFileData);
@@ -103,6 +110,7 @@ $(document).ready(function () {
         const pageNum = Math.ceil(total/pageCount);
         // 当前页附件内容
         const currPageAttData = fileData && $('#file-checkbox').is(':checked') ? fileData.slice((currPageNum-1)*pageCount, currPageNum*pageCount) : filterFileData.slice((currPageNum-1)*pageCount, currPageNum*pageCount);
+
         renderHtml(currPageAttData)
         // 渲染分页器
         renderPagination(currPageNum, pageNum)
@@ -111,47 +119,76 @@ $(document).ready(function () {
 
     function renderPagination(pageNo, pageSize) {
         $('#file-pagination').empty()
-        const btnHtml = `<li class="page-item page-back">
-            <a class="page-link" href="#" aria-label="Previous">
+        const btnHtml = `
+        <li class="page-item page-begin">
+            <a class="page-link" href="#" aria-label="Start">
                 <span aria-hidden="true">&laquo;</span>
             </a>
         </li>
+        <li class="page-item page-back">
+            <a class="page-link" href="#" aria-label="Previous">
+                <span aria-hidden="true">&lsaquo;</span>
+            </a>
+        </li>
         <li class="page-item page-next">
             <a class="page-link" href="#" aria-label="Next">
+                <span aria-hidden="true">&rsaquo;</span>
+            </a>
+        </li>
+        <li class="page-item page-end">
+            <a class="page-link" href="#" aria-label="End">
                 <span aria-hidden="true">&raquo;</span>
             </a>
         </li>`
         $('#file-pagination').append(btnHtml)
         let html = ''
-        for (let index = 0; index < pageSize; index++) {
-            if (index + 1 === pageNo) {
-                // 当前
-                html+=`<li class="page-item active"><a class="page-link" href="#">${index + 1}</a></li>`
-            } else if(index === pageNo) {
-                // 前一页一页
-                html+=`<li class="page-item"><a class="page-link" href="#">${index + 1}</a></li>`
-            } else if (index + 2 === pageNo) {
-                // 后一页
-                html+=`<li class="page-item"><a class="page-link" href="#">${index + 1}</a></li>`
-            } else if(index + 1 === pageSize) {
-                // 末尾
-                html+=`<li class="page-item"><a class="page-link" href="#">${index + 1}</a></li>`
-            } else if (index === 0) {
-                // 开头
-                html+=`<li class="page-item"><a class="page-link" href="#">${index + 1}</a></li>`
+        // 考虑极端情况
+        // console.log('pageNo',pageNo, 'pageSize', pageSize)
+        if (pageNo - 2 <= 0 || pageNo + 2 >= pageSize)  {
+            if (pageNo < 3) {
+                for (let i = 0; i < 5; i++) {
+                    html += pageNo === i + 1 ?
+                        `<li class="page-item active"><a class="page-link" href="#">${i+1}</a></li>` :
+                        `<li class="page-item"><a class="page-link" href="#">${i+1}</a></li>`
+                }
             } else {
-                html+=`<li class="page-item"><span class="page-link">...</span></li>`
+                for (let i = pageSize-4; i <= pageSize; i++) {
+                    html += pageNo === i ?
+                        `<li class="page-item active"><a class="page-link" href="#">${i}</a></li>` :
+                        `<li class="page-item"><a class="page-link" href="#">${i}</a></li>`
+                }
+            }
+
+        } else {
+            for (let i = 0; i < pageSize; i++) {
+                if (i + 1 === pageNo) {
+                    // 当前
+                    html+=`<li class="page-item active"><a class="page-link" href="#">${i + 1}</a></li>`
+                } else if(i + 2 === pageNo) {
+                    // 后一页
+                    html+=`<li class="page-item"><a class="page-link" href="#">${i + 1}</a></li>`
+                } else if (i + 3 === pageNo) {
+                    // 后两页
+                    html+=`<li class="page-item"><a class="page-link" href="#">${i + 1}</a></li>`
+                } else if(i === pageNo) {
+                    // 前一页
+                    html+=`<li class="page-item"><a class="page-link" href="#">${i + 1}</a></li>`
+                } else if (i -1  === pageNo) {
+                    // 前两页
+                    html+=`<li class="page-item"><a class="page-link" href="#">${i + 1}</a></li>`
+                }
             }
 
         }
+
         $('.page-next').before(html)
     }
 
     function renderHtml(list) {
         let html = '';
-        list.forEach((fileInfo, idx) => {
+        list.forEach(fileInfo => {
             html += `<tr style="height: 31px;">
-            <td>${idx + 1}</td>
+            <td>${fileInfo.index + 1}</td>
             <td><a href="/${fileInfo.filepath}" target="_blank">${fileInfo.file_name}</a></td>
             <td>${fileInfo.file_size}</td>
             <td>第${fileInfo.s_order}期</td>
@@ -171,7 +208,7 @@ $(document).ready(function () {
     }
 
     function handleFileList(fileList) {
-        fileData = fileList.map(file => {
+        fileData = fileList.map((file, index) => {
             let showDel = false
             // 只判断当前期，因为以往期都是只读的
             if (file.mid === parseInt(mid) && file.tid === parseInt(tid) && file.user_id === parseInt(cur_uid)) {
@@ -182,15 +219,15 @@ $(document).ready(function () {
                     curAuditor.aid === parseInt(cur_uid) && (showDel = true)
                 }
             }
-            return showDel ? {...file, canDel: true} : file
+            return showDel ? {...file, canDel: true, index} : {...file, index}
         })
     }
 
-    function calcCount(filterFileData) {
+    function calcCount() {
         // 附件总数
         let total = fileData && fileData.length;
         if(!$('#file-checkbox').is(':checked')) {
-            total = filterFileData && filterFileData.length
+            total = fileData && fileData.filter(file => file.mid === parseInt(mid) && file.tid === parseInt(tid)).length
         }
         return total
     }