javascript - How to do paging in MithrilJS? -

i have dataset of 50 items in-memory , attempting create pager dataset, i'm unsure how this.

i'm using custom filter function filter results, , works fine, somehow need number of pages out.

any clues?

mithril infinite versatile mithril component handling potentially large collections of items. it's primary purpose potentially infinite scrolling list, github pages features a pagination demo.

pagination shouldn't difficulty per se. @ simplest pagination requires stateful index indicating page display, , method splitting list sub-lists represent pages.

the key reducer function create list of pages out of our initial list of items:

// empty collection of pages first argument. // function executes once each item in provided list foreach & map. function paginate( pages, item, index ){   // modulo (%) remainder of x after division y   // result of 0 means multiple.    // if pagelength 6, create new page @ 0, 6, 12, 18, etc...   if( index % pagelength === 0 )     pages.push( [] )    // push item onto last page   pages[ pages.length - 1 ].push( item )    // return pages   return pages } 

then need invoke on yourlist in component's view:

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 items according requirements           .filter( function( item ){ return item.includes( ctrl.filter ) } )           // paginate filtered list using our reducer           .reduce( paginate, [] )           // take page @ current index           [ ctrl.index ]             // map on items on page             .map( function( item ){               // produce view each item               return m( 'p', item )             } )        )     )   }  }