Question

我有一个要求，我需要根据单选按钮选择更改数据表数据和标题。响应由AJAX请求提供。我们可以使用API函数轻松更改数据。但我需要更改列属性（特别是sTitle，mData），因为我的响应为每个单选按钮选择都有不同的键。

对于第一个单选按钮，我的回答是：

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

第二个单选按钮响应：

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

请告诉我如何在不重新创建数据表的情况下完成此操作

如果需要澄清，我可以提供更多详细信息

非常感谢任何形式的帮助!!!

〜Ragesh

Answer 1

基于隐藏列，有一个非常棘手的解决方法。

按照以下步骤初始化表格。首先定义“aoColumns”：有四列：

"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”）设置为不可见，因此您将只看到第一列和第二列：

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

第二个按钮：

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源中的隐藏列添加假值。

Answer 2

最后我设法找到了解决方案。我用前两列初始化了表，为每个列指定了一个类，其中包含“sClass”属性，例如（Id，Label）并基于单选按钮选择，首先我相应地更改了两列的标题文本。对于数据，我所做的是解析响应并为两种情况创建了一种独特的格式。

让我说清楚一点：

数据表初始化：

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

}

这就是我解决它的方式..我想知道这是不是很好......

建议随时欢迎!!!

〜Ragesh

Jquery数据表：动态操作aoColumns属性

2 个答案: