// JavaScript prototype（原型对象） function Pagination (total, pageSize, pageCurrent) { this.total = total; this.pageSize = pageSize; this.pageCurrent = pageCurrent; this.page = Math.ceil(this.total/Number(this.pageSize)); // 根据total，pageSize，pageCurrent动态设置分页数，及当前选中项 Pagination.prototype.renderDom = function () { // 分页的HTML let ulHtml = document.querySelector('.pagination'); // 创建 << 节点 let li1 = document.createElement('li'); let a1 = document.createElement('a'); let text1 = document.createTextNode('<<'); a1.appendChild(text1); li1.appendChild(a1); ulHtml.appendChild(li1); a1.setAttribute('class', 'prevDom'); // a1.setAttribute('onclick', 'handlePrevClick()') // 创建 分页页数 节点 for (let i = 0; i < this.page; i++) { let li = document.createElement('li'); let a = document.createElement('a'); let text = document.createTextNode(i+1); a.appendChild(text); li.appendChild(a); ulHtml.appendChild(li); if (i === Number(this.pageCurrent)) { a.setAttribute('class', 'active'); a.setAttribute('onclick', 'handleClick(this)'); // 创建 >> 节点 let li2 = document.createElement('li'); let a2 = document.createElement('a'); let text2 = document.createTextNode('>>'); a2.appendChild(text2); li2.appendChild(a2); ulHtml.appendChild(li2); a2.setAttribute('class', 'lastDom'); // a.setAttribute('onclick', 'handleLastClick()'); // 上一页 Pagination.prototype.prevPage = function () { // 点击上一页，页数减1，若当前页数为1则return let p = Number(this.pageCurrent); if (p === 1 || (p - 1) < 1) { return; if ((p - 1) >= 1) { let _p = p - 1; let aNodeList = document.querySelectorAll('.pagination li a'); for (let i = 0; i < aNodeList.length; i++) { // 若为上一页/下一页元素，不涉及添加active类 if (i === 0 || i === aNodeList.length) { continue; if (aNodeList[i].text == _p) { aNodeList[i].setAttribute('class', 'active'); this.pageCurrent = _p; } else { aNodeList[i].setAttribute('class', ''); // 下一页 Pagination.prototype.lastPage = function () { debugger // 点击上一页，页数减1，若当前页数为1则return let p = Number(this.pageCurrent); if (p === this.page || (p + 1) > this.page) { return; if ((p + 1) <= this.page) { let _p = p + 1; let aNodeList = document.querySelectorAll('.pagination li a'); for (let i = 0; i < aNodeList.length; i++) { // 若为上一页/下一页元素，不涉及添加active类 if (i === 0 || i === aNodeList.length) { continue; if (aNodeList[i].text == _p) { aNodeList[i].setAttribute('class', 'active'); this.pageCurrent = _p; } else { aNodeList[i].setAttribute('class', ''); // 点击分页按钮 Pagination.prototype.clickPage = function (elem) { let _p = Number(this.pageCurrent); if (elem.text == '<<' || elem.text == '>>' || this.text == this.pageCurrent) { return; let aNodeList = document.querySelectorAll('.pagination li a'); for (let i = 0; i < aNodeList.length; i++) { // 若为上一页/下一页元素，不涉及添加active类 if (i === 0 || i === aNodeList.length) { continue; aNodeList[i].setAttribute('class', ''); elem.setAttribute('class', 'active'); this.pageCurrent = elem.text; // 创建分页对象 let pageCons = new Pagination(105, 10, 2); // 根据参数渲染分页列表 pageCons.renderDom(); // 上一页事件 document.querySelector('.pagination a.prevDom').onclick = function () { pageCons.prevPage(); // 下一页事件 document.querySelector('.pagination a.lastDom').onclick = function () { pageCons.lastPage(); // 每页事件 function handleClick (elem) { pageCons.clickPage(elem); Document </ul></div><script> // JavaScript prototype（原型对象） function Pagination (total, pageSize, pageCurrent) { this.total = total; this.pageSize = pageSize; t... function Pagination(_ref) { this.id = _ref.id; //分页组件挂载的 DOM 节点 this.curPage = _ref.curPage || 1; //初始页码 this.draw = _ref.draw; // 初始化分页请求次数 this.pageSize = _ref.pageSize | //以下将以jquery.ajax为例，演示一个异步分页 $.getJSON('test/demo1.json', {curr: 6}, function(res){ //从第6页开始请求。返回的json格式可以任意定义 laypage({ cont: 'page1', //容器。值支持id名、原生 dom 对象，jquery对象。【如该容器为】：<div id=page1></div> pages: res.p * @param {*} currentPage 当前点击的页码 * @param {*} pagenum 总页码 * @param {*} selectorLength 中间显示多少个 * @param {*} dom Id 需要渲染的 dom 的Id function createPageSelector(currentPage,pagenum,selectorLength, dom Id){ //添加样式后打印时一页只打印一个div中内容，一页打印不下的内容会在下一页中继续打印，当一个div内容结束后不管该页剩余空白多少都会跳至下页打印下一个div内容（ 实现 WORD分页效果） <div class="div1" style="page-break-after: always;"> <div class="div2" style="page- 今天用 DOM 实现 了增删改和分页在这里与大家分享由于时间问题仿百度分页还没有 实现 请大家等待。 &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;addUser.html&lt;/title&gt; 第二步编写js代码用于分页的具体设置 我们线举例示范我们如何 使用 Paginatgion分页插件。 使用 方法十分简单，通过获取到我们分页导航栏的 dom 元素，然后打点调用pagination方法即可。 分页导航栏如下