angularjs表格分页功能详解

前端技术 2023/09/02 JavaScript

接上一次，这次主要介绍表格分页功能，由于项目需要这个案例是关于前端分页的方式，现在很少会这么用了，但如有需要可以参考其中的思路

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（）通过传入的index（页数）*显示的条数来确定截取tr的开始位置和结束位置，然后将所有的tr隐藏，只显示该范围内的tr（display：“”）；

5.上一页下一页和跳转功能，获取当前页的数字，注意判断是否为第一或最后一页，将其作为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()；

以上就是表格的前端分页方法和页数，页标等跳转方式的方法，请结合第一章中的数据测试。

本文地址：https://www.stayed.cn/item/4076

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案