Jquery datatable：動態操縱aoColumns屬性

我有一個要求，我需要根據單選按鈕選擇更改數據表數據和標題。響應通過AJAX請求提供。我們可以使用API函數輕鬆更改數據。但我需要更改列屬性（特別是sTitle，mData），因爲我的響應對於每個單選按鈕選擇都有不同的鍵。Jquery datatable：動態操縱aoColumns屬性

對於第一個單選按鈕，我的反應是：

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

第二個單選按鈕響應：

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

請電話我如何能不重新創建數據表

如果完成任何澄清是必需的，我可以提供更多的細節

任何形式的幫助都非常感謝！

〜Ragesh

來源

2012-10-22 RageshAK

有一個非常棘手的解決方法基於hidding列。

請按照以下步驟初始化表格。首先定義「aoColumns」：與四列：

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

然後定義AJAX源，例如，對於第一個單選按鈕的情況下：

"sAjaxSource" : "/getFirstAjaxSource";

表初始化後，設置3和4柱（你的情況「類型」和「名稱」）使用jQuery，所以你會看到只有第一和第二列是不可見的：

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

然後在點擊處理函數使用followi ng邏輯。

第一個按鈕：

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); 
});

第二個按鈕：

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-22 13:15:15 Smiter

感謝Smiter的快速回復。 – RageshAK

終於我設法找到了解決方案。我使用前兩列初始化了表格，併爲每一列指定了「sClass」屬性，例如（Id，Label），並基於單選按鈕選擇，首先相應地更改了兩列的標題文本。對於數據，我所做的是我解析了這個響應，併爲這兩種情況創建了一個獨特的格式。

讓我更清楚：

DataTable的初始化：

$('#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; 

}

項

這是我如何解決it..I想知道這是否是好的...

建議，隨時歡迎！

〜Ragesh

來源

2012-10-23 09:48:22 RageshAK

Jquery datatable：動態操縱aoColumns屬性

回答

相關問題