Detailed explanation of angularjs table paging function

Detailed explanation of angularjs table paging function_AngularJS

WBOY

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

Original

1549 people have browsed it

Continuing from the last time, this time we mainly introduce the table paging function. Due to the needs of the project, this case is about the front-end paging method. It is rarely used in this way now, but you can refer to the ideas if necessary

html:

1. Display page labels through UL, where the li of each page label is dynamically generated from different table data obtained through asynchronous loading.

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

Copy after login

js:

1. First, you need to set the number of items you want to display on each page, and determine the total number of items generated this time by selecting page elements, as well as the current page number (preparing for the jump)

2. If the total number of pages is greater than the current number of pages generated, continue to generate the next page until it is completed, and add the corner mark to the page

3. Hide all table data and only display the 5 items on the first page set at the beginning

4. Jump page function, tab_page() uses the incoming index (number of pages) * the number of displayed items to determine the starting position and ending position of the intercepted tr, and then hides all tr and only displays within this range tr(display: "");

5. Previous page, next page and jump function, get the number of the current page, pay attention to determine whether it is the first or last page, and pass it into the jump function as 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()；

Copy after login

The above is the front-end paging method of the table and the page number, page label and other jump methods. Please combine it with the data test in Chapter 1.