angularjs表格分頁功能詳解_AngularJS

接上一次，這次主要介紹表格分頁功能，由於項目需要這個案例是關於前端分頁的方式，現在很少會這麼用了，但如有需要可以參考其中的思路

html：

1.通過UL來展示頁標，其中每個頁標的li是通過非同步載入從擷取到不同的表格式資料來動態產生的。

 <div class="pagination">      <ul style="float:right">        <li id="previous"><a href="">上一頁</a></li>        <li><!--用於頁標的顯示 -->          <ul id="page_num_all">          </ul>        </li>        <li id="next"><a href="" style="border:1px solid #ddd;float:right">下一頁</a></li>      </ul>      <span>        當前為第<span class="num" id="current_page"></span>頁，總共<span class="num" id="page_all"></span>頁      </span>    </div>

js：

1.首先需要設定每頁想要顯示的條數，通過選取頁面元素來確定本次產生的總條數，以及當前所在的頁數（為跳轉做準備）

2.如果總頁數大於產生的當前頁數，則繼續產生下一頁直到完畢後，將角標添加到頁面中

3.將所有的表格式資料隱藏，只顯示一開始設定的第一頁中的5條

4.跳轉頁面功能，tab_page（）通過傳入的index（頁數）*顯示的條數來確定截取tr的開始位置和結束位置，然後將所有的tr隱藏，只顯示該範圍內的tr（display：“”）；

5.上一頁下一頁和跳轉功能，擷取當前頁的數字，注意判斷是否為第一或最後一頁，將其作為index傳入跳轉功能中即可

function table_page(){      var show_page=5;//每頁顯示的條數      var page_all=$("#page").children().size();//總條數      var current_page=1;//當前頁//    console.log(page_all);      var page_num=Math.ceil(page_all/show_page);//總頁數      var current_num=0;//用於產生頁標的計數器      var li="";//頁標元素      while(page_num>current_num){//迴圈產生頁標元素        li+='<li class="page_num"><a href="javasctip:(0)">'+(current_num+1)+'</a></li>';        current_num++;      }      $("#page_num_all").html(li);//添加頁標到頁面      $('#page tr').css('display', 'none');//設定隱藏      $('#page tr').slice(0, show_page).css('display', '');//設定顯示      $("#current_page").html(" "+current_page+" ");//顯示當前頁      $("#page_all").html(" "+page_num+" ");//顯示總頁數      $("#previous").click(function(){//上一頁        var new_page=parseInt($("#current_page").text())-1;        if(new_page>0){          $("#current_page").html(" "+new_page+" ");          tab_page(new_page);        }      });      $("#next").click(function(){//下一頁        var new_page=parseInt($("#current_page").text())+1;//當前頁標        if(new_page<=page_num){//判斷是否為最後或第一頁          $("#current_page").html(" "+new_page+" ");          tab_page(new_page);        }      });      $(".page_num").click(function(){//頁標跳轉        var new_page=parseInt($(this).text());        tab_page(new_page);      });      function tab_page(index){//切換對應頁標的頁面        var start=(index-1)*show_page;//開始截取的頁標        var end=start+show_page;//截取個數        $('#page').children().css('display', 'none').slice(start, end).css('display', '');        current_page=index;        $("#current_page").html(" "+current_page+" ");      }    }table_page()；

以上就是表格的前端分頁方法和頁數，頁標等跳轉方式的方法，請結合第一章中的資料測試。