我可以使用内联动作按钮创建DataTable吗？

我想用Inline Action按钮创建Datatable。我们如何在表格中放置动作按钮，我的意思是每一行。几乎类似于WordPress的帖子页面。我不是要求完整的代码。只是一个示例代码开始写它。 Sofar我有以下代码。我可以使用内联动作按钮创建DataTable吗？

jQuery("#myTableID").dataTable({ 
    aoColumns : [{ "sClass": "center", 
"mRender": function (data, type, row) {  
    return '<div class="input-control checkbox" /> <label><input type="checkbox" name="reference" class="job_checkbox" value="' + row[0] + '"> <span class="check"></span></label></div>'; } , "sWidth": "1%" },    
    { "sWidth": "20%" }, 
    { "sWidth": "30%"}, 
    { "sWidth": "30%"}] 
});

其实我不擅长jQuery和JS功能。不知道如何继续。

来源

2015-11-27 Kvvaradha

我在等待一些建议。如果我知道如何开始，让我自己尝试一下。 – Kvvaradha

有人帮助我。我没有足够的声望使它成为特色之一。 – Kvvaradha

您使用的DataTables版本是什么 - 1.9或1.10？ –

SOLUTION

您可以使用columns.render选项为特定的细胞含量。

例如：

var table = $('#example').DataTable({ 
    columnDefs: [{ 
     targets: 0, 
     render: function(data, type, full, meta){ 
      if(type === 'display'){ 
      data = data + '<div class="links">' + 
       '<a href="#">Edit</a> ' + 
       '<a href="#">Quick Edit</a> ' + 
       '<a href="#">Trash</a> ' + 
       '<a href="#">View</a>' + 
       '</div>';      
      } 

      return data; 
     } 
    }] 
});

使用下面的CSS规则，你可以展示环节，只有当用户在该行移动鼠标：

#example tr .links { 
    display:none; 
} 

#example tr:hover .links { 
    display:block; 
}

DEMO

代码见d，d emonstration。

来源

2015-11-27 19:23:45

您的回答非常好。谢谢你的帮助。 – Kvvaradha

我可以使用内联动作按钮创建DataTable吗？

回答

相关问题