Detaillierte Erläuterung der AngularJS-Tabellen-Paging-Funktion

Detaillierte Erläuterung der AngularJS-Tabellen-Paging-Funktion_AngularJS

WBOY

Freigeben： 2016-05-16 15:18:54

Original

1561 Leute haben es durchsucht

In Fortsetzung des letzten Mals stellen wir dieses Mal hauptsächlich die Tabellen-Paging-Funktion vor. Aufgrund der Anforderungen des Projekts geht es in diesem Fall um die Front-End-Paging-Methode. Sie wird derzeit nur noch selten auf diese Weise verwendet beziehen Sie sich bei Bedarf auf die Ideen

html:

1. Seitenbeschriftungen über UL anzeigen, wobei die LI jeder Seitenbeschriftung dynamisch aus verschiedenen Tabellendaten generiert wird, die durch asynchrones Laden erhalten werden.

 <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>

Nach dem Login kopieren

js:

1. Zuerst müssen Sie die Anzahl der Elemente festlegen, die Sie auf jeder Seite anzeigen möchten, und die Gesamtzahl der diesmal generierten Elemente bestimmen, indem Sie Seitenelemente sowie die aktuelle Seitennummer auswählen (Vorbereitung für den Sprung). )

2. Wenn die Gesamtzahl der Seiten größer ist als die aktuelle Anzahl der generierten Seiten, fahren Sie mit der Generierung der nächsten Seite fort, bis sie abgeschlossen ist, und fügen Sie die Eckmarkierung zur Seite hinzu

3. Blenden Sie alle Tabellendaten aus und zeigen Sie nur die 5 Elemente auf der ersten Seite an, die zu Beginn festgelegt wurde

4. Sprungseitenfunktion, tab_page() verwendet den eingehenden Index (Anzahl der Seiten) * die Anzahl der angezeigten Elemente, um die Startposition und Endposition des abgefangenen Tr zu bestimmen, und blendet dann alle Tr aus und zeigt sie nur an innerhalb dieses Bereichs tr(display: "");

5. Vorherige Seite, nächste Seite und Sprungfunktion, ermitteln Sie die Nummer der aktuellen Seite, achten Sie darauf, ob es sich um die erste oder letzte Seite handelt, und übergeben Sie sie als Index an die Sprungfunktion

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()；

Nach dem Login kopieren

Das Obige ist die Front-End-Paging-Methode der Tabelle sowie die Seitenzahl, Seitenbeschriftung und andere Sprungmethoden. Bitte kombinieren Sie es mit dem Datentest in Kapitel 1.