Question

我在内存中有大约50个项目的数据集，并且我正在尝试为此数据集创建寻呼机，但我不确定如何执行此操作。

我使用自定义过滤器功能来过滤结果，并且工作正常，但我需要以某种方式获取页数。

任何线索？

Answer 1

Mithril Infinite是一个多功能的秘银组件，用于处理潜在的大型物品集合。它的主要目的是作为一个潜在的无限滚动列表，但它的Github页面还具有a pagination demo。

分页本身不应该是一个难题。在其最简单的分页处需要指示要显示的页面的有状态索引，以及用于将列表拆分成子列表以表示页面的方法。

键是一个很好的reducer函数，用于从我们的初始项列表中创建页面列表：

// The initially empty collection of pages is the first argument.
// The function executes once for each item in a provided list like forEach & map.
function paginate( pages, item, index ){
  // Modulo (%) is the remainder of x after division by y
  // A result of 0 means a multiple. 
  // So if pageLength is 6, we would create a new page at 0, 6, 12, 18, etc...
  if( index % pageLength === 0 )
    pages.push( [] )

  // Push the item onto the last page
  pages[ pages.length - 1 ].push( item )

  // Return the pages
  return pages
}

然后，您需要在组件视图中的列表中调用它：

var FilteredPages = {
  controller : function(){
    this.filter = ''
    this.index  = 0 
  },

  view : function( ctrl, pageLength, items ){
    return m( '.FilteredPages',
      m( 'input', {
        value : ctrl.filter,
        oninput : function(){
          ctrl.filter = this.value
          ctrl.index  = 0 
        }
      } ),

      m( 'p', 
        m( 'a', {
          innerHTML : 'Back',
          onclick   : function(){
            if( ctrl.index > 0 )
              ctrl.index--
          }
        } ),

        ' ',

        m( 'a', {
          innerHTML : 'Next',
          onclick   : function(){
            var newIndex = ctrl.index + 1

            if( newIndex < items / pageLength )
              ctrl.index = newIndex
          }
        } )
      ),

      m( '.page', 
        items
          // Filter the items according to your requirements
          .filter( function( item ){ return item.includes( ctrl.filter ) } )
          // Paginate the filtered list using our reducer
          .reduce( paginate, [] )
          // Take the page at the current index
          [ ctrl.index ]
            // Map over the items on this page
            .map( function( item ){
              // Produce a view for each item
              return m( 'p', item )
            } ) 
      )
    )
  } 
}

如何在MithrilJS中进行分页？

1 个答案: