你们怎样实现前端分页的？

Question

后端的nodejs我能够实现分页但是前端的代码如何写呀？

Answer 1

估计题主需要的是前端分页脚本吧：var getPageList = function(options){&nbsp; &nbsp; if(typeof options != "object" || !('pageId' in options) || !('pageRecord' in options)){&nbsp; &nbsp; &nbsp; &nbsp; throw Error("options Error! eg:{pageId:1, pageRecord:12, pageUrlTemplate : '/page/{PAGE}/'}");&nbsp; &nbsp; };&nbsp; &nbsp; options.pageId = parseInt(options.pageId);&nbsp; &nbsp; options.pageRecord = parseInt(options.pageRecord);&nbsp; &nbsp; options.pageSize = options.pageSize || 10;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; options.pageUrlTemplate = options.pageUrlTemplate || "?page={PAGE}";&nbsp; &nbsp; options.pageCount = parseInt(( options.pageRecord - 1 ) / options.pageSize ) + 1;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; var page = [];&nbsp; &nbsp; var firstPage = parseInt(( options.pageId - 1 ) / options.pageSize ) * options.pageSize + 1;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; options.getLink = options.getLink || function(pageId){&nbsp; &nbsp; &nbsp; &nbsp; return options.pageUrlTemplate.replace("{PAGE}", pageId);&nbsp; &nbsp; };&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; page.push({&nbsp; &nbsp; &nbsp; &nbsp; name&nbsp; &nbsp; : '首页',&nbsp; &nbsp; &nbsp; &nbsp; style&nbsp; &nbsp;: options.pageId == 1 ? "disabled" : "",&nbsp; &nbsp; &nbsp; &nbsp; link&nbsp; &nbsp; : options.getLink(1)&nbsp; &nbsp; });&nbsp; &nbsp; page.push({&nbsp; &nbsp; &nbsp; &nbsp; name&nbsp; &nbsp; : '上一页',&nbsp; &nbsp; &nbsp; &nbsp; style&nbsp; &nbsp;: options.pageId == 1 ? "disabled" : "",&nbsp; &nbsp; &nbsp; &nbsp; link&nbsp; &nbsp; : options.getLink(options.pageId - 1)&nbsp; &nbsp; });&nbsp; &nbsp; for( var pageId = firstPage; pageId < firstPage + 10; pageId ++){&nbsp; &nbsp; &nbsp; &nbsp; if( pageId >= 1 && pageId <= options.pageCount ){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; page.push({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name&nbsp; &nbsp; : pageId,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; link&nbsp; &nbsp; : options.getLink(pageId),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style&nbsp; &nbsp;: pageId == options.pageId ? "active" : ""&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; page.push({&nbsp; &nbsp; &nbsp; &nbsp; name&nbsp; &nbsp; : '下一页',&nbsp; &nbsp; &nbsp; &nbsp; style&nbsp; &nbsp;: options.pageId == options.pageCount ? "disabled" : "",&nbsp; &nbsp; &nbsp; &nbsp; link&nbsp; &nbsp; : options.getLink(options.pageId + 1)&nbsp; &nbsp; });&nbsp; &nbsp; page.push({&nbsp; &nbsp; &nbsp; &nbsp; name&nbsp; &nbsp; : '尾页',&nbsp; &nbsp; &nbsp; &nbsp; style&nbsp; &nbsp;: options.pageId == options.pageCount ? "disabled" : "",&nbsp; &nbsp; &nbsp; &nbsp; link&nbsp; &nbsp; : options.getLink(options.pageCount)&nbsp; &nbsp; });&nbsp; &nbsp; page.toString = function(){&nbsp; &nbsp; &nbsp; &nbsp; return page.map(function(item){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return '<a href="' + item.link + '" class="' + item.style + '">' + item.name + '</a>';&nbsp; &nbsp; &nbsp; &nbsp; }).join("");&nbsp; &nbsp; };&nbsp; &nbsp; return page;};getPageList({pageId:1,pageRecord:1200});/*&nbsp; &nbsp; [&nbsp; &nbsp; &nbsp; &nbsp; {"name":"首页","style":"disabled","link":"?page=1"},&nbsp; &nbsp; &nbsp; &nbsp; {"name":"上一页","style":"disabled","link":"?page=0"},&nbsp; &nbsp; &nbsp; &nbsp; {"name":1,"link":"?page=1","style":"active"},&nbsp; &nbsp; &nbsp; &nbsp; {"name":2,"link":"?page=2","style":""},&nbsp; &nbsp; &nbsp; &nbsp; {"name":3,"link":"?page=3","style":""},&nbsp; &nbsp; &nbsp; &nbsp; {"name":4,"link":"?page=4","style":""},&nbsp; &nbsp; &nbsp; &nbsp; {"name":5,"link":"?page=5","style":""},&nbsp; &nbsp; &nbsp; &nbsp; {"name":6,"link":"?page=6","style":""},&nbsp; &nbsp; &nbsp; &nbsp; {"name":7,"link":"?page=7","style":""},&nbsp; &nbsp; &nbsp; &nbsp; {"name":8,"link":"?page=8","style":""},&nbsp; &nbsp; &nbsp; &nbsp; {"name":9,"link":"?page=9","style":""},&nbsp; &nbsp; &nbsp; &nbsp; {"name":10,"link":"?page=10","style":""},&nbsp; &nbsp; &nbsp; &nbsp; {"name":"下一页","style":"","link":"?page=2"},&nbsp; &nbsp; &nbsp; &nbsp; {"name":"尾页","style":"","link":"?page=120"}&nbsp; &nbsp; ]*/'' + getPageList({pageId:1,pageRecord:1200,pageUrlTemplate:'/category/{PAGE}/view'});/*&nbsp; &nbsp; <a href="/category/1/view" class="disabled">首页</a>&nbsp; &nbsp; <a href="/category/0/view" class="disabled">上一页</a>&nbsp; &nbsp; <a href="/category/1/view" class="active">1</a>&nbsp; &nbsp; <a href="/category/2/view" class="">2</a>&nbsp; &nbsp; <a href="/category/3/view" class="">3</a>&nbsp; &nbsp; <a href="/category/4/view" class="">4</a>&nbsp; &nbsp; <a href="/category/5/view" class="">5</a>&nbsp; &nbsp; <a href="/category/6/view" class="">6</a>&nbsp; &nbsp; <a href="/category/7/view" class="">7</a>&nbsp; &nbsp; <a href="/category/8/view" class="">8</a>&nbsp; &nbsp; <a href="/category/9/view" class="">9</a>&nbsp; &nbsp; <a href="/category/10/view" class="">10</a>&nbsp; &nbsp; <a href="/category/2/view" class="">下一页</a>&nbsp; &nbsp; <a href="/category/120/view" class="">尾页</a>*/如果提主恰巧使用的是 AngularJS，可以下载直接使用我的开源小项目：ng-pagination。