【Jquery】【Underscore】で書いた配列に対してページネーションをしたい！

配列をhtmlに表示させることはできたのですが、表示させた項目が多いので、ページネーションをさせてユーザビリティをよくしたいです。

###html

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script
6<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script>
7<script type="text/javascript" src="js.js"></script>
8<title></title>
9<style type="text/css">
10	div.listArea {
11		width: 630px;
12	}
13	div.list {
14		overflow: hidden;
15	}
16	div.list div {
17		width: 200px;
18		float: left;
19		background-color: #ccc;
20		margin-top: 10px;
21		margin-left: 10px;
22		box-sizing: border-box;
23	}
24</style>
25</head>
26<body>
27<div class="listArea">
28    <div class="list"></ul>    
29</div>
30</body>
31</html>

###js(ファイル名：js.js)

javascript
1$(function() {
2var allList = [
3{name:"名前",adress:"住所",adress2:"住所2"},
4{name:"名前",adress:"住所",adress2:"住所2"},
5{name:"名前",adress:"住所",adress2:"住所2"},
6{name:"名前",adress:"住所",adress2:"住所2"},
7{name:"名前",adress:"住所",adress2:"住所2"},
8{name:"名前",adress:"住所",adress2:"住所2"},
9{name:"名前",adress:"住所",adress2:"住所2"},
10{name:"名前",adress:"住所",adress2:"住所2"},
11{name:"名前",adress:"住所",adress2:"住所2"},
12{name:"名前",adress:"住所",adress2:"住所2"},
13{name:"名前",adress:"住所",adress2:"住所2"},
14{name:"名前",adress:"住所",adress2:"住所2"},
15{name:"名前",adress:"住所",adress2:"住所2"},
16{name:"名前",adress:"住所",adress2:"住所2"},
17{name:"名前",adress:"住所",adress2:"住所2"},
18{name:"名前",adress:"住所",adress2:"住所2"},
19{name:"名前",adress:"住所",adress2:"住所2"},
20{name:"名前",adress:"住所",adress2:"住所2"},
21{name:"名前",adress:"住所",adress2:"住所2"},
22{name:"名前",adress:"住所",adress2:"住所2"},
23{name:"名前",adress:"住所",adress2:"住所2"},
24{name:"名前",adress:"住所",adress2:"住所2"},
25{name:"名前",adress:"住所",adress2:"住所2"},
26{name:"名前",adress:"住所",adress2:"住所2"},
27{name:"名前",adress:"住所",adress2:"住所2"},
28{name:"名前",adress:"住所",adress2:"住所2"},
29{name:"名前",adress:"住所",adress2:"住所2"}
30]; 
31    function init() { 
32        refleshHtml(allList);
33    }
34    function refleshHtml(list) {
35        var outputHtml = '';
36        if (list.length > 0) {
37            _.each(list, function(line, i) {
38                outputHtml += '<div>';
39                outputHtml += '<p>'+line.name+'</p>';
40                outputHtml += '<p>'+line.adress+'</p>';
41                outputHtml += '<p>'+line.adress2+'</p>';  
42                outputHtml += '</div>';             
43            });
44        } 
45        $('.list').html(outputHtml); 
46    }
47    init();
48});