Untitled

<!DOCTYPE html>
<html>

<head>
  <link href="//cdn.jsdelivr.net/picnicss/4.1.1/picnic.min.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <meta charset="utf-8">
  <title>Mag.JS</title>
</head>

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

  <div id="app">
    <h2>Pagination</h2>

    <dataPager></dataPager>
  </div>

  <div class="template hide">
    <div id="paginate">
      <div>
        <div class="listingTable">
          <field/>
        </div>
      </div>
      <a href="#" class="btn_prev">Prev</a>
      <a href="#" class="btn_next">Next</a> page: <span class="page"></span>
    </div>
  </div>

  <script src="//rawgit.com/magnumjs/mag.js/master/dist/mag.0.22.min.js"></script>
  <script src="//rawgit.com/magnumjs/mag.js/master/dist/mag.addons.0.21.min.js"></script>

  <script src="paginate.js"></script>
  <script src="app.js"></script>

</body>

</html>

var app = {}

app.controller = function(props) {

  this.h2 = 'My MagJS app!'

  this.dataPager = paginator({
    page: 1,
    records_per_page: 1,
    data: props.things
  });

}

app.view = function(state, props) {


}

var props = {
  things: [{
    name: 'one'
  }, {
    name: 'two'
  }]
}

mag.module("app", app, props)

.hide {
  display: none;
}
a { display: block;}
a:after {content:" \bb";}


table {
    max-width: 100%;
    background-color: transparent;
}
th {
    text-align: left;
}
.table {
    width: 100%;
    margin-bottom: 21px;
}
.table > tbody > tr > th, .table > tbody > tr > td {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #dddddd;
}
.table > thead > tr > th {
    vertical-align: bottom;
}
.table .table {
    background-color: #ffffff;
}
.btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 15px;
    line-height: 1.42857143;
    border-radius: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.btn:focus, .btn:active:focus, .btn.active:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}
.btn:hover, .btn:focus {
    color: #333333;
    text-decoration: none;
}
.btn:active, .btn.active {
    outline: 0;
    background-image: none;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn-default {
    color: #333333;
    background-color: #e7e7e7;
    border-color: #dadada;
}
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active {
    color: #333333;
    background-color: #d3d3d3;
    border-color: #bbbbbb;
}
.btn-default:active, .btn-default.active {
    background-image: none;
}
.list-unstyled {
    padding-left: 0;
    list-style: none;
}
.list-inline {
    padding-left: 0;
    list-style: none;
    margin-left: -5px;
}
.list-inline > li {
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
}
.text-center {
    text-align: center;
}

#Mag.JS

## plunk boilerplate - pagiante converted from

http://jsfiddle.net/Lzp0dw83/1/

var paginate = {
  current_page: 1,
  records_per_page: 3,
  data: []
}

paginate.prevPage = function() {
  if (this.current_page > 1) {
    this.current_page--;
    return this.changePage({
      page: this.current_page
    });
  }
}

paginate.nextPage = function() {
  if (this.current_page < this.numPages()) {
    this.current_page++;
    return this.changePage({
      page: this.current_page
    });
  }
}

paginate.changePage = function(options) {
  options = options || {};
  if (options.records_per_page) this.records_per_page = options.records_per_page;
  page = options.page;
  if (options.data) this.data = options.data;

  var btn_next;
  var btn_prev;
  var listing_table = [];
  var page_span;

  // Validate page
  if (page < 1) page = 1;
  if (page > this.numPages()) page = this.numPages();

  // listing_table.innerHTML = "";

  for (var i = (page - 1) * this.records_per_page; i < (page * this.records_per_page) && i < this.data.length; i++) {
    listing_table.push(this.data[i]);
  }
  page_span = page + "/" + this.numPages();

  if (page == 1) {
    btn_prev = "hidden";
  } else {
    btn_prev = "visible";
  }

  if (page == this.numPages()) {
    btn_next = "hidden";
  } else {
    btn_next = "visible";
  }

  return {
    btn_next: btn_next,
    btn_prev: btn_prev,
    page: page,
    page_span: page_span,
    listing_table: listing_table
  }
}

paginate.numPages = function() {
  return Math.ceil(this.data.length / this.records_per_page);
}


var paginator = mag.create('paginate', {
  controller: function(props) {
    props.obj = paginate.changePage({
      records_per_page: props.records_per_page,
      page: props.page,
      data: props.data
    });
  },
  view: function(state, props) {

    state.btn_next = mag.show(props.obj.btn_next == 'hidden' ? false : true);
    state.btn_next._onClick = function() {
      props.obj = paginate.nextPage();
    }
    state.btn_prev = mag.show(props.obj.btn_prev == 'hidden' ? false : true);
    state.btn_prev._onClick = function() {
      props.obj = paginate.prevPage();
    }

    state.page = props.obj.page;

    state.listingTable = props.obj.listing_table.map(function(item, i) {
      return {
        field: item.name
      }
    });

  }
})