我可以使用内联操作按钮创建数据表吗？

Question

我想用内联操作按钮创建数据表。我们如何将操作按钮放置在 Table 中，我的意思是每一行。几乎类似于 WordPress 帖子页面。 我不是在问完整的代码。只是一个示例代码，开始编写它。到目前为止，我有以下代码。

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;   
}

演示

有关代码和演示，请参阅此 jsFiddle。