WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

ページネーションの導入が簡単に出来る「paginathing.js」

2020年7月クラス jQueryプラグイン

ページネーション（pagination）とは、日本語でページ割りという意味で、Web制作においては、検索結果一覧など、内容の多いページを複数のWebページに分割し、各ページへのリンクを並べてアクセスしやすくするために設置します。

f:id:yachin29:20190628135452p:plain

BootStrap CDN ver3.3.6

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

ソースコード

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ページネーションの実装</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/paginathing.js"></script>
<script>
jQuery(document).ready(function($){
		$('.list-group').paginathing({
	    		perPage: 4,
	    		containerClass: 'panel-footer'
		})
	});
</script>
</head>

<body>
<div class="container">

<ul class="list-group">
<li class="list-group-item">
</li>
<li class="list-group-item">
</li>
<li class="list-group-item">
</li>
<li class="list-group-item">
</li>
</ul>

</div>
</body>
</html>