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

Question

我想创建带有内联操作按钮的数据表。我们如何在表格中放置动作按钮，我的意思是每一行。几乎与WordPress帖子页面相似。  我不是要问完整的代码。只是一个示例代码开始编写它。 Sofar我有以下代码。

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功能。不知道如何继续。

Answer 1

  

<强>解

您可以使用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;   
}

  

<强>样本

请参阅this jsFiddle以获取代码和演示。