JQUERY写一个分页

对于一个分页的实现，我们需要考虑以下几个方面：

1. 分页的总页数是多少？

2. 每一页需要显示多少条数据？

3. 当前页是第几页？

4. 用户如何切换到下一页或上一页？

5. 用户如何跳转到指定的某一页？

下面是一个基于jQuery实现的分页示例代码：

HTML代码：

<div class="pagination">
  <ul>
    <li class="prev"><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li class="next"><a href="#">&raquo;</a></li>
  </ul>
</div>

CSS代码：

.pagination {
  display: inline-block;
  margin: 20px 0;
}

.pagination ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pagination li {
  display: inline-block;
}

.pagination li a {
  color: #666;
  display: block;
  padding: 5px 10px;
  text-decoration: none;
}

.pagination li.active a {
  color: #fff;
  background-color: #337ab7;
}

.pagination li.disabled a {
  color: #ccc;
  cursor: not-allowed;
}

jQuery代码：

$(function() {

  // 定义每一页显示的数据条数和当前页码
  var pageSize = 10;
  var currentPage = 1;

  // 获取数据总条数，并计算总页数
  var total = 100;
  var totalPages = Math.ceil(total / pageSize);

  // 渲染分页控件
  renderPagination();

  // 点击页码切换到相应的页面
  $('.pagination').on('click', 'a', function(e) {
    e.preventDefault();
    var $this = $(this);

    if ($this.parent().hasClass('disabled') || $this.parent().hasClass('active')) {
      return;
    }

    if ($this.parent().hasClass('prev')) {
      currentPage--;
    } else if ($this.parent().hasClass('next')) {
      currentPage++;
    } else {
      currentPage = parseInt($this.text());
    }

    renderPagination();
  });

  // 渲染分页控件
  function renderPagination() {
    var html = '';

    // 渲染上一页按钮
    if (currentPage == 1) {
      html += '<li class="prev disabled"><a href="#">&laquo;</a></li>';
    } else {
      html += '<li class="prev"><a href="#">&laquo;</a></li>';
    }

    // 渲染数字按钮
    for (var i = 1; i <= totalPages; i++) {
      if (i == currentPage) {
        html += '<li class="active"><a href="#">' + i + '</a></li>';
      } else {
        html += '<li><a href="#">' + i + '</a></li>';
      }
    }

    // 渲染下一页按钮
    if (currentPage == totalPages) {
      html += '<li class="next disabled"><a href="#">&raquo;</a></li>';
    } else {
      html += '<li class="next"><a href="#">&raquo;</a></li>';
    }

    $('.pagination ul').html(html);
  }

});

在这个示例中，我们定义了每一页显示的数据条数和当前页码，并通过计算总数据条数和每一页显示的数据条数来得到总页数。然后，我们渲染了一个分页控件，包括上一页、数字按钮和下一页三部分。当用户点击上一页或下一页按钮时，我们更新当前页码并重新渲染分页控件。当用户点击数字按钮时，我们跳转到相应的页码。最后，我们使用CSS样式来美化分页控件。