如何动手用js自己写一个分页？

一时失言乱红尘 2024-03-17 13:58 59阅读 0赞

实现效果

![b563cfe6a2b4597ce35316ecf3e629ce.png][]

实现代码

function generateTableHead() {
      const tableHead = document.getElementById('table-head');
      tableHead.innerHTML = '';
    
      // 添加复选框列的表头
      const checkboxHead = document.createElement('th');
      const checkbox = document.createElement('input');
      checkbox.type = 'checkbox';
      checkbox.addEventListener('click', function() {
        const checkboxes = document.querySelectorAll('#table input[type="checkbox"]');
        checkboxes.forEach(cb => {
          cb.checked = checkbox.checked;
        });
      });
      checkboxHead.appendChild(checkbox);
      tableHead.appendChild(checkboxHead);
    
      // 添加序号列的表头
      const indexHead = document.createElement('th');
      indexHead.textContent = '序号';
      tableHead.appendChild(indexHead);
    
      // 添加其他数据列的表头
      Object.keys(rowsToShow[0]).forEach(key => {
        const th = document.createElement('th');
        th.textContent = key;
    	th.style.width = 'auto';
        tableHead.appendChild(th);
      });
    
      // 添加处理按钮列的表头
      const buttonHead = document.createElement('th');
      buttonHead.textContent = '操作';
      buttonHead.style.textAlign = 'center'; // 设置浮动
      tableHead.appendChild(buttonHead);
    }
    
    // 生成表格行
    function generateTableRows(buttonData,btncallback) {
      const tableBody = document.getElementById('table-body');
      tableBody.innerHTML = '';
    
      rowsToShow.forEach((rowData, index) => {
        const row = document.createElement('tr');
    
        // 添加复选框列
        const checkboxCell = document.createElement('td');
        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkboxCell.appendChild(checkbox);
        row.appendChild(checkboxCell);
    
        // 添加序号列
        const indexCell = document.createElement('td');
        indexCell.textContent = index + 1;
        row.appendChild(indexCell);
    
        // 添加其他数据列
        Object.values(rowData).forEach(value => {
          const td = document.createElement('td');
    	  td.style.width = 'auto';
          td.textContent = value;
          row.appendChild(td);
        });
    
        // 添加处理按钮列
        const buttonCell = document.createElement('td');
        // buttonCell.style.float = 'right'; // 设置浮动
    	 buttonCell.style.textAlign = 'center'; // 设置浮动
    	buttonCell.style.width = 'auto'; // 设置浮动
        buttonData.forEach(button => {
          const buttonElement = document.createElement('div');
    	  console.log(button.icon)
    	  buttonElement.innerHTML = `
    	    <div class="button-content" >
    	      <span class="icon">${button.icon}</span>
    	      <span class="label">${button.label}</span>
    	    </div>
    	  `;
    
         
    	  buttonElement.ev=button.ev;
    	  button.class.forEach(cls => {
    		  buttonElement.classList.add(cls);
    	  });
    	  buttonElement.style = button.style; // 设置按钮样式
          buttonElement.addEventListener('click', function() {
    		  if (typeof btncallback === 'function') {
    		     btncallback(buttonElement.ev,rowData);
    		   }
          });
          buttonCell.appendChild(buttonElement);
        });
    
        row.appendChild(buttonCell);
        tableBody.appendChild(row);
      });
    }
    
    // 处理行数据
    function handleRowData(rowData) {
      // 在这里执行处理行数据的操作
      console.log(rowData);
    }
    
    // 获取选中数据
    function getSelectedData() {
      const selectedData = [];
      const checkboxes = document.querySelectorAll('input[type="checkbox"]');
      checkboxes.forEach((cb, index) => {
        if (cb.checked) {
          selectedData.push(rowsToShow[index]);
        }
      });
      return selectedData;
    }
    	let activepage=1;
        let selectCurent=0;
        // 生成分页
       function generatePagination(page, totalPages, totalRows,callback) {
         const pagination = document.getElementById('pagination');
         pagination.innerHTML = '';
         const prevButton = document.createElement('a');
    	 prevButton.classList.add('wpagebtn');
    	 prevButton.classList.add('wpagebtn-hover');
         prevButton.innerHTML = 'pre';
         prevButton.addEventListener('click', () => {
           if (page > 1) {
             page--;
    		  if (typeof callback === 'function') {
    		     const result = {page:page,pageSize:pageSize};
    		     callback(result);
    		   }
           }
         });
         pagination.appendChild(prevButton);
       
         const maxVisiblePages = 5; // 最大可见的页数
         const middlePage = Math.ceil(maxVisiblePages / 2);
         const startPage = Math.max(1, page - middlePage + 1);
         const endPage = Math.min(startPage + maxVisiblePages - 1, totalPages);
       
         if (startPage > 1) {
           const firstPageButton = document.createElement('a');
           firstPageButton.classList.add('wpagebtn');
           firstPageButton.innerHTML = '1';
           firstPageButton.addEventListener('click', () => {
             if (page !== 1) {
               page = 1;
               if (typeof callback === 'function') {
                  const result = {page:page,pageSize:pageSize};
                  callback(result);
                }
             }
           });
           pagination.appendChild(firstPageButton);
           if (startPage > 2) {
             const ellipsisButton = document.createElement('a');
             ellipsisButton.classList.add('wpagebtn');
             ellipsisButton.innerHTML = '...';
             pagination.appendChild(ellipsisButton);
           }
         }
       
         for (let i = startPage; i <= endPage; i++) {
           const pageButton = document.createElement('a');
           pageButton.classList.add('wpagebtn');
           pageButton.innerHTML = i;
           if (i === page) {
    		   activepage=page;
             pageButton.classList.add('wpagebtn-active');
           }
           pageButton.addEventListener('click', () => {
             if (i !== page) {
               page = i;
               if (typeof callback === 'function') {
                  const result = {page:page,pageSize:pageSize};
                  callback(result);
                }
             }
           });
           pagination.appendChild(pageButton);
         }
       
         if (endPage < totalPages) {
           if (endPage < totalPages - 1) {
             const ellipsisButton = document.createElement('a');
             ellipsisButton.classList.add('wpagebtn');
             ellipsisButton.innerHTML = '...';
             pagination.appendChild(ellipsisButton);
           }
       
           const lastPageButton = document.createElement('a');
           lastPageButton.classList.add('wpagebtn');
           lastPageButton.innerHTML = totalPages;
           lastPageButton.addEventListener('click', () => {
             if (page !== totalPages) {
               page = totalPages;
               if (typeof callback === 'function') {
                  const result = {page:page,pageSize:pageSize};
                  callback(result);
                }
             }
           });
           pagination.appendChild(lastPageButton);
         }
         const nextButton = document.createElement('a');
         nextButton.classList.add('wpagebtn');
    	 nextButton.classList.add('wpagebtn-hover');
         nextButton.innerHTML = 'next';
         nextButton.addEventListener('click', () => {
           if (page < totalPages) {
             page++;
             if (typeof callback === 'function') {
                const result = {page:page,pageSize:pageSize};
                callback(result);
              }
           }
         });
         pagination.appendChild(nextButton);
       
         const totalRowsElement = document.createElement('span');
    	 totalRowsElement.classList.add('wpagebtn');
         totalRowsElement.innerHTML = `总条数：${totalRows}`;
         pagination.appendChild(totalRowsElement);
    	  
    	 const selectContainer = document.createElement('select');
    	    selectContainer.classList.add('wpage-select');
    	 
    	  selectContainer.addEventListener('change', () => {
    	    const value = parseInt(selectContainer.value);
    	    page = 1; // 将当前页码重置为 1
    	    activepage = 1; // 重置当前选中的页面
    		selectCurent=value;
    		pageSize=selectCurent;
    	    if (typeof callback === 'function') {
    	       const result = {page:page,pageSize:pageSize};
    	       callback(result);
    	     }
    	  });
    	  const options = [10, 20, 50, 100,200];
    	  for (let i = 0; i < options.length; i++) {
    	    const option = document.createElement('option');
    	    option.value = options[i];
    	    option.text = `${options[i]} 条/页`;
    		if(selectCurent==options[i]){
    			option.selected=true;
    		}
    	    selectContainer.appendChild(option);
    	  }
    	  
    	  pagination.appendChild(selectContainer);
    	  
    	   const spango = document.createElement('span');
    	   spango.classList.add('wpagebtn');
    	   spango.innerText="前往";
    	   pagination.appendChild(spango);
    	   
    	  const inputgo = document.createElement('input');
    	     inputgo.classList.add('wpagetinput');
    	     inputgo.value= activepage;
    	     inputgo.addEventListener('input', ()=> {
    	  	  const value = parseInt(inputgo.value);
    	  	   if (value >= 1 && value <= totalPages) {
    	  	     activepage = value; // 更新当前选中的页面
    	  	     if (typeof callback === 'function') {
    	  	        const result = {page:value,pageSize:pageSize};
    	  	        callback(result);
    	  	      }
    	  		}
    	     });
    	   pagination.appendChild(inputgo);
    	   
    	   const spangoend = document.createElement('span');
    	   spangoend.classList.add('wpagebtn');
    	    spangoend.innerText="页";
    	   pagination.appendChild(spangoend);
       }

