PHP+JQuery+Ajax 페이지 나 누 기 방법 상세 설명
jQuery 를 단련 하기 위해 서,스스로 페이지 를 쓰기 로 결정 하 였 다.
최종 효 과 는 그림 과 같다.
어떤 자 모 를 클릭 하면 아래 에 이 자 모 를 이니셜 로 하 는 모든 단 어 를 표시 합 니 다.
페이지 별로 15 개의 단 어 를 표시 하고 각 페이지 는 20 개,1-20/20-40~~~
우선 PHP 파일 의 페이지 나 누 기 Pager 관련 코드 입 니 다.
public function searchWordsByInitial()
// AJAX URL ：
$initial = htmlentities($_POST['initial'], ENT_QUOTES,"UTF-8");
$page = htmlentities($_POST['page'], ENT_QUOTES,"UTF-8");
$words = $this->_createWordObj();
$i=0;// 1
$perPageNum=12;// 12
$currentPageFirst=($page-1)*$perPageNum+1;
$currentPageLast=$page*$perPageNum;
//
$sumNum=0;
foreach ( $words[$initial] as $key=> $word ){
$sumNum++;
}
//
$pageNums=0;
if( $sumNum ){
if( $sumNum < $perPageNum ){ $pageNums = 1; } // $PageSize，
if( $sumNum%$perPageNum ){ //
$pageNums = (int)($sumNum/$perPageNum) + 1; // ，
}else{
$pageNums = $sumNum/$perPageNum; // ，
}
}
else{
$pageNums = 0;
}
//Pager
echo $this->init_searchWordsByInitial_Pager($sumNum,$pageNums,$page);
$tab_str.="<table …………………… ………………"
return $tab_str;
}
public function init_searchWordsByInitial_Pager($sumNum,$pageNums,$page)
{
// ， ， 38， 21-40， 21
$current_first_page=floor(($page-1)/20)*20+1;
$tab_str="<div id='searchWordsByInitial_Pager' class='pagination pagination-centered'><ul>";
for($k=0;$k<=19;$k++)
{
$j=$k+$current_first_page;
$tab_str.="<button class='not_more_btn'>".$j."</button>";
}
$tab_str.="</ul> <span id='sumNums'>".$sumNum."</span> ，<span id='pageNums'>".$pageNums."</span> </div>";
return $tab_str;
}
// Pager
var pageNums;//
var sumNums;//
function init_searchWordsByInitial_Pager(){
pageNums=$("#pageNums").html();//JS HTML
sumNums=$("#sumNums").html();
if(pageNums==1)// ， Pager
{
$("#searchWordsByInitial_Pager").html("</br>");
}
// 1， ；
if(page_initial==undefined){ page_initial=1;}
// ， 20 ， NEXT ， 20 ； ，LAST 20
$("#searchWordsByInitial_Pager ul button:eq(19)").after("<button id='more_forward' class='more'>Next</button>");
$("#searchWordsByInitial_Pager ul button:eq(0)").before("<button id='more_backword' class='more'>Last</button>");
// 21 ， ， NEXT 【pageNums<21】
// page 20 page， ， NEXT 【offset<20】
//（ page / ， Ajax ）
var offset;
offset=(Math.ceil(pageNums/20)*20)-parseInt(page_initial);
if(pageNums<21||offset<20)
{
$("#searchWordsByInitial_Pager ul button").slice((pageNums%20)+1).hide();
}
// 20 ， ，offset=19<20， Pager ；
if(search_pageNums==20)
{
$("#searchWords_Pager ul button.not_more_btn").show();
}
// page 1， LAST ； LAST ，
if($("#searchWordsByInitial_Pager ul button.not_more_btn").eq(0).html()==1)
{
$("#searchWordsByInitial_Pager ul button:eq(0)").hide();
}
else
{
$("#searchWordsByInitial_Pager ul button:eq(0)").show();
}
}
// NEXT
$("#more_forward").live("click",function(event){
// ， Last
$("#searchWordsByInitial_Pager ul button:eq(0)").show();
// page 20， 1-20 21-40
for(i=0;i<20;i++){
$("#searchWordsByInitial_Pager ul button.not_more_btn").eq(i).html(parseInt($("#searchWordsByInitial_Pager ul button.not_more_btn").eq(i).html())+20);
//
if($("#searchWordsByInitial_Pager ul button.not_more_btn").eq(i).html()==pageNums)
{
$("#searchWordsByInitial_Pager ul button").slice(i+2).hide();
}
}
})
// LAST
$("#more_backword").live("click",function(event){
// 20
$("#searchWordsByInitial_Pager ul button").show();
for(i=0;i<20;i++){
$("#searchWordsByInitial_Pager ul button.not_more_btn").eq(i).html(parseInt($("#searchWordsByInitial_Pager ul button.not_more_btn").eq(i).html())-20);
}
// Last
if($("#searchWordsByInitial_Pager ul button.not_more_btn").eq(0).html()==1)
{
$("#searchWordsByInitial_Pager ul button:eq(0)").hide();
}
else
{
$("#searchWordsByInitial_Pager ul button:eq(0)").show();
}
})
//
$(".initial-button-list button").live("click", function(event){
// A-Z active class， active； .attr .removeAttr；
$(".initial-button-list button").removeClass("active");
$(this).addClass("active");
//
initial_value = $(this).html();
page_initial=1;
// &action=list_by_initial&initial=O&page_initial=3
btnData = "&action=list_by_initial"+ "&initial="+initial_value+"&page="+page_initial;
$.ajax({
type: "POST",
url: processFile,
data: btnData,
success: function(data) {
$("#word_table_by_initials").show();
$("#word_table_by_initials").html("");
$("#word_table_by_initials").html(data);
init_searchWordsByInitial_Pager();
},
error: function(msg)
{
alert(msg);
}
});
});
// ( more )
$("#searchWordsByInitial_Pager button.not_more_btn").live("click", function(event){
// active class， active； .attr .removeAttr；
$("#searchWordsByInitial_Pager button").removeClass("active");
$(this).addClass("active");
//
page_initial=$(this).html();
// &action=list_by_initial&initial=O&page_initial=3
btnData = "&action=list_by_initial"+ "&initial="+initial_value+"&page="+page_initial;
$.ajax({
type: "POST",
url: processFile,
data: btnData,
success: function(data) {
$("#word_list_by_initials").hide();
$("#word_table_by_initials").html("");
$("#word_table_by_initials").html(data);
init_searchWordsByInitial_Pager();
},
error: function(msg)
{
alert(msg);
}
});
});
});
1 $("div button.not_more_bt")에서 앞의 두 선택 기 사이 에 빈 칸 이 있 고 뒤의 두 개 는 없습니다.마지막 은 클래스 선택 기 이기 때문에 button 뒤 를 따라 가 야 합 니 다.
2 .html() .val() .text() 구별
3 :eq(index),:lt(index);lt(index)의 index 는 0 에서 시작 되 며 변수 가 될 수 없 으 며 숫자 가 되 어야 합 니 다.
동적 index 가 필요 하 다 면 사용 할 수 있 습 니 다.
.eq(i)
4 var a=20;
var b=10;
var c;
c=a+b;
결 과 는 30 이 아니 야!2020 입 니 다!
정확 한 표기 법 은 c=parseInt(a)+ 입 니 다.parseInt(b);
감법 은 괜 찮 지만,그래도 좀 바 꾸 는 것 이 좋 겠 다.
PHP 의 함 수 는 intval()입 니 다.
5.코드 를 쓰기 전에 가장 좋 은 방안 을 세 워 야 한다.그렇지 않 으 면 다시 시작 하 는 것 이 더욱 힘 들 것 이다.
6 JS 코드 와 HTML 로 딩 의 논리 적 순서
더 많은 PHP 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있다.
본 논문 에서 말 한 것 이 여러분 의 PHP 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
laravel에 yo에서 angularJs&coffeescript를 사용할 수 있도록 한다.먼저 yo 명령을 사용할 수 있어야하므로 아래에서 설치 global에 설치한 곳에서 laravel의 프로젝트 루트로 이동. 클라이언트 코드를 관리하는 디렉토리를 만들고 이동합니다. 클라이언트 환경 만들기 이것으로 히...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
