データからページネーションが出来る。 #jscode
2022.11.10
おはようございます、昨日は朝が寒く昼間は暑い日でしたね😗。
さて、データからページネーションが出来るライブラリがある事を知りましたのでそちらの紹介と使い方です。今回、使用したのは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なんかのページネーションを使用していた事はありますが、フロント側で出来る事を知り驚きを隠せませんというのは大袈裟ですけど使い道は有るなって思います。
タグ
04, 1, 10, 1977, 2, 45, age, bday, hiragana, ID, JS, jscode, name, Pagination, qu, quot, コード, しらかわ, ソース, そちら, データ, ネーション, ページ, まさと, ライブラリ, 下記, 事, 今回, 使い方, 使用, 場合, 日, 昨日, 昼間, 朝, 正人, 白川, 簡単, 紹介,
あのサイトをリニューアルしました。👏、やっとのことで。 #renew #site #よさこい祭り
2022.09.25
おはようございます、昼間は暑い日もありますが夜は涼しくなりましたね😄。
今日は昨日、一日かけて【よさこい祭り動画検索】サイトをリニューアルしました。ソースコード(プログラム)も1からやり直しています。表示するのに結構時間がかかっていた部分は瞬時に表示されるように調整しました。
以前は検索結果が全て表示されるような仕様でしたが、ページに分割して表示されるように変更しました。また、検索ワードを入力すると検索結果(チーム名)が表示される様に変更しました。チーム名を押すとページへ遷移するようになっています。以前より直感的に操作出来る形になったかと思います。
尚、このサイトを作るにあってYOUTUBEのAPIを使用しているのですが、リアルタイムに動画を検索している訳では無くデータで押さえています。そのデータに関しては数ヶ月置きに更新するように致します。何故、データで押さえている理由はAPIの問い合わせに上限があり、その上限数を超える検索結果が返って来なくなる為です。この上限は申請を行えばある程度増やしてくれるそうですが、それでも上限数量を超えると表示されなくなるというデメリットがあるので、データで押さえています😌。
トイウコトデ、よさこい祭り動画検索サイトよろしくお願いします。
タグ
1, API, com, https, renew, site, yosakoi-video, youtube, コード, サイト, ソース, チーム, データ, プログラム, ページ, よさこい祭り, リアルタイム, リニューアル, ワード, 一, 今日, 仕様, 以前, 使用, 入力, 全て, 分割, 動画, 変更, 夜, 形, 操作, 数, 日, 昨日, 昼間, 時間, 検索, 瞬時, 結果, 表示, 訳, 調整, 遷移, 部分,
お部屋の温度と湿度を表示しています。密かに?
2020.04.26
お部屋の温度と湿度を表示しています、その情報を残すようにコードを書きました、スマホなどでは表示できないけれどPCでは表示可能です。自分が引き篭もりってあの時は寒かったなぁとかあの日は暑かったなぁという事を思い出すために作りました。因みにMY-ROOMのソースコードを見ると大体どんな仕様かわかると思います。
基本的に暑い日でも昼間はあまり冷房をつけないようにしていましたが、ここ数年、じぶんの暑さの限度を超えている日があり、そういう日はエアコンをつけてます。暑さは我慢できないのだけど、高知県ということもあり寒さにはある程度、我慢できて足温器だけで何とか生きていけます。今年はそれほど寒い日もなく暖冬かなと思います。ただ今年はとても暑くなりそうな気がします。
温暖化防止したいだけど・・・かなり暑いだよね。フロンは出していないのですが、それでも温暖化に影響有るだろうなぁと思いつつ。エアコンをつけてます。
ごめんなさい。
最後にMY-ROOMはこちら
https://zip358.com/my-room/
タグ
MY-ROOM, PC, エアコン, お部屋, かなり, コード, ここ, こと, じぶん, スマホ, ソース, ため, フロン, 事, 今年, 仕様, 冷房, 可能, 影響, 情報, 我慢, 数, 日, 昼間, 時, 暖冬, 気, 温度, 温暖化, 湿度, 自分, 表示, 足温器, 防止, 限度, 高知県,