如何使用 JavaScript 实现一个简单的网页分页效果? - 项越资源网-html css js 用法分享社区-开发交流-项越资源网

如何使用 JavaScript 实现一个简单的网页分页效果?

/* 如何使用 JavaScript 实现一个简单的网页分页效果? */
var page = {
  currentPage: 1,
  pageSize: 10,
  totalPage: 0,
  totalCount: 0,
  init: function(totalCount) {
    this.totalCount = totalCount;
    this.totalPage = Math.ceil(this.totalCount / this.pageSize);
  },
  go: function(page) {
    if (page < 1) {
      page = 1;
    }
    if (page > this.totalPage) {
      page = this.totalPage;
    }
    this.currentPage = page;
    this.render();
  },
  render: function() {
    var start = (this.currentPage - 1) * this.pageSize;
    var end = start + this.pageSize;
    var html = '';
    for (var i = start; i < end; i++) {
      html += '<li>' + i + '</li>';
    }
    document.getElementById('list').innerHTML = html;
  }
};
page.init(100);
page.render();
请登录后发表评论

    没有回复内容