後端的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="' + 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="/category/1/view" class="disabled">首页</a> <a href="/category/0/view" class="disabled">上一页</a> <a href="/category/1/view" class="active">1</a> <a href="/category/2/view" class="">2</a> <a href="/category/3/view" class="">3</a> <a href="/category/4/view" class="">4</a> <a href="/category/5/view" class="">5</a> <a href="/category/6/view" class="">6</a> <a href="/category/7/view" class="">7</a> <a href="/category/8/view" class="">8</a> <a href="/category/9/view" class="">9</a> <a href="/category/10/view" class="">10</a> <a href="/category/2/view" class="">下一页</a> <a href="/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)"。封裝個指令,屢試不爽
估計題主需要的是前端分頁腳本吧:
如果提主恰巧使用的是 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)"。封裝個指令,屢試不爽