JS简单实现分页显示

冷不防 2022-04-05 13:28 336阅读 0赞

> 完整代码源码可以在[这里][Link 1]下载

## 1.在 HTML文件建立列表目标节点和翻页器目标节点 ##

## 2.JS ##

### 分页控制器函数封装 ###

/** * * @param {列表渲染目标节点} listTarget * @param {页面控制器目标节点} navTarget * @param {列表项渲染函数} renderFunc * @param {每页项数} pageSize * @param {列表数据源} dataSourse */
    function renderPageNav(listTarget, navTarget, renderFunc, pageSize, dataSourse) { 
      // 总页数
      const pageLength = Math.ceil(dataSourse.length / pageSize);
    
      //页面控制器
      const pageController = { 
        cur: 0,
        toPage: function (index) { 
          listTarget.innerHTML = '';
          for (let i = (index - 1) * pageSize; i < index * pageSize; i++) { 
            if (dataSourse[i]) { 
              listTarget.appendChild(renderFunc(dataSourse[i]));
            } else { 
              break;
            }
          }
          this.cur = index;
          console.log(this.cur)
        },
        next: function () {  this.toPage(this.cur + 1) },
        prev: function () {  this.toPage(this.cur - 1) },
        start: function () {  this.toPage(1) },
        end: function () {  this.toPage(pageLength) }
      }
      // 页码按钮渲染
      const pageBTN = index => { 
        const btn = document.createElement('b');
        btn.innerHTML = index;
        btn.onclick = () => pageController.toPage(index);
        return btn
      };
    
      // 第一页按钮
      const startBTN = document.createElement('b');
      startBTN.innerHTML = '《';
      startBTN.onclick = () => { 
        pageController.start()
      }
      navTarget.appendChild(startBTN)
    
      // 上一页按钮
      const prevBTN = document.createElement('b');
      prevBTN.innerHTML = '<';
      prevBTN.onclick = () => { 
        if (pageController.cur != 1)
          pageController.prev()
      }
      navTarget.appendChild(prevBTN)
    
      // 页面跳转按钮 
      const page = document.createElement('span');
      for (let i = 1; i <= pageLength; i++) { 
        page.appendChild(pageBTN(i))
      }
    
      navTarget.appendChild(page)
    
      // 下一页按钮
      const nextBTN = document.createElement('b');
      nextBTN.innerHTML = '>';
      nextBTN.onclick = () => { 
        if (pageController.cur != pageLength) { 
          pageController.next()
        }
      }
      navTarget.appendChild(nextBTN)
      // 尾页按钮
      const endBTN = document.createElement('b');
      endBTN.innerHTML = '》';
      endBTN.onclick = () => { 
        if (pageController.cur != pageLength) { 
          pageController.end()
        }
      }
      navTarget.appendChild(endBTN)
    
    }

## 列表项渲染函数 ##

//渲染单个Item
    function renderItem(item) { 
      const aItem = document.createElement("div");
      const inner = `<div class='card'> <p class="card__text"> ${ item.desc} </p> </div>`;
      aItem.innerHTML = inner;
      return aItem;
    }

// 这里存后台发来的数据
    var data = [
      { 
        desc: "11111"
      },
      { 
        desc: "22222"
      },
      { 
        desc: "3333"
      },
      { 
        desc: "44444"
      },
      { 
        desc: "55555"
      },
      { 
        desc: "66666"
      },
      { 
        desc: "77777"
      },
      { 
        desc: "8888"
      },
      { 
        desc: "9999"
      },
      { 
        desc: "aaaaa"
      }
    ];

// 列表渲染目标节点
    const listTarget = document.querySelector("#target");
    // 导航栏渲染目标节点
    const navTarget = document.querySelector("#nav");

## 运行分页器函数 ##

renderPageNav(listTarget, navTarget, renderItem, 3, data);

[Link 1]: https://github.com/YooHoeh/JS-PageController