부트스트랩 페이징 구현 방법

부트스트랩 페이징 구현 방법: 먼저 div를 사용하여 지워질 콘텐츠를 래핑한 다음 a 태그를 사용하여 이전 페이지와 다음 페이지의 기능을 구현합니다. ajax 효과는 충분합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, bootsrap 버전 3.3.7, Dell G3 컴퓨터 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

추천: "부트스트랩 비디오 튜토리얼" "css 비디오 튜토리얼"

페이징 구현을 위한 부트스트랩

알고리즘 개선: [주로 js를 mysql 제한과 함께 사용하여 이전 페이지와 다음 페이지 구현]

[ 데이터를 쿼리할 때 제한이 사용됩니다. 이제 페이지당 3개의 레코드를 표시하고 페이징을 수행합니다.]

먼저 ajax가 서블릿에 요청을 시작한 다음 json 데이터를 요청합니다. 이제 ajax와 html 디자인을 시작해 보세요.

1. 페이지를 넘길 때마다 이전 데이터가 덮어쓰기/삭제됩니다. 따라서 div를 사용하여 지울 콘텐츠를 래핑하세요.

왜 div 안에 보관해야 할까요? 왜냐하면 참조 개체와 마찬가지로 여기에 데이터를 추가하고 보관해야 하기 때문입니다.

<div id="co">
        <h1 class="h"></h1>  <!-- 这里的标签都加上class="h"，后面都要动态清空-->
</div>

이제 데이터가 저장되는 기본 디자인 프레임워크가 있습니다. 이제 이전 페이지, 다음 페이지와 같이 데이터에 대해 작업할 항목이 있어야 합니다.

2. a 태그를 사용하여 이전 페이지와 다음 페이지 기능을 구현하세요.

여기에서는 다음 페이지를 구현하기 위해 nextpage 메소드를 사용하고, 이전 페이지는 prevpage를 사용합니다. 먼저 이런 아이디어가 있습니다

<a href="javascript:prevpage(0)">上一页</a><a href="javascript:nextpage(0)">下一页</a>

이 경우에는 이제 데이터 로딩을 구현하는 것이 ajax입니다

셋, ajax는 초기 로딩, 이전 페이지, 다음 페이지를 구현합니다.

key는 레코드의 개수, 즉 레코드의 시작 데이터를 의미한다는 것을 먼저 생각해보자. 다른 페이지의 연산이 변경되면 이전 페이지의 파라미터와 다음 페이지의 파라미터도 변경되어야 하며, 열쇠로 바꾸세요.

대략 다음과 같습니다.

//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=&#39;h&#39;>"+result[k].title+"</2><p class=&#39;h&#39;>"+result[k].name+"</p><p class=&#39;h&#39;><a class=&#39;btn&#39; href=&#39;javascript:clickA(0);&#39;>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);
}
}

주로 아이디어 구현을 기록합니다. 코드를 최적화해야 하지만 이미 아이디어가 매우 명확하므로 위의 내용을 보면 각 페이지에 3개의 데이터가 표시되는 것을 확인할 수 있습니다. , 각 페이지에 n개의 데이터가 표시되는 방법은 무엇입니까? 아마 별로 걸리지 않을 거예요.

그렇다면 여기서 제기된 문제를 어떻게 깨닫고 자신만의 것으로 포장할 수 있을지 스스로 생각해 보세요. 이 단계는 쓰지 않겠습니다.

그렇다면 예외를 방지하기 위해 백그라운드 서블릿을 어떻게 제어해야 할까요? 이것이 바로 값의 문제입니다. null이나 "",

위 내용은 부트스트랩 페이징 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!