부트스트랩을 사용하여 페이징을 구현하는 방법: 1. div 요소를 사용하여 페이지를 넘길 때 지워지는 콘텐츠를 래핑합니다. 2. nextpage 및 prevpage 메서드와 함께 태그를 사용하여 이전 페이지와 다음 페이지의 기능을 구현합니다. . ajax를 사용하여 초기 로드만 구현합니다.
이 튜토리얼의 운영 환경: Windows 10 시스템, 부트스트랩 버전 3.3.7, DELL G3 컴퓨터
1 우리는 이전 데이터가 매번 덮어쓰여진다는 것을 알고 있습니다. 페이지를 넘기거나 div를 사용하여 지울 내용을 래핑할 수 있습니다. 그렇다면 왜 div에 보관해야 할까요? 여전히 데이터를 추가해야 하므로 참조 개체로 사용되는 효과를 갖도록 유지합니다.
<div id="co"> <h1 class="h"></h1> <!-- 这里的标签都加上class="h",后面都要动态清空--> </div>
2. 이전 페이지와 다음 페이지 기능을 구현하는 태그입니다.
이 단계에서는 nextpage 메소드를 사용하여 다음 페이지를 구현하고, 이전 페이지에서는 prevpage를 사용합니다. 코드는 다음과 같습니다.
<a href="javascript:prevpage(0)">上一页</a> <a href="javascript:nextpage(0)">下一页</a>
3 Ajax는 초기 로딩을 구현합니다.
키를 사용하여 레코드 수를 나타냅니다. 로드할 때, 즉 레코드의 시작 데이터를 먼저 생각합니다. 다른 페이지의 작업이 변경되면 이전 페이지의 매개변수와 다음 페이지의 매개변수가 변경되어야 하며 키로 변경되어야 합니다.
코드는 다음과 같습니다:
//1、默认加载第一页 clickA(0); //2、加载数据的函数 function clickA(key){ $(".h").empty(); $.ajax({ type : "post", async : true, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行) url : "Page", //请求发送到Page处 data : {'key':key}, dataType : "json", //返回数据形式为json success : function(result) { //请求成功时执行该函数内容,result即为服务器返回的json对象 for(var k in result){ //将获得的数据加入col-md-12 column $("#con").before("<h2 class='h'>"+result[k].title+"</2><p class='h'>"+result[k].name+"</p><p class='h'><a class='btn' href='javascript:clickA(0);'>View details »</a>"+"</p>"); //改变a标签prev的属性,下面这两句是重点 $("#prev").attr("href","javascript:prevpage("+key+")"); $("#next").attr("href","javascript:nextpage("+key+")"); } }, error : function(XMLHttpRequest, textStatus,errorMsg) { //请求失败时执行该函数 alert("错误码:"+XMLHttpRequest.status); alert("错误状态:"+XMLHttpRequest.readyState); alert("数据请求数据失败!"+errorMsg); } }); } //3、实现上一页功能: function prevpage(prev){ if(prev==0){clickA(0);}else{ prev = prev-3; clickA(prev); } //4、实现下一页功能 var numa=0; function nextpage(numa){ //获取当前的key //将key+3,然后交给clickA //获取后台带到的key,在key的基础上增加 numa=numa+3; clickA(numa); } }
관련 권장 사항: 부트스트랩 튜토리얼
위 내용은 부트스트랩을 사용하여 페이징을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!