js对象实现数据分页效果

实现数据分页效果，可以使用 JavaScript 中的对象技术。具体而言，可以将需要分页的数据存储在一个 JavaScript 对象中，并根据用户的分页请求，从对象中提取出需要的数据子集以供展示。

以下是实现对象数据分页效果的完整攻略：

1. 创建数据对象

创建一个 JavaScript 对象来存储需要分页的数据。对象中应该包含两个属性：data 和 pageSize。其中，data 是要分页的数据，以数组形式存储；pageSize 是每页显示的数据量。

let dataList = {
  data: [
    {id: 1, name: 'apple'},
    {id: 2, name: 'banana'},
    {id: 3, name: 'cherry'},
    {id: 4, name: 'durian'},
    {id: 5, name: 'elderberry'},
    {id: 6, name: 'fig'},
    {id: 7, name: 'grape'},
    {id: 8, name: 'honeydew'},
    {id: 9, name: 'inflorescence'},
    {id: 10, name: 'jujube'},
    {id: 11, name: 'kiwi'},
    {id: 12, name: 'lemon'}
  ],
  pageSize: 4
};

2. 实现数据获取方法

创建一个方法，用于从数据对象中获取指定页码的数据子集，并将其返回。该方法需要接收两个参数：pageNum 表示要获取的页码，dataList 是存储数据的对象。

let getPageData = function(pageNum, dataList) {
  pageNum = parseInt(pageNum, 10);
  let pageSize = dataList.pageSize;
  let start = (pageNum - 1) * pageSize;
  let end = start + pageSize;
  return dataList.data.slice(start, end);
};

3. 显示数据方法

在网页中显示分页数据的方法。该方法根据获取到的数据子集，以特定格式在网页中动态创建标签，并将数据子集填充到标签中。该方法需要接收两个参数：pageNum 表示要获取的页码，dataList 是存储数据的对象。

let showPage = function(pageNum, dataList) {
  let list = getPageData(pageNum, dataList);
  let html = '';
  for(let i = 0, len = list.length; i < len; i++){
    html += '<li>' + list[i].name + '</li>';
  }
  document.getElementById('list').innerHTML = html;
};

4. 页面事件监听

在网页加载完成后，需要为“上一页”和“下一页”按钮添加事件监听器，当按钮被点击时，调用 showPage 方法重新渲染当前页的数据。

示例 1：上一页/下一页按钮事件监听

document.getElementById('prev').addEventListener('click', function() {
  currentPage = Math.max(currentPage - 1, 1);
  showPage(currentPage, dataList);
});
document.getElementById('next').addEventListener('click', function() {
  currentPage = Math.min(currentPage + 1, totalPages);
  showPage(currentPage, dataList);
});

示例 2：选页下拉菜单事件监听

let select = document.getElementById('select');
select.addEventListener('change', function() {
  let pageNum = select.value;
  showPage(pageNum, dataList);
});

这里以两种方式为例演示了如何通过 JavaScript 对象来实现数据分页效果。在实践中，还可以使用其他技术来扩展分页功能，比如使用 AJAX 技术动态获取数据，使用动画特效来实现瀑布流布局等。