MithrilJSでページングを行うには？

Question

私は約50項目のメモリ内のデータセットを持っており、このデータセット用のページャを作成しようとしていますが、これを行う方法がわかりません。

私はカスタムフィルタ関数を使用して結果をフィルタリングしていますが、うまくいきますが、何とかページ数を取得する必要があります。

手がかりはありますか？

Answer 1

Mithril Infiniteは、アイテムの潜在的に大きなコレクションを処理する多目的なミスリルコンポーネントです。主な目的は、潜在的に無限のスクロールリストですが、Githubのページもa pagination demoです。

ページネーションはそれ自体難しいものではありません。最も単純なページ付けでは、表示するページを示すステートフルなインデックスと、リストをサブリストに分割してページを表現するメソッドが必要です。

キーは項目の私達の最初のリストのうちのページのリストを作成することをお減速機能である：

// 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 
} 

次に、あなたのコンポーネントのビューでyourlistでこれを起動する必要があります。

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