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

2023年7月3日 319次阅读

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

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

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

第二个单选按钮响应：

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

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

如果需要澄清,我可以提供更多细节

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

〜Ragesh

最佳答案 基于隐藏列有一个非常棘手的解决方法.

按照以下步骤初始化表.
首先定义“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源中为隐藏列添加假值.

点赞