school of koi fish

Logging

データからページネーションが出来る。 #jscode

おはようございます、昨日は朝が寒く昼間は暑い日でしたね😗。

さて、データからページネーションが出来るライブラリがある事を知りましたのでそちらの紹介と使い方です。今回、使用したのは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なんかのページネーションを使用していた事はありますが、フロント側で出来る事を知り驚きを隠せませんというのは大袈裟ですけど使い道は有るなって思います。







    brown buffaloGドライブの画像仕分けがGASを使うと楽すぎでした! #gas #jscode前のページ

    cssとjsを動的に読み込むソースコード2。#jscode次のページ

    関連記事

    1. Logging

      わざわざ対策した、これでも。

      非同期通信する部分にデータ投げてアクセスカウンターをわざわざ増…

    2. apple magic keyboard

      Logging

      年間契約:サブスクディズニープラスを検討中。#再度検討中

      おはようございます。以前、サブスクディズニープラスに入会すると言って…

    3. Logging

      逆転:あっとまーく。

      逆転:あっとまーく。ある人が中小企業から大手企業へ転職のお誘いが来…

    4. Logging

      映画、グランツーリスモを観てきました。

      おはようございます、昨日、映画、グランツーリスモを観てきました。感想…

    5. Logging

      iPhone6にいつの間に買い替えた自分(´∀`)

      iPhone6にいつの間に買い替えました・・・・。替えるつもりは無か…

    6. Logging

      岡村靖幸:okamurayasuyuki.infoって(´Д`)

      岡村靖幸さんっていう音楽家がいるのですけど、このひと薬物使用での逮…

    2022年11月
     123456
    78910111213
    14151617181920
    21222324252627
    282930  

    カテゴリー

    アーカイブ

    PAGE TOP