4

ラジオ ボタンの選択に基づいて、データ テーブルのデータとヘッダーを変更する必要があるという要件があります。応答は、AJAX 要求によって利用可能になります。API関数を使用して簡単にデータを変更できます。ただし、ラジオ ボタンの選択ごとに応答のキーが異なるため、列のプロパティ (具体的には sTitle,mData) を変更する必要があります。

最初のラジオ ボタンに対する私の応答は次のとおりです。

 {"id" :101, "label" : "Ragesh"}; headers - Id, Label ,

2 番目のラジオ ボタンの応答:

  {"type" :2 , "name" :"Ravi"} ; headers - Type, Name

データテーブルを再作成せずにこれを達成する方法を教えてください

明確化が必要な場合は、詳細を提供できます

どんな種類の助けも大歓迎です!!!

〜ラゲッシュ

4

2 に答える 2

1

ついに私は解決策を見つけることができました。最初の 2 つの列でテーブルを初期化し、say(Id, Label) の「sClass」属性を使用して各列のクラスを指定し、ラジオ ボタンの選択に基づいて、最初に両方の列のヘッダー テキストをそれに応じて変更しました。データについては、応答を解析し、両方のケースに固有の形式を作成しました。

もっと明確にしましょう：

データテーブルの初期化: 

$('#myTable').dataTable({
"aoColumns": [  {"sTitle": "Label", "mData": "column1_data","sClass" : "header1"},
        {"sTitle": "Type", "mData": "column2_data","sClass" : "header2"},
                        {"bVisible" : false, "mData" : "id"}],
        "sScrollY": "150px",
        "aaData": [],
        "sPaginationType": "full_numbers",
        "bfilter": false,
        "bDestroy": true,
        "bAutoWidth":true,
        "sDom": 'T<"clear">lfrtip',
        "oTableTools": {
            "sRowSelect": "multi",
            "aButtons": []
        }       

    });

次に、応答を解析し、以下のように両方のケースに固有のデータ構造を作成しました。

両方のケースで一意の応答を返す関数:

function getData(aaData){ // aaData -> data obtained from server
var returnData = new Array();   
$.each(aaData, function(index,rowData){

    var row = new Object();
    if(firstRadioBtn){
        row['column1_data'] = rowData['label'];
            row['column2_data'] = rowData['type'];
    }else{
        row['column1_data'] = rowData['sourceLabel'];
        row['column2_data'] = rowData['targetLabel'];
    }
    row['id'] = rowData['id'];
    returnData.push(row);
    }); 
    return returnData;

}

これが私がそれを解決した方法です..これが良いかどうか知りたいです...

提案はいつでも大歓迎です!!!

〜ラゲッシュ

于 2012-10-23T09:48:22.200 に答える
1

非表示の列に基づく非常にトリッキーな回避策が 1 つあります。

テーブルを初期化するには、次の手順を実行します。最初に "aoColumns": を 4 つの列で定義します。

"aoColumns": [
    { "sTitle": "Id",   "mData": "id" },
    { "sTitle": "Label" "mData": "label" },
    { "sTitle": "Type", "mData": "type" },
    { "sTitle": "Name" ,"mData": "name" }]

次に、最初のラジオ ボタンの場合など、ajax ソースを定義します。

"sAjaxSource" : "/getFirstAjaxSource";

テーブルの初期化後、jQuery を使用して 3 列目と 4 列目 (この場合は "Type" と "Name" ) を非表示に設定すると、最初と 2 番目の列のみが表示されます。

 $(function(){
  oTable.fnSetColumnVis( 2, false);
  oTable.fnSetColumnVis( 3, false );
})

次に、クリック ハンドラー関数で次のロジックを使用します。

最初のボタン:

jQuery('#first').live('click',function () {     
  oTable.fnSettings().sAjaxSource  = "/getFirstAjaxSource";      
  oTable.fnSetColumnVis( 0, true);
  oTable.fnSetColumnVis( 1, true );
  oTable.fnSetColumnVis( 2, false);
  oTable.fnSetColumnVis( 3, false );
});

2 番目のボタン:

jQuery('#second').live('click',function () {     
  oTable.fnSettings().sAjaxSource  = "/getSecondAjaxSource";      
  oTable.fnSetColumnVis( 0, false);
  oTable.fnSetColumnVis( 1, false );
  oTable.fnSetColumnVis( 2, true);
  oTable.fnSetColumnVis( 3, true );
});

ajax ソースの隠し列に偽の値を追加することを忘れないでください。

于 2012-10-22T13:15:15.190 に答える