如何为数据表中的列生成动态内容？

Question

我使用jQuery DataTables以表格格式显示Ajax响应。我想为每条记录添加两个按钮（开始和停止）。我使用以下格式：

$(document).ready(function() { 
    $('#example').DataTable({ 
     "processing": true, 
     "serverSide": true, 
     "ajax": { 
     url:ur, 
     data:{userid:id}, 
     type:"post", 
     dataType: 'json', 
     dataSrc: function (json) { 
     return json.data; 
     }, 
     error: function { 
     alert('error');           
     } 
    }, 
    }); 
}); 

Answer 1

我通常用Render -option来解决这样的挑战。而且我通常在表格的第一列中包含像id这样的东西 - 例如 - 不需要在表格中显示。因此，我会为col1分配一个渲染方法，这会简单地创建必要的HTML来插入按钮控件（这可能会触发服务器上可能链接到id的一些操作 - 该单元的数据。那么这一切组合在一起很好;-)）

展示一些代码：

... 
render: function(data,type,row,meta) 
    { 
    var img=data; 
    if (type=="display") {img = '<img src="</Examples/Data/index/' + data + '.png" />';} 
    return img; 
    } 
    ... 

，或者插入默认的内容和使用的onClick-事件注入ID。所以，这山坳的定义是一样的东西......

   { 
      "className": "details-control" , 
      "data": null , 
       "defaultContent": '<span class=" fa fa-info-circle"></span>' , 
      "width": "12px" , 
      "orderable":false 
      } 

和DataTable的呼叫后，指定的onClick处理程序要插入的显示细节行：

$('#DieListe tbody').on('click', 'td.details-control', function() { 
     var tr = $(this).closest('tr'); 
     var row = table.row(tr);  // get DataTable Row-Object 
     var the_id = row.data()[0]; // Data[0]=id of record! 

      $.ajax({ 
       method: "GET" , 
       dataType: "text" , 
       url: path + "listen_details", 
       data: {id: the_id} , 
       success: function(result){ 
       if (row.child.isShown()){ 
        tr.removeClass('shown'); 
        row.child.hide(); 
       } 
       else { 
        tr.addClass('shown'); 
        row.child(format(result)).show(); 
       } 
       } , 
       error: function(xhr,status,error) { 
        // log error: 
        console.log(xhr); 
        console.log(status); 
        console.log(error); 
       } 
      }); 

    }); 

Answer 2

使用columnDefs和render为特定列生成动态内容的选项。

var table = $('#example').DataTable({ 
    ajax: 'https://api.myjson.com/bins/qgcu', 
    columnDefs: [ 
     { 
      targets: 5, 
      render: function(data, type, full, meta){ 
       if(type === 'display'){ 
        data = 
         '<button class="btn-start" type="button">Start</button>' 
         + '<button class="btn-stop" type="button">Stop</button>'; 
       } 

       return data; 
      } 
     }  
    ] 
}); 

// Handle click on "Start" button 
$('#example').on('click', '.btn-start', function(){ 
    var data = table.row($(this).closest('tr')).data(); 
    console.log('Start', data);  
}); 

// Handle click on "Stop" button 
$('#example').on('click', '.btn-stop', function(){ 
    var data = table.row($(this).closest('tr')).data(); 
    console.log('Stop', data);  
}); 

见this jsFiddle代码和演示。