如何用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（）通过传入的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("&nbsp;"+current_page+"&nbsp;");//显示当前页
            $("#page_all").html("&nbsp;"+page_num+"&nbsp;");//显示总页数
            $("#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;//截取个数
                $('#page').children().css('display', 'none').slice(start, end).css('display', '');
                current_page=index;
                $("#current_page").html("&nbsp;"+current_page+"&nbsp;");
            }
        }

table_page()；

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