refactor: 材料调差-附件，分页器重构

app/public/js/material_file.js

@@ -34,7 +34,8 @@ $(document).ready(function () {
                     if (!$('#file-list tr').length) {
                         getAllList();
                     } else {
-                        getAllList(parseInt($('#currentPage').text()));
+                        const curPageNo = $('#file-pagination > li[class="page-item active"] > a').text()
+                        getAllList(parseInt(curPageNo));
                     }
                 });
             }
@@ -52,10 +53,11 @@ $(document).ready(function () {
         postData('/tender/measure/material/file/delete', data, function () {
             const idx = fileData.findIndex(file => file.id === parseInt(attid))
             idx !== -1 && fileData.splice(idx, 1)
+            const curPageNo = parseInt($('#file-pagination > li[class="page-item active"] > a').text())
             if ($('#file-list tr').length === 1) {
-                getAllList(parseInt($('#currentPage').text()) - 1);
+                getAllList(curPageNo - 1);
             } else {
-                getAllList(parseInt($('#currentPage').text()));
+                getAllList(curPageNo);
             }
             // self.parents('tr').remove();
             // // 重新排序
@@ -67,38 +69,84 @@ $(document).ready(function () {
         });
     });
     // 切换页数
-    $('.page-select').on('click', function () {
-        const totalPageNum = parseInt($('#totalPage').text());
-        const lastPageNum = parseInt($('#currentPage').text());
-        const status = $(this).attr('content');
-        if (status === 'pre' && lastPageNum > 1) {
-            getAllList(lastPageNum-1);
-        } else if (status === 'next' && lastPageNum < totalPageNum) {
-            getAllList(lastPageNum+1);
+    $('#file-pagination').on('click', '.page-item a', function () {
+        // 找到当前的pageNo
+        const curPageNo = $('#file-pagination > li[class="page-item active"] > a').text()
+        const btnType = $(this).attr('aria-label')
+        const total = calcCount();
+        // btnType存在，说明点击的是前一个/后一个
+        // btnType不存在，点击的是页数
+        if (btnType) {
+            if (btnType === 'Previous') {
+                // 只有大于1时才处理
+                if (parseInt(curPageNo) !== 1) {
+                    getAllList(curPageNo - 1)
+                }
+            } else {
+                if (parseInt(curPageNo) !== Math.ceil(total/15)) {
+                    getAllList(parseInt(curPageNo) + 1)
+                }
+            }
+        } else {
+
+            curPageNo !== $(this).text() && getAllList(parseInt($(this).text()))
         }
-    });
+    })
     // 生成所有附件列表
     function getAllList(currPageNum = 1) {
         // 每页最多几个附件
         const pageCount = 15;
-        // 附件总数
-        let total = fileData && fileData.length;
-        // 未选中checkbox，需要过滤出来当前期的数据
+         // 未选中checkbox，需要过滤出来当前期的数据
         const filterFileData = fileData && fileData.filter(file => file.mid === parseInt(mid) && file.tid === parseInt(tid))
-        if(!$('#file-checkbox').is(':checked')) {
-            total = filterFileData.length
-        }
+        const total = calcCount(filterFileData);
         // 总页数
         const pageNum = Math.ceil(total/pageCount);
-        $('#totalPage').text(pageNum);
-        // total为0，当前还没上传过附件
-        $('#currentPage').text(total ? currPageNum : 0);
         // 当前页附件内容
         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)
     }
 
 
+    function renderPagination(pageNo, pageSize) {
+        $('#file-pagination').empty()
+        const btnHtml = `<li class="page-item page-back">
+            <a class="page-link" href="#" aria-label="Previous">
+                <span aria-hidden="true">&laquo;</span>
+            </a>
+        </li>
+        <li class="page-item page-next">
+            <a class="page-link" href="#" aria-label="Next">
+                <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>`
+            } else {
+                html+=`<li class="page-item"><span class="page-link">...</span></li>`
+            }
+
+        }
+        $('.page-next').before(html)
+    }
+
     function renderHtml(list) {
         let html = '';
         list.forEach((fileInfo, idx) => {
@@ -137,6 +185,15 @@ $(document).ready(function () {
             return showDel ? {...file, canDel: true} : file
         })
     }
+
+    function calcCount(filterFileData) {
+        // 附件总数
+        let total = fileData && fileData.length;
+        if(!$('#file-checkbox').is(':checked')) {
+            total = filterFileData && filterFileData.length
+        }
+        return total
+    }
 });
 
 /**

app/view/material/file.ejs

@@ -7,10 +7,7 @@
           <span class="d-flex align-items-center" style="margin-left: 5px;">
             <input type="checkbox" id="file-checkbox">
             <span class="text-primary" style="margin-left: 5px;">所有期</span>
-            <div style="margin-left: 20px;">
-              <!--所有附件 翻页-->
-              <span id="showPage"><a href="javascript:void(0);" class="page-select" content="pre"><i class="fa fa-chevron-left"></i></a> <span id="currentPage">1</span>/<span id="totalPage">10</span> <a href="javascript:void(0);" class="page-select" content="next"><i class="fa fa-chevron-right"></i></a></span>
-            </div>
+
           </span>
         </div>
     </div>
@@ -63,6 +60,29 @@
             <% }) %> -->
           </tbody>
         </table>
+        <div class="d-flex justify-content-center">
+          <!--所有附件 翻页-->
+<!--
+          <span id="showPage"><a href="javascript:void(0);" class="page-select" content="pre"><i class="fa fa-chevron-left"></i></a> <span id="currentPage">1</span>/<span id="totalPage">10</span> <a href="javascript:void(0);" class="page-select" content="next"><i class="fa fa-chevron-right"></i></a></span> -->
+          <nav aria-label="Page navigation example">
+            <ul id="file-pagination" class="pagination">
+              <li class="page-item page-back">
+                <a class="page-link" href="#" aria-label="Previous">
+                  <span aria-hidden="true">&laquo;</span>
+                </a>
+              </li>
+              <!-- <li class="page-item active"><a class="page-link" href="#">1</a></li>
+              <li class="page-item"><a class="page-link" href="#">2</a></li>
+              <li class="page-item"><a class="page-link" href="#">3</a></li> -->
+              <li class="page-item page-next">
+                <a class="page-link" href="#" aria-label="Next">
+                  <span aria-hidden="true">&raquo;</span>
+                </a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+
       </div>
     </div>
   </div>