データからページネーションが出来る。 #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, １, 10, 1977, 2, 45, age, bday, hiragana, ID, JS, jscode, name, Pagination, qu, quot, コード, しらかわ, ソース, そちら, データ, ネーション, ページ, まさと, ライブラリ, 下記, 事, 今回, 使い方, 使用, 場合, 日, 昨日, 昼間, 朝, 正人, 白川, 簡単, 紹介,
映画、ザ・バットマンを観ましたよ。シネマの評価基準に騙されないように？
2022.03.12
昨日、映画、ザ・バットマンを観ました😏。
今回のザ・バットマンを観てわからない人はわからないだろうなと思いました。結果的に言えばリドラーは誰だという事ばかりに囚われていると話が楽しめないよね？、俯瞰してこの映画観ないとストリーがわからない人もいるかなって思います。そういう意味でもバットマンのちょっと昔のバットマンのリメイク作品を観ることをオススメします。
時代によって正義の像も変わっていっていますよね、昔の映画は悪を倒して終わりみたいな映画が多かったように感じます。この頃の映画は悪にも理由があったり戦うに理由づけがあったりとリアリティのある映画を作ろうとしている監督さんが増えているような気がします。
それにはグローバル化が関係しているような気がしますね。
タグ
04, aCDB-I, com, https, TxA, watch, www, youtube, おすすめ, グローバル, こと, サ, シネマ, ストリー, それ, ちょっと, ツケ, バットマン, ラー, リアリティ, りと, リメイク, 事, 人, 今回, 作品, 俯瞰, 像, 基準, 悪, 意味, 昔, 映画, 昨日, 時代, 正義, 気, 理由, 監督, 評価, 話, 誰, 関係, 頃,
androidアプリをはじめて申請しました。リリースされるかは？
2021.07.21
高知県も梅雨明け宣言したころだと思います、そんな事を考えながら雷の音を聞きながらこの記事を書いています。
この記事が公開された時にはandroidアプリがリリースされている頃だと思います。
この記事はアンドロイドアプリ(Flutterアプリ)を作ったときに戸惑ったところなどを本人しかわからない形で箇条書きにしたものです。他人が見てもわかるようには書いていません。
尚、参考にしたサイトはこちらになります。
https://passe-de-mode.uedasoft.com/ja/tips/software/device/flutter/flutter04.htm
flutter_icons:
android: true
ios: true
image_path: "lib/assets/icon.png"flutter pub getflutter pub run flutter_launcher_icons:mainkeytool -genkey -v -keystore C:\android\jks\key.jks -storetype JKS -keyalg RSA -keysize 2048 -validity 10000 -alias key signingConfigs {
release {
storeFile file("C:\\android\\jks\\key.jks")
storePassword "Password"
keyAlias "key"
keyPassword "Password"
}
}
buildTypes {
release {
// TODO: Add your own signing config for the release build.
// Signing with the debug keys for now, so `flutter run --release` works.
signingConfig signingConfigs.release
}
}flutter build appbundleタグ
04, Android, assets, com, device, fl, flutter, GET, htm, https, icon, icons, image, iOS, ja, lib, passe-de-mode, path, png, pub, quot, run, software, tips, true, uedasoft, アプリ, アンドロイド, こちら, ころ, サイト, とき, ところ, もの, リリース, 事, 他人, 公開, 参考, 宣言, 形, 時, 本人, 梅雨明け, 申請, 箇条書き, 記事, 雷, 音, 頃, 高知県,