jQuery 플러그인 단순 Pagination 사용 예제

3174 단어
본고의 실례는 jQuery 플러그인 단순 Pagination의 사용 방법을 설명하였다.여러분에게 참고하도록 공유하겠습니다. 구체적으로는 다음과 같습니다.
프로젝트의 코드를 익히고 있는데 새로 필요한 것이 하나 추가되어 표를 페이지로 나누어야 한다. 이전의 코드에는 페이지로 나누는 코드가 있었는데 반나절을 보았지만 잘 보지 못했다.이전의 프로젝트는 비교적 오래되어 코드를 계속 익혔다.

단순 Pagination 사용


HTML 페이지


프로젝트에서 EJS-HTML 템플릿을 사용하기 때문에 처음부터 SimplePagination 플러그인을 인용하는 것을 기억하십시오. 이것은 비교적 간단하기 때문에 자세히 설명하지 않겠습니다.

JS 코드


var page_count = 0;
//        
var limit = 0 ;
//        
var regionLogListFunc = function(pageNumber){
  if(pageNumber=== undefined){
    pageNumber = 1;
  }
  //        
  $get("/regionCopyList?page_number="+ pageNumber,function(data,status){  
    var #### = jQuery("####-##");
    //   Table  tbody id 
    var updateRegionlogList = ''
     // for in              
    for (var i in data){
      #### +='';
      ##### +=''+data[i].##+'';
      ##### +=''+data[i].##'';
      #### +=''+data[i].##+'';
      #### +=''+data[i].##+'';      
      updateRegionlogList +='';      
    } 
   regionPriceList.empty();
    //         
   regionPriceList.append(updateRegionlogList);
  });
  var onPageClick = regionLogListFunc;
  //   DOM  ID
  jQuery("#pagination").pagination({
    item    :, //ejs  
    itemsOnPage : ,//ejs  
    cssStyle  :'light-theme',
    onPageClick :onPageClick,
    onInit   :regionLogListFunc,
  });
});


또 다른 문법은

var page_index;
var itemsOnPage = 1;
$(function() {
$("#pagination").pagination({
  items: {$page_count},    
  itemsOnPage: itemsOnPage,
  cssStyle: 'light-theme',
  onInit: changePage,  //      
  onPageClick: changePage  //       
  }); 
}); 
function changePage(page_index,event){ 
  listTable.gotoPage(page_index);  //gotoPage    ajax         
  document.getElementById('pageCurrent').innerHTML=page_index; 
  return true; 
}


더 많은 jQuery 관련 내용에 관심이 있는 독자들은 본 사이트의 주제를 보실 수 있습니다.,,,,,,,,,,,,,,,
본고에서 서술한 것이 여러분의 jQuery 프로그램 설계에 도움이 되었으면 합니다.

좋은 웹페이지 즐겨찾기