配列を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});
今後のためにもプラグインは使用しないでやってみたいと思います。
分かる方いたらご教授お願いします。