jQuery：如何將onClick事件綁定到DataTable行？

Question

目前，dataTable通過服務器端填充，一切正常。但是我想添加細節|編輯|單擊行時刪除actionLinks。

現在，我將它們顯示在右側的一列中，但我希望鏈接在用戶單擊每行時出現，但我無法制定如何實現它以顯示onClick。

有人可以幫助我讓他們顯示點擊嗎？謝謝。

var dt = $('#datatableServer').DataTable({ 
      "serverSide": true, 
      "ajax": 
      { 
       "type": "POST", 
       "url": "@Url.Action("DataHandler", "Department")" 
        }, 
        "rowId": 'departmentID', 
        //"fnRowCallback": function (nRow, aData, iDisplayIndex) { 
        // nRow.setAttribute('id', aData[0]); 
        //}, 
        "columns": 
        [ 
         { 
          "data": "Name", 
          "searchable": true 
         }, 
         { 
          "data": "Budget", 
          "searchable": false 
         }, 
         { 
          "data": "StartDate", 
          "searchable": false 
         }, 
         { 
          "data": "Administrator", 
          "searchable": true, 
          "orderable": false 
         }, 
     { 
// this is the Actions Column I want to show when a Datatable row is clicked, not under a "Action" column 
       mRender: function (data, type, row) { 
      var linkEdit = '@Html.ActionLink("Edit", "Edit", new {id= -1 })'; 
           linkEdit = linkEdit.replace("-1", row.DT_RowId); 

      var linkDetails = '@Html.ActionLink("Details", "Details", new {id= -1 })'; 
           linkDetails = linkDetails.replace("-1", row.DT_RowId); 

      var linkDelete = '@Html.ActionLink("Delete", "Delete", new {id= -1 })'; 
           linkDelete = linkDelete.replace("-1", row.DT_RowId); 

        return linkDetails + " | " + linkEdit + " | " + linkDelete; 
      } 
     } 
     ], 
     "order": [0, "asc"], 
     "lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]] 
    }); 


     $('#datatableServer tbody').on('click', 'tr', function() { 

      console.log('clicked'); 
      // get the row Id 
      console.log(dt.row(this).data().DT_RowId); 
     }); 
    }); // end of document.ready tag 

Answer 1

我做了我mRender功能獨立的函數，然後把它稱爲在DataTable中體click事件功能。

function format (data, type, row) { 
       var linkEdit = '@Html.ActionLink("Edit", "Edit", new {id= -1 })'; 
            linkEdit = linkEdit.replace("-1", row.DT_RowId); 



      var linkDelete = '@Html.ActionLink("Delete", "Delete", new {id= -1 })'; 
           linkDelete = linkDelete.replace("-1", row.DT_RowId); 

        return linkEdit + " | " + linkDelete; 
      } 

$('#dtServer tbody').on('click', 'td', function() { 

      var tr = $(this).closest('tr'); 
      var row = dt.row(tr); 

      if (row.child.isShown()) { 
       // This row is already open - close it 
       row.child.hide(); 
       tr.removeClass('shown'); 
      } 
      else { 
       // Open this row 
       row.child(format(row.data())).show(); 
       tr.addClass('shown'); 
      } 
     });