おはようございます、昨日は朝が寒く昼間は暑い日でしたね😗。
さて、データからページネーションが出来るライブラリがある事を知りましたのでそちらの紹介と使い方です。今回、使用したのはPagination.jsというライブラリです。使い方は簡単、下記のようなデータがあった場合、このようなソースコードを書いて使用します😮。
[
{
"id": 1,
"name": "白川 正人",
"hiragana": "しらかわ まさと",
"age": "45",
"bday": "1977年04月10日"
},
{
"id": 2,
"name": "大村 麻衣子",
"hiragana": "おおむら まいこ",
"age": "42",
"bday": "1979年12月11日"
},
{
"id": 3,
"name": "大原 静香",
"hiragana": "おおはら しずか",
"age": "53",
"bday": "1969年06月20日"
},
{
"id": 4,
"name": "吉田 佐代子",
"hiragana": "よしだ さよこ",
"age": "40",
"bday": "1982年05月24日"
},
{
"id": 5,
"name": "宮原 和弘",
"hiragana": "みやはら かずひろ",
"age": "22",
"bday": "2000年04月29日"
},
{
"id": 6,
"name": "伊藤 二郎",
"hiragana": "いとう じろう",
"age": "27",
"bday": "1995年02月18日"
},
{
"id": 7,
"name": "井上 明子",
"hiragana": "いのうえ あきこ",
"age": "55",
"bday": "1967年06月26日"
},
{
"id": 8,
"name": "恩田 雄",
"hiragana": "おんだ ゆう",
"age": "37",
"bday": "1985年09月25日"
},
{
"id": 9,
"name": "山崎 幸志",
"hiragana": "やまざき こうじ",
"age": "29",
"bday": "1993年03月24日"
}
] $.extend($.fn.pagination.defaults, {
className: 'paginationjs-theme-blue',
pageSize: 3
});
let url = "json data のurl";
(async () => {
await fetch(url).then((result) => result.json()).then(
(data) => {
data.reverse();
$('#demo').pagination({
dataSource: data,
callback: function (data, pagination) {
var html = table_make(data);
document.querySelector("#tbl").innerHTML = html;
}
})
}
)
})();
function table_make(data) {
return (data.map((element) => {
let str = "";
str += "<tr>";
str += ((Object.keys(element).map(el => "<td>" + element[el] + "</td>")).join(""));
str += "</tr>";
return str;
})).join("\n");
} <div class="col-12" id="demo">
<table class="table table-dark" id="tbl"></table>
</div>コードを抜粋して書きましたが、このコードを書く事とjsのライブラリとcssファイルもダウンロードするようにして下さいね🫠。
因みに自分はこのライブラリを初めて使用しましたが、結構使いやすいですね。今まで開発ではLaravelなんかのページネーションを使用していた事はありますが、フロント側で出来る事を知り驚きを隠せませんというのは大袈裟ですけど使い道は有るなって思います。
