写一个前端分页

好的，以下是一个简单的前端分页的示例代码：

HTML：

<div id="data"></div>
<div id="pagination"></div>

JavaScript：

var data = []; // 假设这里存储了所有数据
var currentPage = 1; // 当前页码
var pageSize = 10; // 每页显示的数据条数
var totalPage = Math.ceil(data.length / pageSize); // 总页数

// 渲染当前页的数据
function renderData() {
  var start = (currentPage - 1) * pageSize; // 当前页的起始数据索引
  var end = start + pageSize; // 当前页的结束数据索引
  var html = '';
  for (var i = start; i < end && i < data.length; i++) {
    html += '<div>' + data[i] + '</div>';
  }
  document.getElementById('data').innerHTML = html;
}

// 渲染分页导航
function renderPagination() {
  var html = '';
  if (currentPage > 1) {
    html += '<a href="javascript:;" onclick="prevPage()">上一页</a>';
  }
  for (var i = 1; i <= totalPage; i++) {
    if (i == currentPage) {
      html += '<span>' + i + '</span>';
    } else {
      html += '<a href="javascript:;" onclick="goToPage(' + i + ')">' + i + '</a>';
    }
  }
  if (currentPage < totalPage) {
    html += '<a href="javascript:;" onclick="nextPage()">下一页</a>';
  }
  document.getElementById('pagination').innerHTML = html;
}

// 上一页
function prevPage() {
  currentPage--;
  renderData();
  renderPagination();
}

// 下一页
function nextPage() {
  currentPage++;
  renderData();
  renderPagination();
}

// 跳转到指定页
function goToPage(page) {
  currentPage = page;
  renderData();
  renderPagination();
}

// 初始化渲染
renderData();
renderPagination();

以上代码中，`data` 存储了所有的数据，`currentPage` 表示当前页码，`pageSize` 表示每页显示的数据条数，`totalPage` 表示总页数。`renderData` 函数用来渲染当前页的数据，`renderPagination` 函数用来渲染分页导航，`prevPage` 函数用来翻到上一页，`nextPage` 函数用来翻到下一页，`goToPage` 函数用来跳转到指定页。在页面加载时，我们需要调用 `renderData` 和 `renderPagination` 函数来进行初始化渲染。