js分页插件

// 分页插件类
class PaginationPlugin {
  constructor(fetchDataURL, options = {}) {
    this.fetchDataURL = fetchDataURL;
    this.options = {
      containerId: options.containerId || 'paginationContainer',
           dataSizeAttr: options.dataSizeAttr || 'toatalsize', // 修改为实际API返回的数据属性名
           pageSizeAttr: options.pageSizeAttr || 'size',
           onPageChange: options.onPageChange || (() => {}),
    };
	this.paginationData = {};
	this.totalPages=0;
  }
 
  async init() {
      const initialData = await this.fetchData(1);
      this.paginationData = initialData;
	  this.totalPages=initialData.data.totalpage;
      this.options.onPageChange(initialData);
      this.createPagination(this.options.containerId);
      this.bindEventListeners(this.options.containerId);
    }
  createPagination(containerId) {
    // ... 保留原有的创建分页组件逻辑 ..
	const container = document.getElementById(containerId);
	container.innerHTML=''
	// 创建上一页按钮
	const prevPageButton = document.createElement('button');
	prevPageButton.id = 'prevPage';
	prevPageButton.textContent = '上一页';
	prevPageButton.classList.add('bg-blue-200','w-14', 'hover:bg-blue-700', 'text-white','text-sm',  'py-1', 'px-1', 'rounded', 'ml-2');
		
	// 创建下一页按钮
	const nextPageButton = document.createElement('button');
	nextPageButton.id = 'nextPage';
	nextPageButton.textContent = '下一页';
	nextPageButton.classList.add('bg-blue-500', 'w-14','hover:bg-blue-700', 'text-white', 'text-sm','py-1', 'px-1', 'rounded', 'ml-2');
		
	// 创建跳转按钮
	const gotoPageButton = document.createElement('button');
	gotoPageButton.id = 'gotoPageButton';
	gotoPageButton.textContent = '跳转';
	gotoPageButton.classList.add('bg-blue-500','w-14', 'hover:bg-blue-700', 'text-white', 'text-sm', 'py-1', 'px-1', 'rounded', 'ml-2');
		
	// 创建输入框
	const gotoPageInput = document.createElement('input');
	gotoPageInput.id = 'gotoPageInput';
	gotoPageInput.type = 'number';
	gotoPageInput.placeholder = '页码';
	gotoPageInput.classList.add('w-16', 'p-1', 'mt-1', 'border','text-sm', 'border-gray-300', 'rounded-md', 'ml-2');
		
	// 创建分页按钮容器
	const paginationContainer = document.createElement('div');
	paginationContainer.id = 'pagination';
	paginationContainer.classList.add('flex', 'justify-center');
		
	
	  // 创建分页按钮列表
	let pages = [];
	const visibleRange = 5; // 显示5个完整页码
	const halfVisibleRange = Math.floor(visibleRange / 2); // 对称显示，一半数量的完整页码
	
	if (this.totalPages > visibleRange) {
	  // 开始页码
	  let startPage = this.paginationData.data.page - halfVisibleRange;
	  if (startPage <= 0) {
	    startPage = 1;
	  }
	  
	  // 结束页码
	  let endPage = this.paginationData.data.page + halfVisibleRange;
	  if (endPage > this.totalPages) {
	    endPage = this.totalPages;
	    startPage = Math.max(startPage - (endPage - this.totalPages), 1);
	  }
	
	  // 添加开始页码之前的页码
	  if (startPage > 1) {
	    pages.push(1);
	    if (startPage > 2) {
	      pages.push('...');
	    }
	  }
	  // 添加中间页码
	  for (let i = startPage; i <= endPage; i++) {
	    pages.push(i);
	  }
	  // 添加结束页码之后的页码
	  if (endPage < this.totalPages) {
	    pages.push('...');
	    pages.push(this.totalPages);
	  }
	} else {
	  for (let i = 1; i <= this.totalPages; i++) {
	    pages.push(i);
	  }
	}
	  pages.forEach((page) => {
	    const button = document.createElement('button');
	    button.id = `page-${page}`;
	    button.textContent = page;
	    button.classList.add('px-4', 'py-1', 'border', 'border-gray-300','text-sm', 'rounded-md', 'text-gray-700','ml-1',);
	
	    if (page === this.paginationData.data.page) {
		  button.classList.remove('text-gray-700');
	      button.classList.add('bg-blue-500', 'text-white');
	    }
	
	    paginationContainer.appendChild(button);
	  });
		
	// 创建分页信息容器
	const pageInfoContainer = document.createElement('div');
	pageInfoContainer.id = 'pageInfoContainer';
	pageInfoContainer.classList.add('flex',  'text-sm','justify-end');
		
	// 创建分页信息
	const pageInfo = document.createElement('span');
	pageInfo.id = 'pageInfo';
	pageInfo.textContent = `共 ${paginationData.data.toatalsize} 条记录，每页 ${paginationData.data.size} 条记录，当前第 ${paginationData.data.page} 页,共${paginationData.data.totalpage}页`;
	pageInfoContainer.appendChild(pageInfo);
	pageInfo.classList.add('ml-2','mt-2');
	// 创建跳转到第一页按钮
	const firstPageButton = document.createElement('button');
	firstPageButton.id = 'firstPageButton';
	firstPageButton.textContent = '首页';
	firstPageButton.classList.add('bg-blue-500','w-14', 'hover:bg-blue-700', 'text-white','text-sm',  'py-1', 'px-1', 'rounded', 'ml-2');
	pageInfoContainer.appendChild(firstPageButton);
		
	// 创建跳转到最后一页按钮
	const lastPageButton = document.createElement('button');
	lastPageButton.id = 'lastPageButton';
	lastPageButton.textContent = '尾页';
	lastPageButton.classList.add('bg-blue-500','w-14', 'hover:bg-blue-700', 'text-white','text-sm',  'py-1', 'px-1', 'rounded', 'ml-2');
	pageInfoContainer.appendChild(lastPageButton);
		
	// 将所有元素添加到容器中
	container.appendChild(prevPageButton);
	container.appendChild(nextPageButton);
	container.appendChild(gotoPageInput);
	container.appendChild(gotoPageButton);
	container.appendChild(paginationContainer);
	container.appendChild(pageInfoContainer);
  }
 
	
	// 更新选中的分页按钮
	 updateSelectedPage(page, containerId) {
	  const container = document.getElementById(containerId);
	  const buttons = container.querySelectorAll('#pagination button');
	 
	  buttons.forEach((button) => {
	    if (button.id === `page-${page}`) {
		   button.classList.remove('text-gray-700');
	       button.classList.add('bg-blue-500', 'text-white');
	    } else {
		  button.classList.add('text-gray-700');
	      button.classList.remove('bg-blue-500', 'text-white');
	    }
	  });
	}
	
	
  bindEventListeners(containerId) {
	  const prevPageButton = document.getElementById('prevPage');
	  const nextPageButton = document.getElementById('nextPage');
	  const gotoPageButton = document.getElementById('gotoPageButton');
	  const gotoPageInput = document.getElementById('gotoPageInput');
	  const pageInfoContainer = document.getElementById('pageInfoContainer');
	  const firstPageButton = document.getElementById('firstPageButton');
	  const lastPageButton = document.getElementById('lastPageButton');
	  	
	  prevPageButton.addEventListener('click',async () => {
	    const currentPage = parseInt(this.paginationData.data.page);
	  		if(currentPage==2){
	  			prevPageButton.classList.add('bg-blue-200');
	  			prevPageButton.classList.remove('bg-blue-500');
	  		}
	  		if(currentPage==1){
	  		  alert("已经是第一页了");
	  		  return;
	  		}
	    if (currentPage > 1) {
	      this.paginationData.data.page = currentPage - 1;
		  const initialData =await  this.fetchData(  this.paginationData.data.page);
		  this.paginationData = initialData;
		  this.totalPages=initialData.data.totalpage;
		  this.options.onPageChange(initialData);
		  this.createPagination(this.options.containerId);
		  this.bindEventListeners(this.options.containerId);
		  this.updateSelectedPage(this.paginationData.data.page,containerId)
	    }
	  });
	  	
	  nextPageButton.addEventListener('click', async() => {
	    const currentPage = parseInt(this.paginationData.data.page);
	  		 if( currentPage==this.totalPages){
	  			  alert("已经是最后一页了");
	  			  return;
	  		 }
	  			   prevPageButton.classList.remove('bg-blue-200');
	  		 	   prevPageButton.classList.add('bg-blue-500');
	    if (currentPage < this.totalPages) {
			 const initialData =await  this.fetchData( this.paginationData.data.page);
			this.paginationData = initialData;
			this.totalPages=initialData.data.totalpage;
			this.paginationData.data.page = currentPage + 1;
			this.options.onPageChange(initialData);
			this.createPagination(this.options.containerId);
			this.bindEventListeners(this.options.containerId);
			this.updateSelectedPage(this.paginationData.data.page,containerId)
			
	    }
		
		
	  });
	  	
	  gotoPageButton.addEventListener('click', async() => {
	    const input = document.getElementById('gotoPageInput');
	    const page = parseInt(input.value);
	    if (!isNaN(page) && page > 0 && page <= this.totalPages) {
		   const initialData =await  this.fetchData(page);
		   this.paginationData = initialData;
		   this.totalPages=initialData.data.totalpage;
		   this.paginationData.data.page = page;
		   this.options.onPageChange(initialData);
		   this.createPagination(this.options.containerId);
		   this.bindEventListeners(this.options.containerId);
		 
	    }
	  });
	  	
	  firstPageButton.addEventListener('click', async() => {
	    this.paginationData.data.page = 1;
		const initialData =await  this.fetchData(this.paginationData.data.page);
		 this.paginationData = initialData;
		 this.totalPages=initialData.data.totalpage;
		 this.options.onPageChange(initialData);
		 this.createPagination(this.options.containerId);
		 this.bindEventListeners(this.options.containerId);
	  });
	  	
	  lastPageButton.addEventListener('click',async () => {
		
		const initialData =await  this.fetchData(this.totalPages);
		this.paginationData = initialData;
		this.totalPages=initialData.data.totalpage;
		this.paginationData.data.page = this.totalPages;
		this.options.onPageChange(initialData);
		this.createPagination(this.options.containerId);
		this.bindEventListeners(this.options.containerId);
		
		
	  });
	  
    // ... 保留原有的事件绑定逻辑 ...
    const paginationButtons = document.querySelectorAll(`#${containerId} button[id^="page-"]`);
    paginationButtons.forEach((button) => {
      button.addEventListener('click', async (event) => {
        const targetPage = parseInt(event.target.id.replace('page-', ''));
        const initialData = await this.fetchData(targetPage);
		this.paginationData = initialData;
		this.totalPages=initialData.data.totalpage;
		this.paginationData.data.page =targetPage;
		this.options.onPageChange(initialData);
		this.createPagination(this.options.containerId);
		this.bindEventListeners(this.options.containerId);
		
      });
    });
  }
 
async fetchData(page) {
  const url = `${this.fetchDataURL}&page=${page}&size=10`;
  try {
    const response = await fetch(url);
    const jsonData = await response.json();
    return jsonData;
  } catch (error) {
    console.error('There has been a problem with your fetch operation:', error);
    return null;
  }
}
}