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

debugcn 发表于 Dev

整顿

目前，数据表是通过服务器端填充的，一切正常。但是我想在单击一行时添加 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

整顿

我使我的mRender函数成为一个单独的函数，然后在数据表主体的单击事件函数中调用它。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。