angularjs表格分頁(yè)功能詳解
接上一次,這次主要介紹表格分頁(yè)功能,由于項(xiàng)目需要這個(gè)案例是關(guān)于前端分頁(yè)的方式,現(xiàn)在很少會(huì)這么用了,但如有需要可以參考其中的思路
html:
1.通過(guò)UL來(lái)展示頁(yè)標(biāo),其中每個(gè)頁(yè)標(biāo)的li是通過(guò)異步加載從獲取到不同的表格數(shù)據(jù)來(lái)動(dòng)態(tài)生成的。
<div class="pagination"> <ul style="float:right"> <li id="previous"><a href="">上一頁(yè)</a></li> <li><!--用于頁(yè)標(biāo)的顯示 --> <ul id="page_num_all"> </ul> </li> <li id="next"><a href="" style="border:1px solid #ddd;float:right">下一頁(yè)</a></li> </ul> <span> 當(dāng)前為第<span class="num" id="current_page"></span>頁(yè),總共<span class="num" id="page_all"></span>頁(yè) </span> </div>
js:
1.首先需要設(shè)置每頁(yè)想要顯示的條數(shù),通過(guò)選取頁(yè)面元素來(lái)確定本次生成的總條數(shù),以及當(dāng)前所在的頁(yè)數(shù)(為跳轉(zhuǎn)做準(zhǔn)備)
2.如果總頁(yè)數(shù)大于生成的當(dāng)前頁(yè)數(shù),則繼續(xù)生成下一頁(yè)直到完畢后,將角標(biāo)添加到頁(yè)面中
3.將所有的表格數(shù)據(jù)隱藏,只顯示一開(kāi)始設(shè)置的第一頁(yè)中的5條
4.跳轉(zhuǎn)頁(yè)面功能,tab_page()通過(guò)傳入的index(頁(yè)數(shù))*顯示的條數(shù)來(lái)確定截取tr的開(kāi)始位置和結(jié)束位置,然后將所有的tr隱藏,只顯示該范圍內(nèi)的tr(display:“”);
5.上一頁(yè)下一頁(yè)和跳轉(zhuǎn)功能,獲取當(dāng)前頁(yè)的數(shù)字,注意判斷是否為第一或最后一頁(yè),將其作為index傳入跳轉(zhuǎn)功能中即可
function table_page(){ var show_page=5;//每頁(yè)顯示的條數(shù) var page_all=$("#page").children().size();//總條數(shù) var current_page=1;//當(dāng)前頁(yè) // console.log(page_all); var page_num=Math.ceil(page_all/show_page);//總頁(yè)數(shù) var current_num=0;//用于生成頁(yè)標(biāo)的計(jì)數(shù)器 var li="";//頁(yè)標(biāo)元素 while(page_num>current_num){//循環(huán)生成頁(yè)標(biāo)元素 li+='<li class="page_num"><a href="javasctip:(0)">'+(current_num+1)+'</a></li>'; current_num++; } $("#page_num_all").html(li);//添加頁(yè)標(biāo)到頁(yè)面 $('#page tr').css('display', 'none');//設(shè)置隱藏 $('#page tr').slice(0, show_page).css('display', '');//設(shè)置顯示 $("#current_page").html(" "+current_page+" ");//顯示當(dāng)前頁(yè) $("#page_all").html(" "+page_num+" ");//顯示總頁(yè)數(shù) $("#previous").click(function(){//上一頁(yè) var new_page=parseInt($("#current_page").text())-1; if(new_page>0){ $("#current_page").html(" "+new_page+" "); tab_page(new_page); } }); $("#next").click(function(){//下一頁(yè) var new_page=parseInt($("#current_page").text())+1;//當(dāng)前頁(yè)標(biāo) if(new_page<=page_num){//判斷是否為最后或第一頁(yè) $("#current_page").html(" "+new_page+" "); tab_page(new_page); } }); $(".page_num").click(function(){//頁(yè)標(biāo)跳轉(zhuǎn) var new_page=parseInt($(this).text()); tab_page(new_page); }); function tab_page(index){//切換對(duì)應(yīng)頁(yè)標(biāo)的頁(yè)面 var start=(index-1)*show_page;//開(kāi)始截取的頁(yè)標(biāo) var end=start+show_page;//截取個(gè)數(shù) $('#page').children().css('display', 'none').slice(start, end).css('display', ''); current_page=index; $("#current_page").html(" "+current_page+" "); } } table_page();
以上就是表格的前端分頁(yè)方法和頁(yè)數(shù),頁(yè)標(biāo)等跳轉(zhuǎn)方式的方法,請(qǐng)結(jié)合第一章中的數(shù)據(jù)測(cè)試。
- angularjs實(shí)現(xiàn)的前端分頁(yè)控件示例
- ANGULARJS中使用JQUERY分頁(yè)控件
- AngularJS實(shí)現(xiàn)分頁(yè)顯示數(shù)據(jù)庫(kù)信息
- 基于Angularjs實(shí)現(xiàn)分頁(yè)功能
- Angularjs分頁(yè)查詢的實(shí)現(xiàn)
- 學(xué)習(xí)Angularjs分頁(yè)指令
- AngularJS 與Bootstrap實(shí)現(xiàn)表格分頁(yè)實(shí)例代碼
- 詳解angularjs結(jié)合pagination插件實(shí)現(xiàn)分頁(yè)功能
- Angularjs 實(shí)現(xiàn)分頁(yè)功能及示例代碼
- AngularJs分頁(yè)插件使用詳解
相關(guān)文章
詳解Angular的數(shù)據(jù)顯示優(yōu)化處理
本文主要對(duì)Angular的數(shù)據(jù)顯示優(yōu)化處理進(jìn)行詳細(xì)介紹,具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2016-12-12AngularJS學(xué)習(xí)筆記之TodoMVC的分析
這篇文章主要介紹了AngularJS學(xué)習(xí)筆記之TodoMVC的分析的相關(guān)資料,需要的朋友可以參考下2015-02-02ionic4+angular7+cordova上傳圖片功能的實(shí)例代碼
ionic是一個(gè)垮平臺(tái)開(kāi)發(fā)框架,可通過(guò)web技術(shù)開(kāi)發(fā)出多平臺(tái)的應(yīng)用。這篇文章主要介紹了ionic4+angular7+cordova上傳圖片功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-06-06AngularJS基礎(chǔ) ng-keyup 指令簡(jiǎn)單示例
本文主要介紹AngularJS ng-keyup 指令,這里對(duì)ng-keyup指令的基本資料進(jìn)行了整理,并且附有代碼示例,有需要的朋友可以看一下2016-08-08angularJs提交文本框數(shù)據(jù)到后臺(tái)的方法
今天小編就為大家分享一篇angularJs提交文本框數(shù)據(jù)到后臺(tái)的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10