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

问题描述

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

问题解答

估计题主需要的是前端分页脚本吧：

var getPageList = function(options){ if(typeof options != 'object' || !(’pageId’ in options) || !(’pageRecord’ in options)){throw Error('options Error! eg:{pageId:1, pageRecord:12, pageUrlTemplate : ’/page/{PAGE}/’}'); }; options.pageId = parseInt(options.pageId); options.pageRecord = parseInt(options.pageRecord); options.pageSize = options.pageSize || 10;options.pageUrlTemplate = options.pageUrlTemplate || '?page={PAGE}'; options.pageCount = parseInt(( options.pageRecord - 1 ) / options.pageSize ) + 1;var page = []; var firstPage = parseInt(( options.pageId - 1 ) / options.pageSize ) * options.pageSize + 1;options.getLink = options.getLink || function(pageId){return options.pageUrlTemplate.replace('{PAGE}', pageId); };page.push({name : ’首页’,style : options.pageId == 1 ? 'disabled' : '',link : options.getLink(1) }); page.push({name : ’上一页’,style : options.pageId == 1 ? 'disabled' : '',link : options.getLink(options.pageId - 1) }); for( var pageId = firstPage; pageId < firstPage + 10; pageId ++){if( pageId >= 1 && pageId <= options.pageCount ){ page.push({name : pageId,link : options.getLink(pageId),style : pageId == options.pageId ? 'active' : '' });} } page.push({name : ’下一页’,style : options.pageId == options.pageCount ? 'disabled' : '',link : options.getLink(options.pageId + 1) }); page.push({name : ’尾页’,style : options.pageId == options.pageCount ? 'disabled' : '',link : options.getLink(options.pageCount) }); page.toString = function(){return page.map(function(item){ return ’<a href='https://www.haobala.com/wenda/’ + item.link + ’' class='’ + item.style + ’'>’ + item.name + ’</a>’;}).join(''); }; return page;};getPageList({pageId:1,pageRecord:1200});/* [{'name':'首页','style':'disabled','link':'?page=1'},{'name':'上一页','style':'disabled','link':'?page=0'},{'name':1,'link':'?page=1','style':'active'},{'name':2,'link':'?page=2','style':''},{'name':3,'link':'?page=3','style':''},{'name':4,'link':'?page=4','style':''},{'name':5,'link':'?page=5','style':''},{'name':6,'link':'?page=6','style':''},{'name':7,'link':'?page=7','style':''},{'name':8,'link':'?page=8','style':''},{'name':9,'link':'?page=9','style':''},{'name':10,'link':'?page=10','style':''},{'name':'下一页','style':'','link':'?page=2'},{'name':'尾页','style':'','link':'?page=120'} ]*/’’ + getPageList({pageId:1,pageRecord:1200,pageUrlTemplate:’/category/{PAGE}/view’});/* <a href='https://www.haobala.com/category/1/view' class='disabled'>首页</a> <a href='https://www.haobala.com/category/0/view' class='disabled'>上一页</a> <a href='https://www.haobala.com/category/1/view' class='active'>1</a> <a href='https://www.haobala.com/category/2/view' class=''>2</a> <a href='https://www.haobala.com/category/3/view' class=''>3</a> <a href='https://www.haobala.com/category/4/view' class=''>4</a> <a href='https://www.haobala.com/category/5/view' class=''>5</a> <a href='https://www.haobala.com/category/6/view' class=''>6</a> <a href='https://www.haobala.com/category/7/view' class=''>7</a> <a href='https://www.haobala.com/category/8/view' class=''>8</a> <a href='https://www.haobala.com/category/9/view' class=''>9</a> <a href='https://www.haobala.com/category/10/view' class=''>10</a> <a href='https://www.haobala.com/category/2/view' class=''>下一页</a> <a href='https://www.haobala.com/category/120/view' class=''>尾页</a>*/

如果提主恰巧使用的是 AngularJS，可以下载直接使用我的开源小项目：ng-pagination。

前端直接写啊 1，2，3，4，5....点击的时候 把相应的数字如‘4’，发送到后端后端写sql语句如：select ＊ from tab limit a*10,b

这个sql应该能懂把，

注： 如果数据库数据很多的话 使用这种sql效率不高

前端根据后端需要的参数来发送请求啊，发什么参数取到对应的数据，就实现分页了，就是每次翻页都是需要发送ajax的

比如。后台进行200条每页的数据分页来传给前端，并传回来总页数。前端就可以做每页10、20、50、100等不同条数的展示。前端做个计算，把前端的页码和后台分页页码相对应。每页数据就直接在200条里面取就好了。像angular，ng-repeat='item in items.slice(page*10, 10)'。封装个指令，屡试不爽