Salesforce visualforce page DataTables

こんにちは、管理人の@Salesforce.Zです。

画面系の状況共有です。

apexのpageBlockTableにソートをかけたい、ページングをかけたい、特定の列のみソートしたい、特定の列のみソートしたくないなど、いろいろ対応できるjsを紹介します。

読んだら得ること

★　pageBlockTableにDatatablesを適用する
★　Datatablesを用いて、ソート・ページング・検索
★　Datatablesを用いて、特定列をソートさせない

目次

DatatablesをVFに適用する

Datatablesをダウンロード（おすすめ、リンク先が変更する場合あり、自分のところにダウンロードするのがいい）

DatatablesをダウンロードしVFヘッダーに静的リソースとしてロード pathは自分の設定次第に変える必要がある

静的リソースの設定はこちら参照してください。

/**css*/
<apex:stylesheet value="{!URLFOR($Resource.DataTable, 'DataTables-1.10.18/css/jquery.dataTables.min.css')}" />
/**js*/
<apex:includeScript value="{!URLFOR($Resource.DataTable, 'DataTables-1.10.18/js/jquery.dataTables.min.js')}" />

/**css*/
//HTMLの場合
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css"/>
//SalesforceのVFページの場合
<apex:stylesheet value="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css"/>

/**js*/
//HTMLの場合
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
//SalesforceのVFページの場合
<apex:includeScript value="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"/>

Datatablesをテーブルに適用

【#myTable】はテーブルのIDを指している意味合い しかし、テーブルのクラスを指定するのがいいかも、なぜなら VFのIDは怪しいから

テーブルのクラスを指定する場合

【#myTable】を【．myClass】に変えればいい　、　ドットは全角にしている、分かりやすいから。 コピペだと、クラスの指定ができない可能性がある

<script>
$(document).ready(function ($) {
    $('#myTable').DataTable(
        //日本語化
        language: {
            url: "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json"
        },
        // 件数切替機能 無効
        lengthChange: false,
        paginate: false,
        // ページング機能 無効
        paging: false,
        // 検索機能 無効
        searching: false,
        // 情報表示 無効
        info:false,
        // ソート機能 有効
        sort: true
    );
});
</script>

#	項目	内容 (デフォルトのもの。カスタマイズ可能)
1	件数切替	10, 25, 50, 100 の件数表示切替ができます。
2	検索	すべての列から検索を行うことができます。
3	ソート	クリックした列を昇順、降順に並び替えます。
4	情報表示	何件表示しているかを表示します。
5	ページング	1ページ目、2ページ目…とページを切り替えることができます。

特定列のソート無効化

<script>
$(document).ready(function ($) {
    $('#myTable').DataTable(
        //日本語化
        language: {
            url: "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json"
        },
        // 件数切替機能 無効
        lengthChange: false,
        paginate: false,
        // ページング機能 無効
        paging: false,
        // 検索機能 無効
        searching: false,
        // 情報表示 無効
        info:false,
        // ソート機能 有効
        sort: true,
        columnDefs: [{
            "targets": [3],
            "orderable": false
        }]
    );
});
</script>

columnDefsオプションで、targetsで対象列を指定する（０から）、orderableで無効にする設定

でこの設定だと、対象テーブルの４列のソートを無効することになる