我可以使用內聯動作按鈕創建DataTable嗎？

我想用Inline Action按鈕創建Datatable。我們如何在表格中放置動作按鈕，我的意思是每一行。幾乎類似於WordPress的帖子頁面。我不是要求完整的代碼。只是一個示例代碼開始寫它。 Sofar我有以下代碼。我可以使用內聯動作按鈕創建DataTable嗎？

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

來源

2015-11-27 Kvvaradha

我在等待一些建議。如果我知道如何開始，讓我自己嘗試一下。 – Kvvaradha

有人幫助我。我沒有足夠的聲望使它成爲特色之一。 – Kvvaradha

您使用的DataTables版本是什麼 - 1.9或1.10？ –

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

代碼見d，d emonstration。

來源

2015-11-27 19:23:45

您的回答非常好。謝謝你的幫助。 – Kvvaradha

我可以使用內聯動作按鈕創建DataTable嗎？

回答

相關問題