지난 시간에 이어 이번에는 프로젝트의 필요에 따라 테이블 페이징 기능을 주로 소개합니다. 지금은 이런 방식으로 거의 사용되지 않습니다. 필요하다면 아이디어를 참고하세요
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장의 데이터 테스트와 결합하세요.