2019年8月27日LaravelとDataTable.jsをAjaxで連携させる方法さてさて、最近はプログラムを使った様々な「企画」のような記事を重点的に公開してきていましたが、たまにはそういったものとは違った「基本的なプログラム」も記事にしたいなということで、いろいろとアイデアを出している最中です。その中で以前から「気になっていたものの忘れてしまっていたもの」に気がつきました。それは、LaravelとDataTable.jsをAjaxを使って連携させることです。DataTable.jsというのは、通常のテーブルに検索やソート、ページリンクなどを一括で提供してくれる有名なjQueryのプラグインのことで、Ajaxを使う場合、データ取得は以下2つのパターンがあります。まかせるページが切り替わるごとにサーバーサイド(PHPなど)からデータを取得するもちろんデータが少なければ1番のシンプルな方法で問題はないのですが、これが何千、何万件となってくるとページ表示が目に見えて遅くなったりもします😫そこで登場するのが2番なのですが、この場合だと検索やソートなどは自前で実装する必要があります。そこで!今回は、この「ちょっと複雑だけど快適」な2番めの方法でLaravelとDataTableを連携させる方法をご紹介します。合わせて読みたいルートをつくるまずはじめに、ブラウザからアクセスするためのルートを作ります。routes/web.phpに以下を追加してください。'DataTableController@ajax');上のルートが実際に目にするページで、下のものはAjaxでデータを取得するものになります。モデル、マイグレーション、テストデータをつくるでは、DataTableで表示するためのデータを用意するためにモデル、マイグレーション、テストデータが必要になりますが、こちらは以前投稿した記事の内容と同じですのでそちらを参照してください。モデルとマイグレーションをつくるSeederでテストデータをつくるコントローラーをつくるまた、先ほどルートで指定したコントローラーは存在していないので、以下のコマンドで作成します。DataTableControllerすると、app/Http/Controllers/DataTableController.phpが作成されるので中身を以下のように変更します。}}【追記:2019.8.27】mb_convert_kana()の引数が足りなかったので追加しました。すみません😫ここで重要なのが、ajax()です。このメソッドはAjaxを通してDataTableのデータを用意するものですが、記事の冒頭でも書いたとおり、「検索」や「ソート」は自前で実装する必要があります。そのため、どちらもDataTableが送信してくるあるデータが存在していれば、検索、もしくはソートを実行するコードを用意しています。(検索はAnd検索になっていますので、お好みで改変してください)また、DataTableはパラメータとして現在のページ番号を送信してくれませんので、こちらもstartとlengthを使って自前で計算する必要があります。このコードの中では、パラメータ名の変更をしてないことに注目してください。本来はDataTableが指定するパラメータでデータを用意すべきですが、今回はDataTable側でパラメータを加工して実装します。ビューをつくるでは、最後にビューをつくります。resources/views/datatable.blade.phpにファイルを作成して、中身を以下のようにしてください。jQuery、DataTableはCDNを使って呼び出しています。</script></body></html>まず、DataTableの基本的な使い方は、以下のように<table></table>タグを作ってjQueryセレクタで専用メソッドを実行します。JavaScript$('#table').DataTable();そして、そのメソッドには各種オプション値を指定することができます。今回の例では何を指定したのかを見ていきましょう。searching以下のような検索ボックスを表示するかどうかを決めるオプションです。falseで指定します。orderingソート(並べ替え)をするかどうかのオプション。falseで指定します。有効にすると、以下のようにテーブルヘッダーに以下のような三角マークが表示されます。lengthChangeページごとに何件表示するかを指定できるようにするオプション。falseで指定します。有効にすると、以下のようなセレクトボックスが表示されます。serverSideこのオプションが今回必ず指定しないといけないオプションで、これをtrueにすることで、「ページごとにデータを用意する」設定になります。ajaxデータ取得するAjaxの設定をするオプションです。今回は、AjaxでアクセスするURLと、取得してデータを加工するdataFilter()を用意しています。Laravel側で特にパラメータ名の変更をしなかったのは、dataFilter()を準備するつもりだったからです。columnsカラム(テーブルの項目)を指定するオプションです。中身は以下のようになります。テーブルヘッダーに表示される項目名languageDataTableを多言語化するオプション。URLを指定することでCDNを使って日本語化することもできます。テストしてみるでは、実際にテストしてみましょう!まずは静止画から。はい!うまく表示されました。動画の方でも見てみましょう。はい!こちらもうまくいきました。お疲れ様でした😊✨おわりにということで、今回はLaravelとDataTableをAjaxで連携させるサンプルを紹介しました。最近のJavaScript業界では、特にAngularやReactが登場したあたりからjQueryは徐々に使われなくなってきているようですが、それでもやはりjQueryは便利ですし、何より今回のDataTableのような有能なプラグインがインターネットにはいくつも転がっていることを考えると、利用する選択肢としては優先的に考えていいのではないでしょうか。BootstrapをCSSフレームワークとして利用する場合はjQueryが必要な機能も多いですし、なによりたった一文字$と書くだけで要素にアクセスできるってのは、やはりすばらしい発明だと思います。(たしか、もともとはprototype.jsとかだった気がします😅)とにかく、DataTableってとても便利です。皆さんも挑戦してみてくださいね。開発スキルプログラム開発は15年以上。Laravel、Vue.jsをメインとしてPython(機械学習)やElectronの開発もお引き受けしております。過去2度カナダのバンクーバーに滞在していました。開発状況によりましては開発をお待ちいただく可能性がございますが、いつでもご相談は受けさせていただいております。お気軽にご連絡ください!お問い合わせフォーム開発してほしい機能を募集中!MITライセンスで公開します。詳しくはこちらの記事をご覧ください。ぷれりり・プレスリリース掲載無料のプレスリリース・スタンド!播磨孤道(はりまこどう)兵庫周辺のゆったり自転車一人旅の記事を書いていきます。