jQuery从零开始做一个分页组件功能示例

下面我将详细讲解“jQuery从零开始做一个分页组件功能示例”的完整攻略：

1. 概述

分页功能是前端开发中常用的功能之一，利用它可以将大量的数据分页显示。而jQuery是一款优秀的JavaScript库，它可以极大地简化我们开发的工作量。在这个示例中，我们将用jQuery来实现一个简单的分页组件。

2. 实现步骤

2.1 HTML结构

首先我们需要先创建一个基本的HTML结构，用于显示分页列表和相关数据。示例中我们将分页组件显示在id为“pagination”的元素内部，结构如下：

<div id="pagination">
  <ul class="pagination-list"></ul>
  <div class="pagination-info"></div>
</div>

其中，.pagination-list用于显示分页按钮，.pagination-info用于显示相关信息，如当前页数、总条数等。

2.2 初始化参数

在我们开始编写jQuery代码之前，需要先确定一些参数，如每页显示的数量、起始页码等。在这个示例中，我们假定每页显示10条，起始页码为1。

var pageSize = 10; // 每页显示数量
var currentPage = 1; // 当前页码
var totalPage = 0; // 总页数
var totalRecord = 0; // 总记录数

2.3 发送AJAX请求

将要分页显示的数据存储到服务端，我们需要先通过AJAX请求获取数据。这里我们假定服务端返回的数据格式如下：

{
  "total": 50, // 总记录数
  "list": [{}, {}, ...] // 当前页的记录
}

请求示例：

$.ajax({
  url: '/list',
  type: 'GET',
  data: {
    page: currentPage,
    pageSize: pageSize
  },
  success: function(data) {
    // 处理数据
  }
});

2.4 处理数据

在成功获取数据之后，我们需要对数据进行处理，计算总记录数及总页数，并填充到HTML结构中相应的位置。

totalRecord = data.total; // 总记录数
totalPage = Math.ceil(totalRecord / pageSize); // 总页数
$('.pagination-info').text(`共 ${totalRecord} 条记录，共 ${totalPage} 页`);

2.5 渲染分页按钮

计算完成总页数之后，我们需要根据当前页码和总页数渲染出分页按钮。在这个示例中，我们使用for循环来生成分页按钮。

var html = '';
var start = 1;
var end = totalPage;

if(totalPage > 10) {
  if(currentPage > 5) {
    start = currentPage - 4;
  }

  if(currentPage < totalPage - 4) {
    end = currentPage + 4;
  }

  if(currentPage <= 5) {
    end = 10;
  }

  if(currentPage >= totalPage - 4) {
    start = totalPage - 9;
  }
}

for(var i=start; i<=end; i++) {
  if(i == currentPage) {
    html += `<li class="active">${i}</li>`;
  } else {
    html += `<li>${i}</li>`;
  }
}

$('.pagination-list').html(html);

2.6 绑定事件

在渲染完成分页按钮之后，我们需要添加事件监听，以便用户点击按钮时能够触发相应的操作。在这个示例中，我们添加了两个事件：

1. 点击分页按钮，切换当前页码并重新渲染分页按钮。
2. 点击首页、上一页、下一页、尾页按钮，同样切换当前页码并重新渲染分页按钮。

事件示例：

// 点击分页按钮
$('.pagination-list').on('click', 'li', function() {
  var page = parseInt($(this).text());
  if(isNaN(page)) return false;
  currentPage = page;
  renderPage();
});

// 点击首页、上一页、下一页、尾页按钮
$('.pagination-info').on('click', 'a', function() {
  var action = $(this).data('action');
  switch(action) {
    case 'first':
      currentPage = 1;
      break;
    case 'prev':
      currentPage = currentPage > 1 ? currentPage - 1 : currentPage;
      break;
    case 'next':
      currentPage = currentPage < totalPage ? currentPage + 1 : currentPage;
      break;
    case 'last':
      currentPage = totalPage;
      break;
    default:
      break;
  }
  renderPage();
});

2.7 重新渲染分页按钮

最后，我们需要封装一个函数renderPage()，对分页按钮进行重新渲染。

function renderPage() {
  $.ajax({
    url: '/list',
    type: 'GET',
    data: {
      page: currentPage,
      pageSize: pageSize
    },
    success: function(data) {
      totalRecord = data.total;
      totalPage = Math.ceil(totalRecord / pageSize);
      $('.pagination-info').text(`共 ${totalRecord} 条记录，共 ${totalPage} 页`);

      var html = '';
      var start = 1;
      var end = totalPage;

      if(totalPage > 10) {
        if(currentPage > 5) {
          start = currentPage - 4;
        }

        if(currentPage < totalPage - 4) {
          end = currentPage + 4;
        }

        if(currentPage <= 5) {
          end = 10;
        }

        if(currentPage >= totalPage - 4) {
          start = totalPage - 9;
        }
      }

      for(var i=start; i<=end; i++) {
        if(i == currentPage) {
          html += `<li class="active">${i}</li>`;
        } else {
          html += `<li>${i}</li>`;
        }
      }

      $('.pagination-list').html(html);
    }
  });
}

3. 示例说明

3.1 分页列表样式

这个示例中分页列表的样式比较简单，只是以普通列表的方式展现。如果需要改变分页列表的样式，可以使用CSS来进行样式的调整。

.pagination-list {
  margin: 0;
  padding: 0;

  li {
    display: inline-block;
    padding: 5px 10px;
    margin-right: 5px;
    border: 1px solid #ccc;
    cursor: pointer;

    &.active {
      background: #fff;
      border-color: #666;
    }
  }
}

3.2 优化分页按钮数量

在渲染分页按钮时，如果总页数太多，则会导致分页按钮过多而显得臃肿。为了解决这个问题，我们可以限制每次最多显示10个分页按钮，并根据当前页码来动态调整展现的分页按钮。如下所示：

var start = 1;
var end = totalPage;

if(totalPage > 10) {
  if(currentPage > 5) {
    start = currentPage - 4;
  }

  if(currentPage < totalPage - 4) {
    end = currentPage + 4;
  }

  if(currentPage <= 5) {
    end = 10;
  }

  if(currentPage >= totalPage - 4) {
    start = totalPage - 9;
  }
}

for(var i=start; i<=end; i++) {
  if(i == currentPage) {
    html += `<li class="active">${i}</li>`;
  } else {
    html += `<li>${i}</li>`;
  }
}

这样就可以保证分页按钮的数量不会过多，同时又能满足用户的需求。