jQuery：如何将onClick事件绑定到DataTable行？

Question

Currently, the dataTable is populated via the server side and everything is working. But I want to add Details|Edit|Delete actionLinks when a row is clicked.

Right now I have them showing in a column at the right side, but I want the links to appear when the user clicks on each row and I cannot workout how to implement it to show onClick .

Can someone please assist me in getting them to show on click? Thank you.

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

I made my mRender function a separate function and then called it in the click event function for the datatable body.

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');
            }
        });