如何爲數據表中的列生成動態內容？

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代碼和演示。