Jquery 数据表：动态操作 aoColumns 属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13006845/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery datatable : Dynamically manipulate the aoColumns attributes
提问by RageshAK
I have a requirement in which I need to change the data-table data and headers based on the radio button selection. The response is made available by an AJAX request. We can easily change the data by using API function. But I need to change the column properties (specifically sTitle,mData) as my response have different keys for each of the radio button selection.
我有一个要求，我需要根据单选按钮选择更改数据表数据和标题。响应由 AJAX 请求提供。我们可以使用 API 函数轻松更改数据。但是我需要更改列属性（特别是 sTitle、mData），因为我的响应对于每个单选按钮选择都有不同的键。
For the first radio button my response is:
对于第一个单选按钮，我的回答是：
{"id" :101, "label" : "Ragesh"}; headers - Id, Label ,
Second radio button response:
第二个单选按钮响应：
{"type" :2 , "name" :"Ravi"} ; headers - Type, Name
Please tel me how this can be accomplished without recreating data-table
请告诉我如何在不重新创建数据表的情况下完成此操作
If any clarification is required, I can provide more details
如果需要任何说明，我可以提供更多详细信息
Any kind of help is highly appreciated !!!
任何形式的帮助都非常感谢！！！
~Ragesh
~拉格什
回答by Smiter
There is one very tricky workaround based on hidding columns.
有一种基于隐藏列的非常棘手的解决方法。
Make following steps to initialize table. First define "aoColumns": with four columns:
执行以下步骤来初始化表。首先定义“aoColumns”：有四列：
"aoColumns": [
{ "sTitle": "Id", "mData": "id" },
{ "sTitle": "Label" "mData": "label" },
{ "sTitle": "Type", "mData": "type" },
{ "sTitle": "Name" ,"mData": "name" }]
Then define ajax source, for example, for the first radio button case:
然后定义ajax源，例如，对于第一个单选按钮案例：
"sAjaxSource" : "/getFirstAjaxSource";
After table initialization, set 3 and 4 column ( in your case "Type" and "Name" ) as invisible using jQuery, so you will see only first and second columns:
表初始化后，使用 jQuery 将第 3 列和第 4 列（在您的情况下为 "Type" 和 "Name" ）设置为不可见，因此您将只看到第一列和第二列：
$(function(){
oTable.fnSetColumnVis( 2, false);
oTable.fnSetColumnVis( 3, false );
})
Then in click handler functions use following logic.
然后在点击处理函数中使用以下逻辑。
First button:
第一个按钮：
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 );
});
Second button:
第二个按钮：
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 );
});
Don't forget to add fake values ??for hidden columns in the ajax source.
不要忘记为 ajax 源中的隐藏列添加假值。
回答by RageshAK
At-last I managed to find a solution . I initialized the table with the first two columns, specifying a class for each column with "sClass" attribute for ,say(Id, Label) and based on radio button selection, first I changed the header text of both columns accordingly. For the data, what I have done is I parsed the response and created a unique format for both cases.
最后我设法找到了解决方案。我用前两列初始化了表格，为每列指定了一个类，并为 ,say(Id, Label) 和基于单选按钮选择的“sClass”属性指定了一个类，首先我相应地更改了两列的标题文本。对于数据，我所做的是解析响应并为这两种情况创建了独特的格式。
Let me make it more clear:
让我说得更清楚：
Datatable initialization:
数据表初始化：
$('#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": []
}
});
Then I parsed the response and made a unique data-structure for both cases like below:
然后我解析了响应并为两种情况创建了一个独特的数据结构，如下所示：
Function which returns unique response for both cases:
为两种情况返回唯一响应的函数：
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;
}
This is how I solved it..I would like to know if this is good...
这就是我解决它的方法..我想知道这是否好......
Suggestions are always welcome !!!
建议总是受欢迎的！！！
~Ragesh
~拉格什
