javascript - 如何在 YUI Paginator 中显示总页数？

Question

我正在使用 YUI Paginator API 进行分页，我需要在屏幕上显示总页数。我看到API中有一个函数getTotalPages()，但我不确定如何使用它，没有足够的文档。另外，在查看了其他一些文档后，我尝试使用 {totalPages} 但没有成功。有人可以帮我解决这个问题吗？提前致谢!!下面是我正在使用的代码片段。请引用配置中的模板对象:

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

Answer 1

分页器实用程序允许您根据您希望一次显示的项目数来显示一个项目或一组项目。

Paginator 的主要功能包含在 paginator-core 中，并混合到 paginator 中，以允许 paginator 添加额外的功能，同时保持核心功能不变。这使得分页器核心可以在以后使用，或者如果它是您唯一需要的部分，则可以单独使用。

由于分页器可能包含大量接口(interface)，因此分页器不包含任何现成的 UI。但是，通过扩展您所需的类并在 Paginator 中混合，Paginator 可以在任何基于 Based 的模块(例如 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();
        });