使用Jquery在流星中的分页问题?

时间:2014-02-27 09:35:29

标签: javascript jquery pagination meteor

我使用Jquery进行分页,但它不适用,也出现了一个错误,即:

Uncaught TypeError: Object [object Object] has no method 'customPaginate'

我对此没有任何了解所以请看下面的代码并建议我该怎么办?

代码:

  <template name="data">
        <div class="menu">
          <table>
                    <thead>
                        <tr>
                            <th><div class="cmenu"><u>A</u></div></th>

                            <th><div class="cmenu"><u>B</u></div></th>

                            <th><div class="cmenu"><u>C</u></div></th>

                            <th><div class="cmenu"><u>D</u></div></th>

                            <th><div class="cmenu"><u>E</u></div></th>
                        </tr>
                    </thead>

                    <tbody>

                        {{#each info}}

                           <tr>
                            <div class="userinfoitem">
                            <td><div class="info">{{a}}</div></td>
                            <td><div class="info">{b}}</div></td>
                             <td><div class="info">{{c}}></div></td>
                               <td><div class="info">{{d}}</div></td>
                               <td><div class="info">Act</div></td>
                             </div>
                          </tr>

                   {{/each}}

                    </tbody>

                </table>
                <div class="pagination">
                </div>
        </div>

    </template> 

Pagination.js

(function($)
{

   $.fn.customPaginate = function(options)
   { 
     var paginationContainer = this;
     var itemsToPaginate;
     var defaults = { 
      itemsPerPage : 5 
      };
      var settings = {};
      $.extend(settings,defaults,options);
     // pagenationContainer = $(settings.paginationContainer);
      itemsToPaginate = $(settings.itemsToPaginate);
      var numberOfPaginationLinks = Math.ceil((itemsToPaginate.length / settings.itemsPerPage));
      $("<ul></ul>").prependTo(paginationContainer);
      for(var index = 0 ; index < numberOfPaginationLinks ; index++)
      {
        paginationContainer.find("ul").append("<li>"+(index+1)+"</li>");
      }
      itemsToPaginate.filter(":gt("+ (settings.itemsPerPage - 1) +")").hide();
      paginationContainer.find("ul li").on('click',function()
      {
         var linkNumber = s(this).text();
         var itemsToHide = itemsToPaginate.filter(":lt("+(linkNumber - 1) * settings.itemsPerPage+")");
         $.merge(itemsToHide,itemsToPaginate.filter(":lt("+linkNumber * settings.itemsPerPage-1+")"));
         itemsToHide.hide();
         var itemsToShow = itemsToPaginate.not(itemsToHide);
         itemsToShow.show();
      });
   }

  }(jQuery)); 

custom.js

(function($)
{
 $(document).ready(function()
 {
    //here gets error customPaginate not defined
    $(".pagination").customPaginate({
       itemsToPaginate : ".userinfoitem"
       });

 });
}(jQuery)); 

1 个答案:

答案 0 :(得分:1)

meteor中的分页最容易使用像reactive-table这样的table / datagrid包。检查项目的GitHub,有几个例子。

更强大的分页包,但不是表格增强包,是meteor-pages