angularjsテーブルページング関数の詳しい説明_AngularJS

前回に引き続き、今回はプロジェクトの都合上、フロントエンドのページング手法を中心に紹介します。必要に応じてアイデアを参照してください

html:

1. UL を通じてページ ラベルを表示します。各ページ ラベルの li は、非同期ロードを通じて取得されたさまざまなテーブル データから動的に生成されます。

 <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. まず、各ページに表示するアイテムの数を設定し、ページ要素と現在のページ番号を選択して今回生成されるアイテムの総数を決定する必要があります (ジャンプの準備) )

2. 総ページ数が現在の生成ページ数より大きい場合は、完了するまで次のページの生成を続け、ページにコーナー マークを追加します

3. すべてのテーブルデータを非表示にし、最初に設定した最初のページの 5 項目のみを表示します

4. ページジャンプ関数、tab_page() は、受信したインデックス (ページ数) * 表示された項目の数を使用して、インターセプトされた tr の開始位置と終了位置を決定し、すべての tr を非表示にし、表示のみを行います。この範囲内で tr(display: "");

5. 前ページ、次ページ、およびジャンプ関数。現在のページの番号を取得し、最初のページか最後のページであるかを判断し、インデックスとしてジャンプ関数に渡します。

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

上記はテーブルのフロントエンドのページング方法とページ番号、ページラベル、その他のジャンプ方法です。第 1 章のデータテストと組み合わせてください。