4

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

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

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

第二个单选按钮响应：

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

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

如果需要任何澄清，我可以提供更多细节

任何形式的帮助都非常感谢！

~拉吉什

4

2 回答 2

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

于 2012-10-22T13:15:15.190 回答
1

最后我设法找到了解决方案。我用前两列初始化表，为每一列指定一个类，为 ,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 回答