大屏添加船 及船上车信息

js/pagination.js

@@ -0,0 +1,151 @@
+class Pagination {
+    constructor(options) {
+        this.currentPage = options.currentPage || 1;
+        this.totalPages = options.totalPages || 1;
+        this.onPageChange = options.onPageChange || (() => {});
+        this.container = options.container;
+        this.maxVisiblePages = 5;
+        
+        this.init();
+    }
+
+    init() {
+        this.render();
+        this.bindEvents();
+    }
+
+    render() {
+        const pagination = document.createElement('div');
+        pagination.className = 'pagination';
+
+        // 上一页按钮
+        const prevButton = document.createElement('button');
+        prevButton.className = 'page-btn';
+        prevButton.textContent = '《';
+        prevButton.disabled = this.currentPage === 1;
+        pagination.appendChild(prevButton);
+
+        // 页码容器
+        const pageNumbers = document.createElement('div');
+        pageNumbers.className = 'page-numbers';
+
+        // 生成页码
+        const pages = this.generatePageNumbers();
+        pages.forEach(page => {
+            if (page === '...') {
+                const ellipsis = document.createElement('span');
+                ellipsis.className = 'page-ellipsis';
+                ellipsis.textContent = '...';
+                pageNumbers.appendChild(ellipsis);
+            } else {
+                const pageNumber = document.createElement('button');
+                pageNumber.className = 'page-number';
+                if (page === this.currentPage) {
+                    pageNumber.classList.add('active');
+                }
+                pageNumber.textContent = page;
+                pageNumber.dataset.page = page;
+                pageNumbers.appendChild(pageNumber);
+            }
+        });
+
+        pagination.appendChild(pageNumbers);
+
+        // 下一页按钮
+        const nextButton = document.createElement('button');
+        nextButton.className = 'page-btn';
+        nextButton.textContent = '》';
+        nextButton.disabled = this.currentPage === this.totalPages;
+        pagination.appendChild(nextButton);
+
+        // 清空容器并添加新的分页
+        this.container.innerHTML = '';
+        this.container.appendChild(pagination);
+    }
+
+    generatePageNumbers() {
+        const pages = [];
+        const maxVisiblePages = this.maxVisiblePages;
+        
+        if (this.totalPages <= maxVisiblePages) {
+            // 如果总页数小于等于最大可见页数，显示所有页码
+            for (let i = 1; i <= this.totalPages; i++) {
+                pages.push(i);
+            }
+        } else {
+            // 始终显示第一页
+            pages.push(1);
+
+            // 计算当前页附近的页码
+            let startPage = Math.max(2, this.currentPage - 1);
+            let endPage = Math.min(this.totalPages - 1, this.currentPage + 1);
+
+            // 调整起始和结束页码，确保显示足够的页码
+            if (startPage > 2) {
+                pages.push('...');
+            }
+
+            for (let i = startPage; i <= endPage; i++) {
+                pages.push(i);
+            }
+
+            // 如果最后一页不在可见范围内，添加省略号
+            if (endPage < this.totalPages - 1) {
+                pages.push('...');
+            }
+
+            // 始终显示最后一页
+            pages.push(this.totalPages);
+        }
+
+        return pages;
+    }
+
+    bindEvents() {
+        this.container.addEventListener('click', (e) => {
+            const target = e.target;
+
+            if (target.classList.contains('page-number')) {
+                const page = parseInt(target.dataset.page);
+                this.goToPage(page);
+            } else if (target.classList.contains('page-btn')) {
+                if (target.textContent === '《') {
+                    this.goToPage(this.currentPage - 1);
+                } else if (target.textContent === '》') {
+                    this.goToPage(this.currentPage + 1);
+                }
+            }
+        });
+    }
+
+    goToPage(page) {
+        if (page < 1 || page > this.totalPages || page === this.currentPage) {
+            return;
+        }
+
+        this.currentPage = page;
+        this.render();
+        this.onPageChange(page);
+    }
+
+    updateTotalPages(totalPages) {
+        this.totalPages = totalPages;
+        if (this.currentPage > totalPages) {
+            this.currentPage = totalPages;
+        }
+        this.render();
+    }
+}
+
+// 使用示例：
+/*
+const pagination = new Pagination({
+    container: document.querySelector('.pagination-container'),
+    currentPage: 1,
+    totalPages: 10,
+    onPageChange: (page) => {
+        console.log('当前页：', page);
+        // 在这里处理页面切换逻辑
+    }
+});
+*/