Javascriptを使ったページネーションの実装
この記事を参考にして実装しました。
Pagenation.jsとjQueryをダウンロード
ここからPagenation.js と jQueryをダウンロード
<head>内に「pagination.css」のリンクを記述
</body>の手前にjQueryとPagenation.jsを記述
<head>
<link rel="stylesheet"
href="pagination.css">
</head>
<body>
<script src="jquery-3.5.1.min.js"></script> <script
src="pagination.js"></script> </body>
javascriptの記述
[1]の配列に必要事項を記入
title：記事のタイトル
intro：記事の紹介文
link：記事のリンク
category：カテゴリ
class：カテゴリにつくクラス （下のコードの39行目と4行目を参照）
date：日付
photo：写真のリンク
<script>
// [1] 配列のデータを用意
var diary = [
{
title: "Javascriptを使ったページネーションの実装",
intro:"トップページの記事が増えてきたので、何とかページネーションで最新の記事だけを表示できないかと思っていたら、いい記事を発見しました。カスタマイズして実装することができました。",
link: "PC/PC 20200708.html",
category: "Programming",
class: "Programming",
date: "2020年07月08日",
photo:"../images/PC/Programing/codePrettify/5.jpg"
},
// ...以下略
]
// [2] pagination.jsの設定
$(function() {
$('#diary-all-pager').pagination({ //
diary-all-pagerにページャーを埋め込む
dataSource: diary,
pageSize: 10, // 1ページあたりの表示数
prevText: '< 前へ',
nextText: '次へ >',
// ページがめくられた時に呼ばれる
callback: function(data, pagination) {
// dataの中に次に表示すべきデータが入っているので、html要素に変換
$('#diary-all-contents').html(template(data)); //
diary-all-contentsにコンテンツを埋め込む
}
});
});
// [3] データ1つ1つをhtml要素に変換する
function template(dataArray) {
return dataArray.map(function(data) {
return '<div class="list"><a href="'+ data.link + '">'
+ '<h3 class="title">' + data.title + '</h3>'
+ '<p class="intro">' + data.intro + '</p>'
+ '<img class="photo" src="' + data.photo + '">'
+ '<p class="category category-' + data.class + '">' +
data.category + '</p>'
+ '<p class="date">' + data.date + '</p></a></div>'
})
}
</script>
[3]で変換されたHTML
<a href="PC/PC 20200708.html">
<h3
class="title">Javascriptを使ったページネーションの実装</h3>
<p
class="intro">トップページの記事が増えてきたので、何とかページネーションで最新の記事だけを表示できないかと思っていたら、いい記事を発見しました。カスタマイズして実装することができました。</p>
<img class="photo"
src="../images/PC/Programing/codePrettify/5.jpg">
<p class="category
category-Programming">Programming</p>
<p class="date">2020年07月08日</p>
</a>
CSSで装飾
pagination.cssにコピペすればOKです。お好みで調整してください。
特に123行目以降のカテゴリは自分のブログにあったカテゴリと色を指定すればカラフルになります。
//ページネーション部分の装飾
.paginationjs-pages > ul > li > a {
padding: 6px 18px;
color: white;
background-color: lightgreen;
border: 1px solid darkcyan;
}
.paginationjs-pages > ul > li > a:hover {
color: black;
background-color: white;
}
.paginationjs-pages > ul > li.active > a {
color: black;
background-color: white;
}
.paginationjs-pages > ul > li.disabled > a {
color: black;
background-color: white;
}
.paginationjs-prev {
margin: 0 16px 0 0;
}
.paginationjs-next {
margin: 0 0 0 16px;
}
.paginationjs-page {
margin: 0 4px;
}
.paginationjs-pages > ul {
display: flex;
align-items: baseline;
}
.paginationjs-pages > ul > li.paginationjs-ellipsis.disabled > a {
border: none;
color: black;
margin: 0 4px;
padding: 0;
}
// コンテント部分
p, a, ul, li {
margin: 0;
padding: 0;
border: 0;
}
h2{
margin: 20px 0 0 20px;
}
#diary-all-contents,
#diary-all-contents2,
#diary-all-contents{
max-width: 800px;
}
ul {
list-style: none;
/* display: flex; */
min-height: 30px;
}
li p {
margin: 0 20px;
}
.list {
line-height: 1;
border-bottom: 1px solid #d8d8d8;
padding: 12px 0;
text-align: left;
}
.list p{
margin-left: 10px;
}
.list a {
align-items: center;
text-decoration: none;
display: grid;
grid-template:
"photo title title" 1fr
"photo intro intro" 2fr
"photo category date" 15px
/200px 150px 1fr;
}
.title{
grid-area: title;
padding: 5px;
font-size: x-large;
font-weight: bold;
margin-left: 10px;
}
.intro{
grid-area: intro;
padding: 5px 10px;
}
.photo{
grid-area: photo;
}
.category{
grid-area: category;
}
.date{
grid-area: date;
}
.list .date {
color: darkblue;
margin-left: 15px;
}
.list .category {
margin: 0 5px 0;
padding: 4px;
text-align: center;
color: white;
}
.container{
display: flex;
}
.paginationjs-pages{
display: flex;
align-items: center;
justify-content: center;
}
/* カテゴリによって違う背景色に */
.list .category-Plant {
background-color: lightblue;
}
.list .category-Other {
background-color: lightseagreen;
}
.list .category-cat {
background-color: lightskyblue;
}
.list .category-Daily {
background-color: lightcoral;
}
.list .category-Programming {
background-color: lightcoral;
}
.list .category-Word {
background-color: lightblue;
}
.list .category-windows {
background-color: lightseagreen;
}
.list .category-Knowledge {
background-color: lightseagreen;
}
.list .category-Techniques {
background-color: lightcoral;
}
.pager, .pager2, .pager3 {
margin: 18px 0 0 0;
align-items: center;
}
.photo{
width: 190px;
margin: 0 10px;
box-shadow: 2px 2px 4px gray;
}
ブラウザで表示
感想
これからは配列[1]の部分に更新内容を追加するだけでトップに最新記事が表示され、古いものは2ページ以降に勝手に移行してくれるので、更新がとても楽になりました。
