2年前に投稿

DataTables で Ajax data の取得と Child rows の追加

DISCLAIMER: This article is more than a year old and may not be current.

この記事は約 3 分で読めます。

4.5

DataTables 本体に表示する
データを取得します。

Ajax sourceからテーブルの
コンテンツデータをロードします。

Ajax (エイジャックス) とは、
「Asynchronous JavaScript + XML」の略で
JavaScriptの非同期通信を使って、
XML形式のデータをWebサーバから貰ってくること。
$('#example').dataTable( {
  "ajax": "data.json"
} );
JSON (ジェイソン) とは、
JavaScriptと相性が良い、
ファイルの書き方ルールのひとつ。
ただのテキストファイル。
中身がJSONのルールに従って書かれていれば、
それはJSONファイルです。
{
    "data": [
        // row 1 data source,
        // row 2 data source,
        // etc
    ]
}

上記に加え、
Child rows を追加して
詳細情報を表示します。

詳細情報の内容は、
赤血球恒数 (MCV、MCH、MCHC) を
追加表示しています。

赤血球恒数とは、
赤血球1個の平均的な大きさや、
その中に含まれる
ヘモグロビン(血色素)の量や
濃度を調べる検査。

結果は以下。

Test date RBC (106/μL): Hgb (g/dL): Hct (%):
Test date RBC (106/μL): Hgb (g/dL): Hct (%):

DataTables の設定等、
詳しくは↓のリストを参照の事。

詳しくは
Child rows
(show extra / detailed information) を
参照して頂きたいのですが、
この記事では加えて以下の項目を
追加して表示しています。

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
DataTables で Ajax data の取得と Child rows の追加

カスタマイズ - JSJS,Library,Reference

Posted by FOUR 4to6