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

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

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

参见this jsFiddle用于代码和演示。