快捷導(dǎo)航

angularjs表格分頁(yè)功能詳解

更新時(shí)間：2016年01月21日 10:27:51 投稿：hebedich

本文給大家分享的是個(gè)人在項(xiàng)目中使用angularjs實(shí)現(xiàn)表格分頁(yè)功能的思路和代碼，非常的簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。

接上一次，這次主要介紹表格分頁(yè)功能，由于項(xiàng)目需要這個(gè)案例是關(guān)于前端分頁(yè)的方式，現(xiàn)在很少會(huì)這么用了，但如有需要可以參考其中的思路

html：

1.通過UL來(lái)展示頁(yè)標(biāo)，其中每個(gè)頁(yè)標(biāo)的li是通過異步加載從獲取到不同的表格數(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ù)，通過選取頁(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ù)隱藏，只顯示一開始設(shè)置的第一頁(yè)中的5條

4.跳轉(zhuǎn)頁(yè)面功能，tab_page（）通過傳入的index（頁(yè)數(shù)）*顯示的條數(shù)來(lái)確定截取tr的開始位置和結(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("&nbsp;"+current_page+"&nbsp;");//顯示當(dāng)前頁(yè)
      $("#page_all").html("&nbsp;"+page_num+"&nbsp;");//顯示總頁(yè)數(shù)
      $("#previous").click(function(){//上一頁(yè)
        var new_page=parseInt($("#current_page").text())-1;
        if(new_page>0){
          $("#current_page").html("&nbsp;"+new_page+"&nbsp;");
          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("&nbsp;"+new_page+"&nbsp;");
          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;//開始截取的頁(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("&nbsp;"+current_page+"&nbsp;");
      }
    }
table_page()；

以上就是表格的前端分頁(yè)方法和頁(yè)數(shù)，頁(yè)標(biāo)等跳轉(zhuǎn)方式的方法，請(qǐng)結(jié)合第一章中的數(shù)據(jù)測(cè)試。

您可能感興趣的文章: