簡體   English   中英

如何顯示YUI分頁器中的總頁數?

[英]How to show Total number of pages in YUI Paginator?

我正在使用YUI Paginator API進行分頁,並且需要在屏幕上顯示“頁面總數”。 我看到API中有一個函數getTotalPages() ,但是我不確定如何使用它,沒有足夠的文檔。 另外,在查看了其他文檔之后,我嘗試使用{totalPages},但沒有用。 有人可以幫我解決這個問題嗎? 提前致謝!! 以下是我正在使用的代碼段。 請參考config中的模板對象:

config = {
                rowsPerPage: 100,

                template :
                    '<p class="klass">' +

                        '<label>Total pages: {totalPages}</label>'+
                        '<label>Page size: {RowsPerPageDropdown}</label>'+
                    '</p>',
                rowsPerPageDropdownClass : "yui-pg-rpp-options",
                rowsPerPageOptions  : [
                                   { value : 100 , text : "100" },
                                   { value : 250 , text : "250" },
                                   { value : 500 , text : "500" },
                                   { value : 1000 , text : "1000" },
                                   { value : tstMap[tabName].length , text : "All" }
                                ],
            };                                                            
 var myPaginator = new YAHOO.widget.Paginator(config);

分頁器實用程序允許您一次顯示一個項目或一組項目,具體取決於您希望一次顯示的項目數。

分頁器的主要功能包含在分頁器核心中,並混入了分頁器中,以使分頁器可以添加其他功能,同時不影響核心功能。 這使分頁器核心在您唯一需要的部分之后仍可用於以后使用或單獨使用。

由於分頁器可能包含大量接口,因此分頁器不包含任何可立即使用的UI。 但是,通過擴展所需的類並在Paginator中進行混合,可以將Paginator准備在任何基於基礎的模塊(如Widget)中使用。 在以下示例中顯示:

 YUI().use('paginator-url', 'widget', function (Y){
            var MyPaginator = Y.Base.create('my-paginator', Y.Widget, [Y.Paginator], {

               renderUI: function () {
                   var numbers = '',
                       i, numberOfPages = this.get('totalPages');

                   for (i = 1; i <= numberOfPages; i++) {
                       // use paginator-url's formatUrl method
                       numbers += '<a href="' + this.formatUrl(i) + '">' + i + '</a>';
                   }

                   this.get('boundingBox').append(numbers);
               },

               bindUI: function () {
                   this.get('boundingBox').delegate('click', function (e) {
                       // let's not go to the page, just update internally
                       e.preventDefault();
                       this.set('page', parseInt(e.currentTarget.getContent(), 10));
                   }, 'a', this);

                   this.after('pageChange', function (e) {
                       // mark the link selected when it's the page being displayed
                       var bb = this.get('boundingBox'),
                           activeClass = 'selected';

                       bb.all('a').removeClass(activeClass).item(e.newVal).addClass(activeClass);
                   });
               }

            });

            var myPg = new MyPaginator({
                           totalItems: 100,
                           pageUrl: '?pg={page}'
                       });

            myPg.render();
        });

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM