페이지 번호가있는 tablesorter 호출기 (v 2.10)

Question

tablesorter 호출기 플러그인의 최신 버전은 페이지 번호 지원 및 페이지 당 항목 수를 누락 한 것 같습니다. 이전 버전 (v2.0)에서는 그렇게 할 수있었습니다. 이것에 대한 이유는 새로운 버전에서 도입 된 행의 ajax 페칭을 활용해야하기 때문입니다 (모든 데이터를 한 번에 페치하면 성능이 저하됨). 전에. 그러나 많은 것이 v2.0에서 v2.10으로 변경되었습니다. 또한이를 달성하는 데 도움이 될 updatePageDisplay 함수를 수정하는 예제를 찾을 수 없었습니다. 아래 이미지는 제가 달성하기 위해 노력하고있어 보여줍니다 : 사전에

감사합니다.

Answer 1

최신 버전은 원본보다 훨씬 유연합니다. 우리는이 호출기 HTML로 시작한다면, (페이지 크기 번호는 this demo에 맞게 감소, 또한에만 볼 수와 총 레코드 번호를 게재 상단에있는 두 번째 호출기 블록 통지)

<div class="pager"> 
    <span class="left"> 
     # per page: 
     <a href="#" class="current">5</a> | 
     <a href="#">10</a> | 
     <a href="#">20</a> | 
     <a href="#">50</a> 
    </span> 
<span class="right"> 
     <span class="prev"> 
      <img src="http://mottie.github.com/tablesorter/addons/pager/icons/prev.png" /> Prev&nbsp; 
     </span> 
<span class="pagecount"></span> 
&nbsp;<span class="next">Next 
      <img src="http://mottie.github.com/tablesorter/addons/pager/icons/next.png" /> 
     </span> 
</span> 

이 CSS를

.left { float: left; } 
.right { 
    float: right; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -khtml-user-select: none; 
    -ms-user-select: none; 
} 
.pager .prev, .pager .next, .pagecount { cursor: pointer; } 
.pager a { 
    color: black; 
} 
.pager a.current { 
    text-decoration: none; 
    color: #0080ff; 
} 

을

이 스크립트

var $table = $('table') 
    .on('pagerInitialized pagerComplete', function (e, c) { 
     var i, pages = '', t = [], 
      cur = c.page + 1, 
      start = cur > 1 ? (c.totalPages - cur < 3 ? -3 + (c.totalPages - cur) : -1) : 0, 
      end = cur < 3 ? 5 - cur : 2; 
     for (i = start; i < end; i++) { 
      if (cur + i >= 1 && cur + i < c.totalPages) { t.push(cur + i); } 
     } 
     // make sure first and last page are included in the pagination 
     if ($.inArray(1, t) === -1) { t.push(1); } 
     if ($.inArray(c.totalPages, t) === -1) { t.push(c.totalPages); } 
     // sort the list 
     t = t.sort(function(a, b){ return a - b; }); 
     // make links and spacers 
     $.each(t, function(j, v){ 
      pages += '<a href="#" class="' + (v === cur ? 'current' : '') + '">' + v + '</a>'; 
      pages += j < t.length - 1 && (t[j+1] - 1 !== v) ? ' ... ' : (j >= t.length - 1 ? '' : ' | '); 
     }); 
     $('.pagecount').html(pages); 
    }) 
    .tablesorter({ 
     theme: 'blackice', 
     widgets: ['zebra', 'columns'] 
    }) 
    .tablesorterPager({ 
     // target the pager markup - see the HTML block below 
     container: $(".pager"), 
     size: 5, 
     output: 'showing: {startRow} to {endRow} ({totalRows})' 
    }); 

// set up pager controls 
$('.pager .left a').on('click', function() { 
    $(this) 
     .addClass('current') 
     .siblings() 
     .removeClass('current'); 
    $table.trigger('pageSize', $(this).html()); 
    return false; 
}); 
$('.pager .right .pagecount').on('click', 'a', function(){ 
    $(this) 
     .addClass('current') 
     .siblings() 
     .removeClass('current'); 
    $table.trigger('pageSet', $(this).html()); 
    return false; 
}); 

Answer 2

라이브 데모를 확인하고 사용자 정의 code.Using 당신이 한 페이지에 여러 테이블을 추가 할 수 있습니다이 확장 버전을 다운로드하십시오. http://www.pearlbells.co.uk/table-pagination/