DataTablesでAjaxで動的に取得したデータに対応させる方法！

DataTablesではデータベースにテーブルのデータを格納しておいて、Ajaxにより動的にデータを取得することができます。

DataTablesでAjaxで動的に取得したデータに対応させる方法を身に付けていると、大量のデータが存在するとき凄く便利です。

今回はJSONファイルを用いて、DataTablesでAjaxで動的に取得したデータに対応させる方法について紹介します。

ではJSONファイルを用いて、DataTablesでAjaxで動的に取得したデータに対応させる方法について解説します。

最初に適当なJSONファイルを作るのですが、この時1つ注意点があります。

必ずdataプロパティを用いてください。

そうでないとうまく読み込まれない時があります。

それではサンプルコードを用意したので、挙動を確認してみましょう。

JSのコード解説をします。

まずdataTableを使用するためのコードを書き、オプションでajaxを用います。

ajaxオプションのオブジェクトの中には、urlでJSONファイルの名前、typeにGETもしくはPOSTを記述します。

JSONファイルを用いた場合にはPOSTだとエラーが発生するので、GETを用いましょう。

そしてさらにcolumnsオプションにてdataプロパティにJSONファイルで記述したkeyの名前を記述します。

以上でDataTablesでAjaxで動的に取得したデータに対応させることができます。

いかがでしたでしょうか？

こちら少しDataTablesの応用的な内容となっており試行錯誤が必要です。

ただJSONファイルを用いた形式はここで紹介した方法で確実にできるので、ぜひ試してみてください。

【期間限定】全カリキュラム無料で提供中！

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい！