Partager la méthode d'implémentation de la pseudo-pagination avec jQuery_jquery

L'exemple de cet article décrit comment jQuery implémente la pseudo-pagination. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Vous pouvez effectuer une pseudo-pagination sur les données de la table, et il vous suffit d'exécuter du code simple pour y parvenir.

La mise en œuvre est très simple et le style n'est pas très beau. Vous pouvez l'ajuster et le corriger vous-même.

Ce qui suit est un tableau, les données tr sont chargées dans le corps, peu importe la façon dont vous les chargez,

Une fois les données chargées, vous pouvez effectuer une pseudo-pagination sur les données de la table. Faites attention à la classe référencée par le div. Les données que j'ai remplies comportent quatre colonnes, donc colspan est ajouté au td et le div est. la zone d'affichage de la pagination

<table>
   <tbody id="dialog-items">
    </tbody>
    <tfoot>
      <tr>
       <td colspan="4">
        <div id="maskPage" class="page_btn">
        </div>
       </td>
    </tr>
   </tfoot>
</table>

Les méthodes suivantes sont CSS et js

.page_btn{padding-top:0px;}
.page_btn a{cursor:pointer;padding:5px;border:solid 1px #ccc;font-size:12px;}
.page_box{float:right;}
.num{padding:0 10px;}

La méthode js est la suivante

//对tbody伪分页；pageDiv：用于显示分页数据的div tbodyId :tbody的ID，pageSize，分页数目
function pagiNation(pageDiv,tbodyId,pageSize){
  $("#"+tbodyId+" tr:gt("+(pageSize-1)+")").hide();//初始化，前面pageSize-1条数据显示，其他的数据隐藏。
  var total_q=$("#"+tbodyId+" tr").length;//总数据
  var current_page=pageSize;//每页显示的数据
  var current_num=1;//当前页数
  var total_page= Math.ceil(parseFloat(total_q)/parseFloat(current_page));//总页数
  var pagePlugIn = "<span class=\"page_box\">"+
          "<a id=\""+tbodyId+"_prev\" class=\"prev\">上一页</a>"+
          "<span id=\""+tbodyId+"_num\" class=\"num\">"+
          "<span id=\""+tbodyId+"_current_page\" class=\"current_page\">1</span>"+
          "<span style=\"padding:0 3px;\">/</span>"+
          "<span id=\""+tbodyId+"_total\" class=\"total\"></span></span>"+
          "<a id=\""+tbodyId+"_next\" class=\"next\">下一页</a>"+
          "</span>";
  $("#"+pageDiv+"").html(pagePlugIn);
  var next=$("#"+tbodyId+"_next");//下一页
  var prev=$("#"+tbodyId+"_prev");//上一页
  $("#"+tbodyId+"_total").text("");//显示总页数
  $("#"+tbodyId+"_total").text(total_page);//显示总页数
  $("#"+tbodyId+"_current_page").text("");//当前的页数
  $("#"+tbodyId+"_current_page").text(current_num);//当前的页数
  //下一页
 $("#"+tbodyId+"_next").unbind("click");
 $("#"+tbodyId+"_next").click(function(){
 if(current_num==total_page){
    return false;//如果大于总页数就禁用下一页
 }
 else{
   $("#"+tbodyId+"_current_page").text(++current_num);//点击下一页的时候当前页数的值就加1
   $.each($("#"+tbodyId+" tr"),function(index,item){
   var start = current_page* (current_num-1);//起始范围
   var end = current_page * current_num;//结束范围
   if(index >= start && index < end){//如果索引值是在start和end之间的元素就显示，否则就隐
    $(this).show();
   }else {
   $(this).hide();
   }
 });
 }
});
//上一页方法
$("#"+tbodyId+"_prev").unbind("click");
$("#"+tbodyId+"_prev").click(function(){
  if(current_num==1){
    return false;
  }else{
    $("#"+tbodyId+"_current_page").text(--current_num);
    $.each($("#"+tbodyId+" tr"),function(index,item){
    var start = current_page* (current_num-1);//起始范围
    var end = current_page * current_num;//结束范围
    if(index >= start && index < end){//如果索引值是start和end之间的元素就显示，否则就隐藏
      $(this).show();
    }else {
      $(this).hide();
    }
  });
}
})
  $("#"+pageDiv+"").show();
}

La page fait référence aux css et js. Après avoir chargé les données,

function fillTabl(){
     ......................
     数据填充.............
     ..........................
     pagiNation('maskPage','dialog-items',10); //传入div的id,tbody的id,还有分页数
}

L'effet est le suivant :

Les lecteurs intéressés par davantage de contenu lié à jQuery peuvent consulter les sujets spéciaux sur ce site : "Résumé des compétences d'extension JQuery", "Résumé des effets spéciaux classiques communs jQuery" , "Résumé des plug-ins jQuery courants et de leur utilisation", "Résumé de l'utilisation d'Ajax dans jquery" et "Résumé des compétences courantes d'utilisation de jquery"

J'espère que cet article sera utile à tous ceux qui programment jQuery.