JQuery TableSorter пейджер, верхняя и нижняя ссылки на страницы - PullRequest
Новая
       8

JQuery TableSorter пейджер, верхняя и нижняя ссылки на страницы

0 голосов
/ 27 ноября 2010

Я работаю над проектом, он имеет нумерацию страниц, используя jquery.tablesorter.pager. Он имеет ссылки на страницы сверху. Теперь я хочу добавить ту же ссылку внизу. Я попытался добавить пейджер div внизу, но это не работает. любая помощь приветствуется.

Ответы [ 3 ]

1 голос
/ 20 марта 2012

У меня та же проблема, и я настроил код, как следует, и он работает отлично.Идея состоит в том, что вы помещаете 2 кода разбиения на страницы в один div (<div id="pager">) и в одну форму (<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>

, затем функции javascript для кнопки Go и выбор:

// При нажатии клавиши 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;
}}

// если нажать кнопку «Перейти» нижнего колонтитула, поместите значение numofpages2 нижнего колонтитула в значение numofpages2 заголовка и нажмите кнопку «Перейти» в заголовке 

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

ПРИМЕЧАНИЕ: что случилось?Разбиение на нижний колонтитул само по себе не имеет никакой функциональности (за исключением кнопок «следующий», «предыдущий», «последний», «первый», «первый», которые работают нормально), мы просто заполняем поля и подключаем без функциональности кнопки к «нумерации» верхнего колонтитула (который имеет функциональность), чтобы они работали.

1 голос
/ 19 октября 2011

В качестве рекомендации вы можете попробовать использовать тот же пейджер, но сделать так, чтобы он отображался сверху или снизу, как требуется при прокрутке.

я добавил 2 делителя в качестве заполнителей на мою страницу выше и ниже таблицы: 

    <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");
    });
0 голосов
/ 25 января 2016

Пользователь использует ссылку на класс "пейджер" в 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>

Затем в javascript установите параметры пейджера, как показано ниже: 

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