web-dev-qa-db-ja.com

Datatablesで空のデータメッセージを表示する方法

時々サーバーから空のデータを取得すると、DataTablesにデータが見つかりませんというメッセージを表示したいですか？これはどのように可能ですか？

jqueryjsonasp.net-mvcdatatables
69
Naruto

空のテーブルに表示されるメッセージをカスタマイズするには、次を使用します。

$('#example').dataTable( {
    "oLanguage": {
        "sEmptyTable":     "My Custom Message On Empty Table"
    }
} );

Datatable 1.10以降では、次のことができます。

$('#example').DataTable( {
    "language": {
        "emptyTable":     "My Custom Message On Empty Table"
    }
} );

完全な利用可能なデータテーブルのカスタムメッセージについては、次のリンクをご覧ください reference/option/language

126
Daniel

dataTablesの後のバージョンには、次のlanguage設定があります（ here から取得）：

  • "infoEmpty"-テーブルにレコードがない場合に表示されます
  • "zeroRecords"-フィルタリングに一致するレコードがない場合に表示されます

例えば.

$('#example').DataTable( {
    "language": {
        "infoEmpty": "No records available - Got it?",
    }
});

注：プロパティ名には特殊文字が含まれていないため、引用符を削除できます。

$('#example').DataTable( {
    language: {
        infoEmpty: "No records available - Got it?",
    }
});
8
Gone Coding

デフォルトでは、グリッドビューが注意し、空のデータセットを渡すだけです。

1
Naruto

サーバー側のデータを返す場合、データ属性がない場合でもData属性を指定する必要があることに注意してください。 recordsTotalまたはrecordsFilteredは読み取りませんが、データオブジェクトのカウントに依存します

1
Antony

ゲームに遅れましたが、 ローカリゼーションファイル を使用することもできます

DataTableは、.jsonローカライズファイルを提供します。このファイルには、キーsEmptyTableおよび対応するローカライズされたメッセージが含まれています。

たとえば、上記の link でローカライズされたjsonファイルをダウンロードし、Datatableを次のように初期化します。

$('#example').dataTable( {
    "language": {
        "url": "path/to/your/json/file.json"
    }
});

ローカライズされたコンテンツは外部ファイルにあるので、私見、それはかなりきれいです。

この構文はDataTables 1.10.16で機能します。以前のバージョンではテストしませんでした。

1
AlexB

これはいいアイデアです。それは、本体にクラスを追加し、テーブルにデータがない間テーブルを非表示/表示することができます。これは私に最適です。カスタムNO Record Foundエラーメッセージを設計できます。テーブルにレコードがない場合、クラス「no-record」を追加でき、1がある場合または複数のレコード、クラスを削除してデータテーブルを表示できます

これがjQueryコードです。

$('#default_table').DataTable({

    // your stuff here

    "fnFooterCallback": function (nRow, aaData, iStart, iEnd, aiDisplay) {
        if (aiDisplay.length > 0) {
            $('body').removeClass('no-record');
        }
        else {
            $('body').addClass('no-record');
        }
    }
});

ここにCSSがあります

.no-record #default_table{display:none;}

および こちらが公式リンクです 。

0
Shurvir Mori