javascript - ajax와 js의 새로 고침되지 않는 페이징 효과를 얻는 방법

Ajax 데이터 요청의 페이징 효과 구현: 그림과 유사합니다! 코드 구현 방법

답글 내용:

Ajax 데이터 요청의 페이징 효과 구현: 그림과 유사합니다! 코드 구현 방법

ajax는 특정 페이지의 데이터를 요청한 후 테이블을 지운 다음 새 데이터를 테이블에 넣습니다.

1. CSS로 페이징 스타일을 생성합니다.
2. 이벤트를 수신하고 페이징 매개변수 pageNo를 전달하고 ajax 콜백에 목록의 리어셈블리 및 렌더링을 작성합니다.

페이징 이벤트가 트리거될 때 Ajax 요청을 한 다음 성공 후 테이블을 업데이트하는 아이디어입니다.

<code>ele.onclick = function() {  //假设ele是点击后触发分页的元素
    var index = ele.pageIndex;
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'URL', true);//URL应包含分页信息，比如pageIndex，pageSize等
    xhr.onreadystatechange = function() {
        if ( xhr.status == 200 && xhr.readyState == 4 ) {
            updateTable(xhr.responseText);  //这个updateTable就是你用来更新表格的方法，在本页面执行，不会刷新
        }
    }
    xhr.send('');
}</code>

페이지 번호 클릭 시:

• 프런트엔드 전달 값: currentPage(현재 요청된 페이지), perPage(페이지당 데이터 조각 수);

• 백엔드 반환 값: 페이지(총 페이지 수), 데이터(반환된 데이터)

• 프런트 엔드가 처음으로 데이터를 요청할 때 데이터 바인딩을 사용하지 않는 경우 백엔드에서 반환된 총 페이지 수를 기준으로 프런트 엔드 페이지 넘김 막대에 표시됩니다. , 반응, vue, 녹아웃 등과 같은 다음 요청은 사촌을 지우고 이를 루프의 html에 삽입하기만 하면 페이지를 다시 렌더링하기 위해 반환된 데이터만 재설정하면 됩니다. .

문제 주제는 네 가지 지식을 습득해야 한다고 생각합니다.

1. 아약스

2. PHP 페이징 기술

3. mysql 제한

4. jquery

자세한 설명:

1. ajax 페이지 번호를 클릭하면 click(jQuery) 이벤트가 발생하고 페이지 번호의 값을 얻어 백엔드로 전송합니다

2. php는 이 페이지 번호의 매개변수를 수신하고 현재 페이지 번호와 표시된 항목 수를 기반으로 이를 계산합니다.

<code>$page = $_GET['page'];  //当前页码
$page_num = 12;         //显示条数
$offect = $page_num * ( $page - 1 );    

$sql = "select * from table limit $offset,$page_num";  //3、sql的limit语法

//组装成html返回给前台


echo $html;exit;

</code>

4. 프런트 엔드에서 목록 콘텐츠에 해당하는 div를 교체하면 됩니다.

이건 오래된 방법이라 최신 방법이 뭔지는 모르겠습니다.

위. 그런데 Baidu에는 이런 종류의 문제에 대한 많은 리소스가 있습니다. 정말로, 나는 당신에게 거짓말을 하지 않을 것입니다.

Ajax 사용에 대한 API를 확인하세요
새로 고침이 없는 페이지 매김의 경우 테이블 영역의 데이터를 지우고 바꾸기만 하면 됩니다. 질문자가 jquery를 보면 기본적으로 매우 가능합니다. 간단해요...