List View Paging

by EMMNS

HTML

<!-- carousel -->
<div class="carousel">
    <div class="slider">
    <div id="expenses-list"></div>
    </div>
</div>
<!-- carousel -->
<!-- controls -->
    <ul id="controls" class="controls"></ul>
    <!-- controls -->

CSS

.carousel {width: 320px; height:480px; display:block; overflow-x: hidden; overflow-y: auto;}
.panel {width: 320px; height:480px; display:block; border: 1px solid #777; background: #E0D1CC; float:left;}
.slider { width: 320px; height:480px; display:block; border: 1px solid #555;}


/** CONTROLS */
.controls {
    position: relative;
    top: 20px;
}
.controls li {
    background: #E0D1CC;
    border: 1px solid #777;
    float: left;
    margin-right: 5px;
    text-align: center;
    width: 20px;
}

.controls li a {
    color: #555;
    display: block;
    padding: 5px;
    text-decoration: none;
}

#expenses-list {
margin: 0;
padding: 0;
list-style: none;
    position: relative;
}
#expenses-list h2 {
text-shadow: 1px 1px 0px 
rgba(15, 6, 3, .25);
font-size: 17px;
background: -webkit-linear-gradient(top, 
rgba(160, 203, 234, 1) 0%, 
rgba(108, 174, 223, 1) 100%);
font-weight: bold;
color: 
white;
height: 22px;
border-bottom: 1px solid 
rgba(1, 1, 1, .50);
border-top: 1px solid 
rgba(255, 255, 255, .50);
padding-left: 10px;
padding-top: 5px;
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
display: block;
width: 100%;
font-family: Helvetica;
}

#expenses-list .list-item {
border-bottom: 1px solid 
rgba(0, 0, 0, 0.10);
display: block;
height: 55px;
width: 100%;
padding: 10px 0 0 5px;
text-decoration: none;
text-align: left;
font-weight: lighter;
font-family: Helvetica;
background: -webkit-linear-gradient(top, 
rgba(240, 240, 240, 1) 0%, 
rgba(240, 240, 240, 1) 34%, 
rgba(230, 230, 230, 1) 100%);
}
expenses-list .list-item:active { background: -webkit-linear-gradient(top, rgba(240,240,240,1) 0%, rgba(240,240,240,1) 34%, rgba(231,231,231,1) 100%); }

#expenses-list .list-item * {
  float: left;
  position: relative;
}

#expenses-list .list-item .icon:first-child {
  position: relative;
  left: 10px;
}

#expenses-list .list-item .icon.arrow {
  position: relative;
  left: 95%;
  float: right;
  margin-top:...

JavaScript

var genHtmlArray = function () {
    var htm = '<h2 id="title">Jun 8, 2012</h2>';
    for (var i = 0; i < 150; i++) {
      htm += '<div class="list-item" id="expenseIdentifier-' + i + '"><div class="list-text"><a href=""><span class="title">Merchant ' + i + '</span><br><span class="expense-type">Expense Type</span></a></div><span class="price">$' + i + "</span></div>";
    }
    $("#expenses-list").html(htm);
  };
var splitPerSlice = function (myArray, perSlice) {
    var parts = Math.ceil(myArray.length / perSlice);
    var sliceArray = [];
    var finalArray = [];
    for (var i = 0; i < parts; i++) {
      sliceArray = [];
      var j = (i * perSlice);
      while (sliceArray.length != perSlice) {
        if (j == myArray.length) {
          break;
        }
        sliceArray.push(myArray[j]);
        j++;
      }
      finalArray.push(sliceArray);
    }
    return finalArray;
  };
$(document).ready(function () {
  var titleHTML = "";
  var expensesList = $("#expenses-list");
  genHtmlArray();
  var listArr = $("#expenses-list .list-item");
  listArr = splitPerSlice(listArr, 20);
  var listLength = listArr.length;
  titleHTML += listLength + " - ";
  $(".slider").width(listLength * $(".carousel").width() + (listLength * 2));
  titleHTML += $(".slider").width();
  $("#expenses-list").html("");

  for (var subList in listArr) {
    expensesList.append($("<div/>"));
    expensesList.children("div").addClass("panel");
  }


  var mySubList = [];
  var panelsList = expensesList.children(".panel");

  for (var i = 0; i < listLength; i++) {
    mySubList = listArr[i];
    for (var j = 0; j < mySubList.length; j++) {
      $(panelsList[i]).attr('id', 'panel-' + (i + 1));
      $(panelsList[i]).append(mySubList[j]);
    }
  }
  var controls = $("#controls");
  controls.append('<li><a href="#" class="Prev">&#60;</a></li>');
  for (var z = 1; z <= listLength; z++) {
    controls.append('<li><a href="#panel-' + z + '">' + z + '</a></li>');
  }
  controls.append('<li><a...