2017-03-24 4 views
0

jQueryのデータテーブルプラグイン列可視

APMTable = $(table).DataTable({ 
     "ajax": { 
      "url": AP.APP_ROOT + '/api/'+ AP.WebId + '/' + AP.BillToCompanyKey + '/' + from + '/' + to + '/' + AP.LocaleId + '/' + material, 
      "type": "GET" 
     }, 
     columns: [ 
      { data: "rgNumber" }, 
      { data: "rgDescription" }, 
      { data: "rtDescription" }, 
      { data: "rtNumber" } 
     ], 
     "responsive": true, 
     "order": [] 
     //"bSort": false 
    }); 

    APMTable.on('xhr.dt', 
     function() { 
      if (countrycode === 'BR') { 
       console.log('SHOW END', countrycode); 
       APMTable.column(1).visible(false); 
       APMTable.column(2).visible(true); 
       APMTable.column(3).visible(true); 
      } else { 
       console.log('HIDE END', countrycode); 
       APMTable.column(1).visible(true); 
       APMTable.column(2).visible(false); 
       APMTable.column(3).visible(false); 
      } 
     }); 

私は国番号が「BR」である場合を示すために非表示にし、列2および3をインデックス1でカラムを希望。逆にcountrycodeが 'BR'でない場合はもちろんです。

実際には、データテーブルが初めてレンダリングされ、Ajax呼び出しが完了すると、値 'HIDE END GB'がコンソールに書き込まれますが、列は非表示になります。

私はこれを呼び出す場合:

APMTable.ajax.url('/api/' + AP.WebId + '/' + from + '/' + to + '/' + LocaleId + '/' + material).load(); 

Ajaxのイベントリスナー火災再び、列は非表示にします。

console.log()文は、最初の列の非表示が試行されると同時に書き込まれますが、列は非表示になるため、混乱します。データテーブルの起動は、列のレンダリング後にわからない別のイベントですか?

タイムアウトを使用して列を最初に非表示にする必要がありますか、それとも何か他のことが起こっていますか?

+0

2秒待つと、最初のロードでは、テーブルはそれらの列を非表示にします。誰もがこれを改善提案することはできますか? –

+0

datatable dataFilterオプションを見ましたか? – Bindrid

答えて

0

countrycodeの値は、私が書き直しますテーブルを初期化する前に知られている場合は、次のとおりです。私はイベントリスナーに2000ミリ秒のタイムアウトを追加した後、「描く」に、イベントを変更している

APMTable = $(table).DataTable({ 
    "ajax": { 
     "url": AP.APP_ROOT + '/api/'+ AP.WebId + '/' + AP.BillToCompanyKey + '/' + from + '/' + to + '/' + AP.LocaleId + '/' + material, 
     "type": "GET" 
    }, 
    columns: [ 
     { data: "rgNumber" }, 
     { data: "rgDescription", visible: (countrycode == 'BR' ? false : true) }, 
     { data: "rtDescription", visible: (countrycode == 'BR' ? true : false) }, 
     { data: "rtNumber", visible: (countrycode == 'BR' ? true : false) } 
    ], 
    "responsive": true, 
    "order": [] 
}); 
関連する問題