[b563cfe6a2b4597ce35316ecf3e629ce.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/c9833fffe55f450c88bcab7bb8a3ce3e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，59人围观）

还没有评论，来说两句吧...

相关阅读

相关用java写一个分页查询

好的，下面是一个 Java 示例代码，实现了分页查询的功能。首先，你需要准备好数据库连接和执行 SQL 语句所需的工具。这里我们使用 JDBC 来连接数据库并执行查询。

àì夳堔傛蜴生んèń/ 2024年03月25日 07:39/ 0 赞/ 70 阅读

相关如何动手用js自己写一个分页？

实现效果 ![b563cfe6a2b4597ce35316ecf3e629ce.png][] 实现代码 function generateTableHead()

一时失言乱红尘/ 2024年03月17日 13:58/ 0 赞/ 60 阅读

相关自己动手写AsyncTask

本文依赖上一篇文章：[自己动手写消息机制][Link 1] 在javaSE中模拟Android的AsyncTask异步任务 package com

悠悠/ 2022年09月24日 01:20/ 0 赞/ 251 阅读

相关自己动手写ajax框架

闲来无事就开始琢磨怎么提高网站效率。。。。。然后就对jquery的框架很感兴趣。。本来很可惜jq没有一个定制的功能，把需要的功能提出来之后不是可以减少很多体积么。没办法

红太狼/ 2022年09月20日 09:16/ 0 赞/ 237 阅读

相关《自己动手写爬虫》笔记

《自己动手写爬虫》这本书总体介绍了整个网络爬虫由浅入深的知识体系，将爬虫中每个部分分割开来具体的细讲，非常适合新手来入门，由于之前只知道使用爬虫框架，所以一遇到一些错误或者想调

骑猪看日落/ 2022年05月28日 00:47/ 0 赞/ 333 阅读

相关自己动手用python写一个下载器

今天用chrome下载[ubuntu系统iso][ubuntu_iso]的时候非常慢（事实上用chrome下载什么都经常异常的慢），但是又没有安装迅雷（也不想），于是打算自己用

落日映苍穹つ/ 2022年05月24日 23:51/ 0 赞/ 404 阅读

相关自己动手写操作系统

按照于渊的自己动手写操作系统，开始搭建环境。但是后面的程序需要在实模式下的dos下面跑，不能再x86下面跑。于是我开始寻找各种软件。先下载了个pc-dos，参照前面一篇。然后下

「爱情、让人受尽委屈。」/ 2022年05月21日 13:30/ 0 赞/ 260 阅读

相关自己动手写操作系统

《自己动手写操作系统》读后感 [http://blog.csdn.net/zgh1988/article/details/7059936][htt

左手的ㄟ右手/ 2022年05月21日 12:39/ 0 赞/ 270 阅读

相关造个轮子 | 自己动手写一个Redis

最近学习了Redis，对其内部结构较为感兴趣，为了进一步了解其运行原理，我打算自己动手用C++写一个redis。这是我第一次造轮子，所以纪念一下 ^ \_ ^。 [源码git

阳光穿透心脏的1/2处/ 2022年03月07日 13:46/ 0 赞/ 300 阅读

相关自己写的一个分页控件(WinForm)

　　找来找去没找个轻量级的分页控件,只好自己写一个凑合着先用。先看效果图：　　![a.jpg][]　　　　控件的功能很简单，点击控件的几个按钮、捕获 Item\_Cli

朱雀/ 2021年12月20日 17:49/ 0 赞/ 452 阅读