2020年5月7日Angularで無限スクロールをやったので一般のjqueryで。dataTablesというプラグインです。以前下記リンクで紹介していますが、ようわかっとらんかったんで(汗)再度書きます。参考リンク公式https://datatables.net/ディフォルトだと無限スクロールではなく、ページ番号をつけてページャーリンクをクリックしたり、一画面に表示する件数をボタンで変えたりするプラグインのようですが、応用することで無限スクロールに対応させられます。日本中の郵便番号を一覧表示するページがあり、これを無限スクロールで下記のように読み込むとします。※一般的な無限スクロールと違い、見えている部分が常に一定になります。このプラグインに限らずですが、ようは無限スクロールのポイントはどんなプラグインでも下記のようなところだと思います。スクロール量をJavaScript側で検知する検知した場合プログラムにlimit,offsetの情報をつけてGETでアクセスする(一般的にはひたすら追加していくものが多いlimitはいらないことが多いかもです。)その情報をもとにフロント側にデータを返すインストールdataTablesとdataTableのプラグインであるdatatables.net-scrollerも同時に読み込みます。datatables.net-scrollerがないと、スクロールしてもアクセスがサーバー側に飛ばないので注意です。bowerで下記のようにインストールできます。#cssも同時にinstallしておきましょう。(cssはどのフレームワークを選ぶかによって若干変わってきます。datatables.net-scroller#cssも同時にinstallしておきましょう。(cssはどのフレームワークを選ぶかによって若干変わってきます。//このプロパティがないとサーバーと通信できません。//見えている領域の幅です。//これをつけないとページャーリンクや一覧表示項目数などもともとついてたリンクが見えてしまいます。//プログラム側のURLです。実際にはこのあとにGET句がいろいろとつきます。//これをいれないとscrollが有効になりません。//件数表示はディフォルトでは英語なので日本語にしたい場合は下記のように記入します。"データが登録されていません。{$('#address').DataTable({//このプロパティがないとサーバーと通信できません。true,//見えている領域の幅です。"300px",//これをつけないとページャーリンクや一覧表示項目数などもともとついてたリンクが見えてしまいます。"sDom":"ti",//プログラム側のURLです。実際にはこのあとにGET句がいろいろとつきます。"http://192.168.1.28/library/public/address.php",//これをいれないとscrollが有効になりません。true},//件数表示はディフォルトでは英語なので日本語にしたい場合は下記のように記入します。"データが登録されていません。$sEcho];}発行されるURLは下記のようなものです。※プラグインがスクロールを検知すると自動的に下記のようなURLを生成します。http://192.168.1.28/library/public/address.php?sEcho=1&amp;iColumns=5&amp;sColumns=%2C%2C%2C%2C&amp;iDisplayStart=0&amp;iDisplayLength=117&amp;mDataProp_0=0&amp;sSearch_0=&amp;bRegex_0=false&amp;bSearchable_0=true&amp;bSortable_0=true&amp;mDataProp_1=1&amp;sSearch_1=&amp;bRegex_1=false&amp;bSearchable_1=true&amp;bSortable_1=true&amp;mDataProp_2=2&amp;sSearch_2=&amp;bRegex_2=false&amp;bSearchable_2=true&amp;bSortable_2=true&amp;mDataProp_3=3&amp;sSearch_3=&amp;bRegex_3=false&amp;bSearchable_3=true&amp;bSortable_3=true&amp;mDataProp_4=4&amp;sSearch_4=&amp;bRegex_4=false&amp;bSearchable_4=true&amp;bSortable_4=true&amp;sSearch=&amp;bRegex=false&amp;iSortCol_0=0&amp;sSortDir_0=asc&amp;iSortingCols=1&amp;_=14968325517671http://192.168.1.28/library/public/address.php?sEcho=1&amp;iColumns=5&amp;sColumns=%2C%2C%2C%2C&amp;iDisplayStart=0&amp;iDisplayLength=117&amp;mDataProp_0=0&amp;sSearch_0=&amp;bRegex_0=false&amp;bSearchable_0=true&amp;bSortable_0=true&amp;mDataProp_1=1&amp;sSearch_1=&amp;bRegex_1=false&amp;bSearchable_1=true&amp;bSortable_1=true&amp;mDataProp_2=2&amp;sSearch_2=&amp;bRegex_2=false&amp;bSearchable_2=true&amp;bSortable_2=true&amp;mDataProp_3=3&amp;sSearch_3=&amp;bRegex_3=false&amp;bSearchable_3=true&amp;bSortable_3=true&amp;mDataProp_4=4&amp;sSearch_4=&amp;bRegex_4=false&amp;bSearchable_4=true&amp;bSortable_4=true&amp;sSearch=&amp;bRegex=false&amp;iSortCol_0=0&amp;sSortDir_0=asc&amp;iSortingCols=1&amp;_=1496832551767今回重要な情報としてはlimitとoffsetですが、limitに相当するものがiDisplayLengthでoffsetがiDisplayStartです。これだと初回のページを読んだ時に空きができちゃうんですよね・・プロパティにいれて変えようとしましたが、反映されないので私の場合初回時(sEcho=1)のときに多めに読み込むようにしました。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。金額などを画面で計算するような請求関係のアプリを作っていますと、JSを駆使して集計作業をすることが多いのではないかと思います。ようはテーブルみたいなものがあり、それを集計するようなパターンです。...npmでのJSライブラリインストール&ビルド(※Laravel使用時)JavaScriptのインストールですが、いままではライブラリを1つ1つインストールしてました。bowerでインストールしたこともあったんですが、読み込み自体は1つ1つしていました。...JavaScriptのcall,bind+npmからのライブラリ読み込みでnpmを使ってライブラリ管理をする場合、個別にライブラリを読み込まず、package.jsonで読み込んだあと、一括してライブラリを読みこむことが一般的です。その時の処理に関して。...JavaScriptでのDom操作に関して画面系の複雑な処理をやる場合、JavaScriptを使うのですが、個人的に気をつけているポイントなど。