Два jQuery плагин для пагинации на одной странице, кажется, не работает - PullRequest
Новая
       39

Два jQuery плагин для пагинации на одной странице, кажется, не работает

5 голосов
/ 09 апреля 2010

Я использую плагин jquery для разбивки на страницы ... Если есть один плагин для разбивки на страницы, для меня это не проблема ... Но если есть два, один работает, но другой не выглядит ... мой код, 

<div id="PagerUp" class="pager">

</div><br /><br /><br />
    <div id="ResultsDiv">

</div>
<div id="PagerDown" class="pager">

</div>

И мой JQuery имеет, 

<script type="text/javascript">
         var itemsPerPage = 5;
         $(document).ready(function() {
             getRecordspage(0, itemsPerPage);
             var maxvalues = $("#HfId").val();
             $(".pager").pagination(maxvalues, {
                 callback: getRecordspage,
                 current_page: 0,
                 items_per_page: itemsPerPage,
                 num_display_entries: 5,
                 next_text: 'Next',
                 prev_text: 'Prev',
                 num_edge_entries: 1
             });
         });

</script>

Вот что я получаю ...

альтернативный текст http://img52.imageshack.us/img52/5618/pagerse.jpg

Оба работают, но посмотрите на pagerup выбранную страницу 3, но PagerDown показывает 1 .... Как изменить один пейджер на событии обратного вызова других пейджеров в jquery ....

EDIT: идея Мефа не работает ... 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="jquery.js"></script>
    <link rel="Stylesheet" type="text/css" href="CSS/Main.css" />
      <script type="text/javascript" src="Javascript/jquery.pagination.js">
      </script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".pager").pagination(300, { callback: pagecallback,
                current_page: 0,
                items_per_page: 5,
                num_display_entries: 5,
                next_text: 'Next',
                prev_text: 'Prev',
                num_edge_entries: 1
            });
        });
    function pagecallback() {
        var paginationClone = $("#Pagination > *").clone(true);
        $("#Pagination2").empty();
        paginationClone.appendTo("#Pagination2");
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>

<div class="pager" id="pagination">
  <!-- the container for your first pagination area -->
</div>

<div id="results">
  <!-- the container where you show your results -->
</div>

<div class="pager" id="Pagination2">
  <!-- the container for your second pagination area -->
</div>
    </div>
    </form>
</body>
</html>

Ответы [ 2 ]

12 голосов
/ 12 апреля 2010

Поскольку это официально не поддерживается, вот обходной путь ( рабочая демонстрация ).

Шаг 1 Создайте HTML-разметку следующим образом: 

<div class="pagination" id="Pagination">
  <!-- the container for your first pagination area -->
</div>

<div id="results">
  <!-- the container where you show your results -->
</div>

<div class="pagination" id="Pagination2">
  <!-- the container for your second pagination area -->
</div>

Шаг 2 Идея:
Идея состоит в том, чтобы теперь использовать плагин для разбивки на страницы как обычно с первым div для разбивки на страницы. Но кроме того, мы хотим копировать все содержимое первого div пагинации во второй div пагинации каждый раз, когда происходит изменение страницы.

Шаг 3 Настройка страницыВыберите обратный вызов:
Добавьте следующие строки в конце функции обратного вызова: 

var paginationClone = $("#Pagination > *").clone(true);
$("#Pagination2").empty();
paginationClone.appendTo("#Pagination2");

Очень важно включить логический параметр (withDataAndEvents) в вызов .clone, иначе копия вашей нумерации страниц не будет иметь никаких событий щелчка.

Теперь, каждый раз, когда вы нажимаете на элемент нумерации страниц (независимо от того, является ли он оригиналом или копией), страница будет изменяться, и элементы пагинации будут обновляться соответствующим образом.

2 голосов
/ 11 апреля 2010

Вероятно, это не тот ответ, на который вы надеялись, но есть запрос функции для плагина jQuery Pagination, который предполагает, что наличие двух пейджеров на одной странице не поддерживается текущей реализацией:

http://plugins.jquery.com/node/11825

...