2016-05-06 5 views
0

Reactjs -Reduxを使用してアプリケーションを構築しました。さて、私はJquery Datatableを組み込もうとしています。私のデータテーブルに入れたいデータは、私の控除対象にアクションをディスパッチすることによって取得されます。基本的に、私はすでに自分のアプリケーション状態について自分のデータを持っています。私のアプリケーション状態からjqueryデータテーブルにこのデータが必要です。これと同じように:私は私のデータは、私のアプリケーションの状態にすでにあると私は、「AJAX」を使用する必要はありませんと言ったので同じようアプリケーション状態からのJQueryデータソースアプリケーション

$('#example').DataTable({ 
    "ajax": application_state.data, 
    "columns": [ 
     { "data": "name[, ]" }, 
     { "data": "hr.0" }, 
     { "data": "office" }, 
     { "data": "extn" }, 
     { "data": "hr.2" }, 
     { "data": "hr.1" } 
    ] 
}); 

明らかに、上記のコードは動作しません。私はまたこのような何かを試みた:

$('#example').DataTable({ 
    "data": application_state.data, 
    "columns": [ 
     { "data": "name[, ]" }, 
     { "data": "hr.0" }, 
     { "data": "office" }, 
     { "data": "extn" }, 
     { "data": "hr.2" }, 
     { "data": "hr.1" } 
    ] 
}); 

しかし、私はまだ運がありません。

私の状態で持っているJSONデータは完全に有効です。それはオブジェクトの配列です。私はちょうどそれが私のjquery datatableに読み込まれます。今、私が知っている1つのオプションが100%働くが、それは汚い方法だ。それは、テーブルに手動でデータを構築することです。私は自分で行(<tr><td> ..)を作成することを意味しました。私はそれが好きではない。

ご返信ありがとうございます。 最高

答えて

0

aoColumnsfnAddDataを使用して行う方法が見つかりました。このようなもの:

// this is where field mapping happens 
     const cols=[ 
     {'mDataProp':'<column/fieldname>'} 
     ] 
     const dataTableOptions = { 
     responsive: true, 
     bDestroy:true, 
     pageLength: 25, 
     deferRender:true, 
     aoColumns:cols //The aoColumns 
     } 

     const _dt=$('#example') 
       .dataTable(dataTableOptions); 

    _dt.fnClearTable(); 
    _dt.fnAddData(<your state data here>)// Then Add your data using fnAddData 

みんなありがとう!歓声!私は他の人がこれも役立つと思うでしょう。

関連する問題