Sharing the method of implementing pseudo paging with jQuery

Sharing the method of implementing pseudo paging with jQuery_jquery

WBOY

Release： 2016-05-16 15:15:11

Original

1695 people have browsed it

The example in this article describes how jQuery implements pseudo paging. Share it with everyone for your reference, the details are as follows:

You can perform pseudo paging on table data, and you only need to execute simple code to achieve it.

The implementation is very simple and the style is not very good-looking. You can adjust and correct it yourself.

The following is a table, tr data is loaded in the tbody, no matter how you load it,

After the data is loaded, you can perform pseudo paging on the table data. Pay attention to the class referenced by the div. The data I filled in is four columns, so colspan is added to the td, and the div is the paging display area

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

Copy after login

The following are css and js methods

.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;}

Copy after login

The js method is as follows

//对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();
}

Copy after login

The page references css and js. After loading the data,

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

Copy after login

The effect is as follows: