jquery - jquery tablesorter pager 、上部および下部のページネーションリンク

Question

私はプロジェクトに取り組んでいます.jquery.tablesorter.pagerを使用したページネーションがあります. 上部にページネーションリンクがあります。今、同じリンクを下部にも追加したいと思います。一番下に pager div を追加しようとしましたが、うまくいきません。助けていただければ幸いです。

score 1 · Accepted Answer

私は同じ問題を抱えており、コードを次のようにカスタマイズしましたが、完全に機能します。アイデアは、2 つのページネーションコードを 1 つの div ( <div id="pager">) と 1 つのフォーム ( <form name="pagination" id="pagination_id">) に配置した後、Go ボタンとページ選択が JavaScript でデフォルトで機能しないフッターのページネーションによって引き起こされるいくつかの問題を処理する必要があるということです。

コードは次のとおりです。

<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] ボタンの JavaScript 関数を使用して、次を選択します。

// 入力 name-numofpages で ENTER キーが押されると、ボタン GO が実行されます (結果テーブルは選択されたページに移動します)

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;
}}

//フッターの [Go] ボタンをクリックした場合、フッターの numofpages2 値をヘッダーの numofpages2 値に置き、ヘッダーの [Go] ボタンをクリックします

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

注：何が起こったのですか？フッターのページネーション自体には機能がありません (正常に機能する次、前、最後、最初のボタンを除く)。フィールドに入力し、機能のないボタンをヘッダーのページネーション (機能はあります) に接続して機能させます。

score 1 · Accepted Answer

提案として、同じページャーを使用してみることができますが、スクロール時に必要に応じて上部または下部に表示されるようにします。

テーブルの上と下のページにプレースホルダーとして 2 つの div を追加しました。

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

次に、ページャー要素が表示されているかどうかを確認する JQuery 関数を追加しました。

// 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);
    }
}

このスクリプトをページの上部に追加して、スクロール時のページャーの位置を確認します。

     // 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");
        }
    });

また、この JQuery を使用して、初期ロードのデフォルト位置を設定できます。

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

score 0 · Accepted Answer

html の「pager」クラス参照を使用します。

<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>

次に、javascript で pageroptions を以下のように設定します。

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

jquery - jquery tablesorter pager 、上部および下部のページネーション リンク

3 に答える 3

Related

Reference

jquery - jquery tablesorter pager 、上部および下部のページネーションリンク