Penjelasan terperinci tentang fungsi paging table angularjs

Penjelasan terperinci tentang fungsi paging table angularjs_AngularJS

WBOY

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

asal

1561 orang telah melayarinya

Bersambung dari kali terakhir, kali ini kami memperkenalkan fungsi paging jadual terutamanya kerana keperluan projek, kes ini adalah mengenai kaedah paging bahagian hadapan Ia jarang digunakan dengan cara ini sekarang, tetapi anda boleh rujuk idea jika perlu

html:

1. Paparkan label halaman melalui UL, di mana li setiap label halaman dijana secara dinamik daripada data jadual berbeza yang diperoleh melalui pemuatan tak segerak.

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

Salin selepas log masuk

js:

1. Mula-mula, anda perlu menetapkan bilangan item yang ingin anda paparkan pada setiap halaman, dan tentukan jumlah item yang dijana kali ini dengan memilih elemen halaman, serta nombor halaman semasa (bersedia untuk lompatan )

2. Jika jumlah halaman lebih besar daripada bilangan halaman semasa yang dijana, teruskan menjana halaman seterusnya sehingga ia selesai, dan tambah tanda penjuru pada halaman

3. Sembunyikan semua data jadual dan hanya paparkan 5 item pada set halaman pertama pada permulaan

4. Fungsi halaman lompat, tab_page() menggunakan indeks masuk (bilangan halaman) * bilangan item yang dipaparkan untuk menentukan kedudukan permulaan dan kedudukan penamat tr yang dipintas, dan kemudian menyembunyikan semua tr dan hanya memaparkan dalam julat ini tr(paparan: "");

5. Halaman sebelumnya, halaman seterusnya dan fungsi lompat, dapatkan nombor halaman semasa, beri perhatian untuk menentukan sama ada halaman pertama atau terakhir, dan masukkannya ke dalam fungsi lompat sebagai indeks

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

Salin selepas log masuk

Di atas ialah kaedah halaman muka depan jadual dan nombor halaman, label halaman dan kaedah lompatan lain Sila gabungkan dengan ujian data dalam Bab 1.