Untitled

<!DOCTYPE html>
<html>

<head>
  <link href="http://www.picnicss.com/nut/picnic_3_2.min.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <script src="//rawgit.com/magnumjs/mag.js/master/mag.min.js"></script>
  <meta charset="utf-8">
  <title>Mag.JS</title>
</head>

<body>
  <h1>Hello Mag.JS!</h1>
  <a href="https://github.com/magnumjs/mag.js">GitHub</a>
  <hr/>

  <div id="app">
    <bar>
    <h1></h1>
    <h3></h3>
    </bar>
    <div id="pagination-wrap">
      <div class="info"></div>
      <ul class="pagination">
        <li class="prev">
          <a></a>
        </li>
        <li class="range"><a></a></li>
        <li class="next">
          <a></a>
        </li>
      </ul>
    </div>
  </div>


  <script src="//rawgit.com/magnumjs/mag.js/master/src/mag.addons.js"></script>
  <script src="pagination.js"></script>
  <script src="app.js"></script>

</body>

</html>

var App = {
  controller: function() {
    this.page = mag.prop(2)
  },
  view: function(ctrl) {


    ctrl.bar = {
      'h1': "Pagination Component",
      'h3': "We are on page " + (ctrl.page() + 1)
    }

    mag.module('pagination-wrap', Pagination, {
      totalRowCount: 64,
      perPage: 10,
      onPageChange: ctrl.page
    })

  }
}

mag.module('app', App)

.hide {
  display: none;
}


li {
  list-style-type:none;
}

.total {
  background: #eee;
  padding: 1rem;
  margin: 1rem 0;
}

ul.pagination > li {
  float: left;
  border: 1px solid #ccc;
  border-left: none;
  border-right: none;
}
ul.pagination > li:hover {
  background: #eee;
}
ul.pagination > li.prev,
ul.pagination > li.next {
  padding: 0 0.3rem;
}

ul.pagination > li > a,
ul.pagination > li > span {
  color: #222;
  display: inline-block;
  height: 2rem;
  line-height: 2rem;
  min-width: 2rem;
  text-align: center;
  text-decoration: none;
}
ul.pagination > .active > a,
ul.pagination > .active > span,
ul.pagination > .active > a:hover,
ul.pagination > .active > span:hover,
ul.pagination > .active > a:focus,
ul.pagination > .active > span:focus {
  color: #fff;
  background-color: #e5412d;
  border-color: #e5412d;
  cursor: default;
}

#Mag.JS

## plunk boilerplate

 window.Pagination = {}

 Pagination.controller = function(options) {
   var ctrl = this
   ctrl.currentPage = mag.prop(options.startOnPage || 0)

   ctrl.goToPage = function(pageCount, pageNum) {
     if (pageNum < 0 || pageNum > pageCount - 1) return;
     ctrl.currentPage(pageNum)
     options.onPageChange(pageNum)
   }

 }

 Pagination.view = function(ctrl, options) {
   var total = options.totalRowCount || 0
   var currentPage = ctrl.currentPage()
   var rowStart = currentPage * options.perPage
   var rowEnd = Math.min(rowStart + options.perPage, total)
   var pageCount = Math.ceil(total / options.perPage)


   ctrl.info = "Showing " + (rowStart + 1) + " to " + rowEnd + " of " + total + " entries",

     ctrl.pagination = {
       prev: {
         _class: (currentPage == 0 ? 'disabled' : ''),

         a: {
           _href: "#",
           _onclick: toPage(currentPage - 1),
           _text: "\u2190 Previous"
         }

       },

       range:  pageRange(pageCount, currentPage).map(numberAnchor),


       next: {
         _class: (currentPage == pageCount - 1 ? 'disabled' : ''),
         a: {
           _href: "#",
           _onclick: toPage(currentPage + 1),
           _text: "Next \u2192"
         }

       }
     }


     function numberAnchor(num) {
       var isCurrent = (num == currentPage)
       
       return  {
         _class: (isCurrent ? 'active' : ''),
         a : {
           _text: num + 1,
           _href: (!isCurrent ? '#' : ''),
           _onclick: toPage(num)
         }
       }

     }

     function toPage(num) {
       return function(e) {
         e.preventDefault();
         ctrl.goToPage(pageCount, num)
       }
     }
 }

Array.range = function (start, end) {
  var result = []
  for (var i=start; i < end; i++) {
    result.push(i)
  }
  return result
}

 function pageRange(pageCount, currentPage) {
   if (pageCount <= 5) return Array.range(0, pageCount)

   var start = Math.max(currentPage - 2, 0)
   var end = start + 5

   if (end > pageCount) {
     start -= end - pageCount
     end = pageCount
   }
   return Array.range(start, end)
 }