欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

angularjs表格分頁功能詳解

 更新時間:2016年01月21日 10:27:51   投稿:hebedich  
本文給大家分享的是個人在項目中使用angularjs實現(xiàn)表格分頁功能的思路和代碼,非常的簡單實用,有需要的小伙伴可以參考下。

接上一次,這次主要介紹表格分頁功能,由于項目需要這個案例是關于前端分頁的方式,現(xiàn)在很少會這么用了,但如有需要可以參考其中的思路

html:

1.通過UL來展示頁標,其中每個頁標的li是通過異步加載從獲取到不同的表格數(shù)據(jù)來動態(tài)生成的。

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

js:

1.首先需要設置每頁想要顯示的條數(shù),通過選取頁面元素來確定本次生成的總條數(shù),以及當前所在的頁數(shù)(為跳轉做準備)

2.如果總頁數(shù)大于生成的當前頁數(shù),則繼續(xù)生成下一頁直到完畢后,將角標添加到頁面中

3.將所有的表格數(shù)據(jù)隱藏,只顯示一開始設置的第一頁中的5條

4.跳轉頁面功能,tab_page()通過傳入的index(頁數(shù))*顯示的條數(shù)來確定截取tr的開始位置和結束位置,然后將所有的tr隱藏,只顯示該范圍內(nèi)的tr(display:“”);

5.上一頁下一頁和跳轉功能,獲取當前頁的數(shù)字,注意判斷是否為第一或最后一頁,將其作為index傳入跳轉功能中即可

function table_page(){
      var show_page=5;//每頁顯示的條數(shù)
      var page_all=$("#page").children().size();//總條數(shù)
      var current_page=1;//當前頁
//    console.log(page_all);
      var page_num=Math.ceil(page_all/show_page);//總頁數(shù)
      var current_num=0;//用于生成頁標的計數(shù)器
      var li="";//頁標元素
      while(page_num>current_num){//循環(huán)生成頁標元素
        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("&nbsp;"+current_page+"&nbsp;");//顯示當前頁
      $("#page_all").html("&nbsp;"+page_num+"&nbsp;");//顯示總頁數(shù)
      $("#previous").click(function(){//上一頁
        var new_page=parseInt($("#current_page").text())-1;
        if(new_page>0){
          $("#current_page").html("&nbsp;"+new_page+"&nbsp;");
          tab_page(new_page);
        }
      });
      $("#next").click(function(){//下一頁
        var new_page=parseInt($("#current_page").text())+1;//當前頁標
        if(new_page<=page_num){//判斷是否為最后或第一頁
          $("#current_page").html("&nbsp;"+new_page+"&nbsp;");
          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;//截取個數(shù)
        $('#page').children().css('display', 'none').slice(start, end).css('display', '');
        current_page=index;
        $("#current_page").html("&nbsp;"+current_page+"&nbsp;");
      }
    }
table_page();

以上就是表格的前端分頁方法和頁數(shù),頁標等跳轉方式的方法,請結合第一章中的數(shù)據(jù)測試。

相關文章

  • 詳解Angular的數(shù)據(jù)顯示優(yōu)化處理

    詳解Angular的數(shù)據(jù)顯示優(yōu)化處理

    本文主要對Angular的數(shù)據(jù)顯示優(yōu)化處理進行詳細介紹,具有一定的參考價值,下面跟著小編一起來看下吧
    2016-12-12
  • AngularJS 工作原理詳解

    AngularJS 工作原理詳解

    本文主要介紹AngularJS 工作原理,這里整理了相關資料及示例代碼,有興趣的小伙伴可以參考下
    2016-08-08
  • 淺談angularJS中的事件

    淺談angularJS中的事件

    下面小編就為大家?guī)硪黄獪\談angularJS中的事件。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-07
  • 關于 angularJS的一些用法

    關于 angularJS的一些用法

    這篇文章主要介紹了關于 angularJS的一些用法的相關資料,需要的朋友可以參考下
    2017-11-11
  • AngularJS學習筆記之TodoMVC的分析

    AngularJS學習筆記之TodoMVC的分析

    這篇文章主要介紹了AngularJS學習筆記之TodoMVC的分析的相關資料,需要的朋友可以參考下
    2015-02-02
  • ionic4+angular7+cordova上傳圖片功能的實例代碼

    ionic4+angular7+cordova上傳圖片功能的實例代碼

    ionic是一個垮平臺開發(fā)框架,可通過web技術開發(fā)出多平臺的應用。這篇文章主要介紹了ionic4+angular7+cordova上傳圖片功能,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值 ,需要的朋友可以參考下
    2019-06-06
  • AngularJS指令用法詳解

    AngularJS指令用法詳解

    這篇文章主要介紹了AngularJS指令用法,較為詳細的分析了AngularJS指令的功能、用法及自定義指令的相關實現(xiàn)技巧,需要的朋友可以參考下
    2016-11-11
  • AngularJS基礎 ng-keyup 指令簡單示例

    AngularJS基礎 ng-keyup 指令簡單示例

    本文主要介紹AngularJS ng-keyup 指令,這里對ng-keyup指令的基本資料進行了整理,并且附有代碼示例,有需要的朋友可以看一下
    2016-08-08
  • angularJs提交文本框數(shù)據(jù)到后臺的方法

    angularJs提交文本框數(shù)據(jù)到后臺的方法

    今天小編就為大家分享一篇angularJs提交文本框數(shù)據(jù)到后臺的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-10-10
  • Angular CLI 安裝和使用教程

    Angular CLI 安裝和使用教程

    本篇文章主要介紹了Angular CLI 安裝和使用教程,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09

最新評論