简体   繁体   English

如何显示YUI分页器中的总页数?

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

I am using YUI Paginator API for pagination and I need to show Total number of pages on screen. 我正在使用YUI Paginator API进行分页,并且需要在屏幕上显示“页面总数”。 I saw that there is a function getTotalPages() in API but I am unsure about how to use it, there isn't enough documentation. 我看到API中有一个函数getTotalPages() ,但是我不确定如何使用它,没有足够的文档。 Also after looking at some other documentation I tried using {totalPages} but didn't work. 另外,在查看了其他文档之后,我尝试使用{totalPages},但没有用。 Can somebody help me out in this issue? 有人可以帮我解决这个问题吗? Thanks in advance!! 提前致谢!! Below is the code snippet I am using. 以下是我正在使用的代码段。 Please refer to template object from config: 请参考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);

The Paginator utility allows you to display an item or a group of items depending on the number of items you wish to display at one time. 分页器实用程序允许您一次显示一个项目或一组项目,具体取决于您希望一次显示的项目数。

Paginator's primary functionality is contained in paginator-core and is mixed into paginator to allow paginator to have extra functionality added to it while leaving the core functionality untouched. 分页器的主要功能包含在分页器核心中,并混入了分页器中,以使分页器可以添加其他功能,同时不影响核心功能。 This allows paginator-core to remain available for use later on or used in isolation if it is the only piece you need. 这使分页器核心在您唯一需要的部分之后仍可用于以后使用或单独使用。

Due to the vast number of interfaces a paginator could possibly consist of, Paginator does not contain any ready to use UIs. 由于分页器可能包含大量接口,因此分页器不包含任何可立即使用的UI。 However, Paginator is ready to be used in any Based-based, module such as a Widget, by extending your desired class and mixing in Paginator. 但是,通过扩展所需的类并在Paginator中进行混合,可以将Paginator准备在任何基于基础的模块(如Widget)中使用。 This is displayed in the following example: 在以下示例中显示:

 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