jquery tablesorter 호출기, 위쪽 및 아래쪽 페이지 매김 링크

Question

프로젝트 작업 중입니다. jquery.tablesorter.pager를 사용하여 페이지 매김을 수행하고 있습니다. 상단에 페이지 매김 링크가 있습니다. 지금 나는 바닥에 동일한 링크를 추가하고 싶다. 페이저 div를 아래쪽에 추가했지만 작동하지 않습니다. 어떤 도움을 주셔서 감사합니다.

Answer 1

같은 페이저를 사용해 볼 수도 있지만 스크롤 할 때 필요에 따라 위 또는 아래에 표시 할 수 있습니다.

// Check if the element is in view 
function isScrolledIntoViewBottom(elem) { 
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 
    var my_elem_offset = $(elem).offset(); //Need to check the offset first as there is a bug in IE 
    if (my_elem_offset === null) { 
     return false; 
    } 
    else { 
     var elemTop = $(elem).offset().top; 
     var elemBottom = elemTop + $(elem).height(); 
     return (elemBottom >= docViewTop); 
    } 
} 

// Check if the element is in view 
function isScrolledIntoViewTop(elem) { 
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 
    var my_elem_offset = $(elem).offset(); //Need to check the offset first as there is a bug in IE 
    if (my_elem_offset === null) { 
     return false; 
    } 
    else { 
     var elemTop = $(elem).offset().top; 
     var elemBottom = elemTop + $(elem).height(); 
     return (elemTop <= docViewBottom); 
    } 
} 

이 추가 :

<div id="PagerTop"> 
    </div> 
    <table id="mytable" class="tablesorter"> 
    </table> 
    <div id="PagerBottom"> 
    </div> 

그런 다음 내가 호출기 요소가 뷰에 있는지 확인하는 JQuery와 기능을 추가 :

내가 테이블 위 아래 내 페이지로 자리 등이 div의 추가 스크롤시 페이징 위치를 확인하기 위해 페이지 상단으로 스크립트하십시오 :

 // When scrolling always make sure that the Pager for the table in view 
    // is either at the top or bottom of the table. 
    $(window).scroll(function() { 
     if (!isScrolledIntoViewBottom('#pager')) { 
      $("#pager").appendTo("#PagerBottom"); 
     } 
     if (!isScrolledIntoViewTop('#pager')) { 
      $("#pager").appendTo("#PagerTop"); 
     } 
    }); 

LSO, 당신이 jQuery를 사용 intial 부하의 기본 위치를 설정할 수 있습니다

// Set the Pagers to the top of the table on document load 
    $(document).ready(function() { 
     $("#pager").appendTo("#PagerTop"); 
    }); 

Answer 2

저도 같은 문제가를 내가 followa 같은 코드를 사용자 정의하고 완벽하게 작동합니다. 두 페이지 매기기 코드를 하나의 div (<div id="pager">)에 넣은 다음 한 양식 (<form name="pagination" id="pagination_id">) 을 입력하면 바닥 글 페이지 매기기에서 발생하는 몇 가지 문제를 처리해야합니다. 여기에서 이동 단추와 페이지 선택이 기본적으로 작동하지 않습니다. 자바 스크립트.

<div id="pager" class="pager" > 
<form name="pagination" id="pagination_id"> 
    <img src="addons/pager/icons/first.png" title="" class="first"/> 
    <img src="addons/pager/icons/prev.png" title="" class="prev"/> 
    <input type="text" class="pagedisplay" name="numberofpages" onKeyPress="return handleEnter(this, event)" style="width:63px;"/> 
    <input type="button" class="gotopage" id="gotoPageButton" value="GO" style="width:auto"/> 
    <img src="addons/pager/icons/next.png" title="Next" class="next"/> 
    <img src="addons/pager/icons/last.png" title="Last page" class="last"/> 
    <select class="pagesize" name="pagesize" onchange="changePageSize(this)"> 
         <option selected="selected" value="10">10 per page</option> 
         <option value="20">20 per page</option> 
         <option value="30">30 per page</option> 
         <option value="40">40 per page</option> 
        </select> 

    <table id="mytable" class="tablesorter"> blah blah</table> 

    <!-- pagination footer --> 
    <img src="addons/pager/icons/first.png" title="First page" class="first"/> 
    <img src="addons/pager/icons/prev.png" title=Previous class="prev"/> 
    <input type="text" class="pagedisplay" name="numberofpages2" onKeyPress="return handleEnter(this, event)" style="width:63px;"/> 
    <input type="button" class="gotopage" id="gotoPageButton2" value="GO" onclick="clickGObutton()" style="width:auto"/> 
    <img src="addons/pager/icons/next.png" title="Next" class="next"/> 
    <img src="addons/pager/icons/last.png" title="Last page" class="last"/> 
    <select class="pagesize" name="pagesize2" onchange="changePageSize(this)"> 
     <option selected="selected" value="10">10 per page</option> 
     <option value="20">20 per page</option> 
     <option value="30">30 per page</option> 
     <option value="40">40 per page</option> 
    </select> 
</form> 
</div> 

다음

이동 버튼에 대한 자바 스크립트 기능 선택 : 여기서

코드이다

//에서 결과 테이블은 (다음 버튼 GO 실행되는 입력 이름 numofpages 누를 키를 누르 선택한 페이지로 이동)

function handleEnter (field, event) { 
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode; 
if (keyCode == 13) { 
    var i; 
    for (i = 0; i < field.form.elements.length; i++) 
     if (field == field.form.elements[i]) { 
      break; 
     } 

    if (field.name == "numberofpages2") { 
     document.forms["pagination"]["numberofpages"].value = field.value; 
    } 
    document.getElementById("gotoPageButton").click(); 

    return false; 
} 
else 
return true;} 

// 변경 헤더 선택하면 바닥 글에도 변경됩니다. 그리고 그 반대.

function changePageSize(field) { 
if (field.name == "pagesize") { 
    document.forms["pagination"]["pagesize2"].value = field.value; 
} 
else if (field.name == "pagesize2") { 
    document.forms["pagination"]["pagesize"].value = field.value; 
}} 

는 // 바닥 글 이동 버튼을

function clickGObutton(){ 
document.forms["pagination"]["numberofpages"].value = document.forms["pagination"]["numberofpages2"].value 
document.getElementById("gotoPageButton").click();} 

참고 헤더의 numofpages2 값에 바닥 글의 numofpages2 값을 넣어 헤더에 이동 버튼을 클릭 클릭하면 : 무슨 일? 바닥 글 페이지 매기기는 필드를 채우고 아무 기능이없는 단추를 기능을 가진 헤더 페이지 매기기에 연결하여 기능을 수행하는 기능을 가지고 있습니다 (다음, 이전, 마지막, 먼저 작동하는 단추 제외).

Answer 3

사용자 HTML에서 "호출기"클래스 참조 : 다음

<div class="pager"> 
    <span class="icon-step-backward first"></span> 
    <span class="icon-backward prev"></span> 
    <span class="pagedisplay"></span> 
    <span class="icon-forward next"></span> 
    <span class="icon-step-forward last"></span> 
    <select class="pagesize"> 
     <option value="10">10</option> 
     <option value="25">25</option> 
     <option value="50">50</option> 
     <option value="100">100</option> 
    </select> 
</div> 
<table> 
    ... 
</table> 
<div class="pager"> 
    <span class="icon-step-backward first"></span> 
    <span class="icon-backward prev"></span> 
    <span class="pagedisplay"></span> 
    <span class="icon-forward next"></span> 
    <span class="icon-step-forward last"></span> 
    <select class="pagesize"> 
     <option value="10">10</option> 
     <option value="25">25</option> 
     <option value="50">50</option> 
     <option value="100">100</option> 
    </select> 
</div> 

자바 스크립트에 다음과 같은 pageroptions 설정 :

var pagerOptions = { 
    container: $(".pager"), 
    ...other options... 
};