Explication détaillée de la fonction de pagination de table angulairejs

Explication détaillée de la fonction de pagination de table angulairejs_AngularJS

WBOY

Libérer： 2016-05-16 15:18:54

original

1560 Les gens l'ont consulté

Dans la continuité de la dernière fois, cette fois, nous introduisons principalement la fonction de pagination de table. En raison des besoins du projet, ce cas concerne la méthode de pagination frontale. Elle est rarement utilisée de cette manière maintenant, mais vous pouvez. se référer aux idées si nécessaire

html :

1. Afficher les étiquettes de page via UL, où le li de chaque étiquette de page est généré dynamiquement à partir de différentes données de table obtenues par chargement asynchrone.

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

Copier après la connexion

js :

1. Tout d'abord, vous devez définir le nombre d'éléments que vous souhaitez afficher sur chaque page et déterminer le nombre total d'éléments générés cette fois en sélectionnant les éléments de la page, ainsi que le numéro de la page actuelle (en préparation du saut). )

2. Si le nombre total de pages est supérieur au nombre actuel de pages générées, continuez à générer la page suivante jusqu'à ce qu'elle soit terminée et ajoutez la marque de coin à la page

3. Masquer toutes les données du tableau et afficher uniquement les 5 éléments de la première page définie au début

4. Fonction de saut de page, tab_page() utilise l'index entrant (nombre de pages) * le nombre d'éléments affichés pour déterminer la position de début et la position de fin du tr intercepté, puis masque tous les tr et affiche uniquement dans cette plage tr(display: "");

5. Page précédente, page suivante et fonction de saut, obtenez le numéro de la page actuelle, faites attention à déterminer s'il s'agit de la première ou de la dernière page, et transmettez-la dans la fonction de saut comme 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()；

Copier après la connexion

Ce qui précède est la méthode de pagination frontale du tableau ainsi que le numéro de page, l'étiquette de page et d'autres méthodes de saut. Veuillez la combiner avec le test de données du chapitre 1.