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

Question

當前，dataTable是通過服務器端填充的，一切正常。 但是我想在單擊一行時添加Details | Edit | Delete 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函數mRender一個單獨的函數，然后在數據表主體的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');
            }
        });