Question

js

    var selected = '';
    $(document).ready(function () {

        var oTable = $('#ApplicationsDataTable').dataTable({
            "bRetrieve": true,
            "bDestroy": true,
            "bJQueryUI": true,
            "bServerSide": true,
            "bProcessing": true,
            "bDeferRender": true,
            "bFilter": false,
            "bSort": true,
            "sRowSelect": "single",
            "sPaginationType": "full_numbers",
            "sAjaxSource": "AppsFiled/AjaxHandler",
            "rowCallback": function (row, data, displayIndex) {
                if ($.inArray(data.DT_RowId, selected) !== -1) {
                    $(row).addClass('selected');
                }
            },
            "aoColumns": [
                            { "mData": "Id" },
                            { "mData": "F_Name" },
                            { "mData": "L_Name" },
                            { "mData": "Email" },
                            { "mData": "Filed_Date" },
                            { "mData": "Location" },
                            {"mDataProp": null,
                            "sDefaultContent": '<button id="editbutton"><img src="/Content/images/edit.png" alt="edit icon" height="14" width="14"/>Edit</button>'
                        },
                            { "mDataProp": null,
                                "sDefaultContent": '<button id="deletebutton"><img src="/Content/images/cross.png" alt="delete icon" height="16" width="16"/>Delete</button>'
                            }

                         ]
        });

  $("#ApplicationsDataTable tbody tr").on('click', function (event) {
                        $("#ApplicationsDataTable tbody tr").removeClass('selected');
                        $(this).addClass('selected');
                    });

                        $("#deletebutton").dialog({
                            resizable: false,
                            height: 140,
                            modal: true,
                            buttons: {
                                "Delete this row": function () {
                                    $(this).dialog("close");
                                },
                                Cancel: function () {
                                    $(this).dialog("close");
                                }
                            }
                        });      
    });

html table

<table id="ApplicationsDataTable" class="display">
   <thead> 
        <tr> 
            <th>ID</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
            <th>Date Filed</th>
            <th>Location</th>
            <th>Edit</th>
            <th>Delete</th>
        </tr>
  </thead>
  <tbody> 

  </tbody>

我想要做的是获取行的句柄并让按钮编辑或删除它们...使用jquery .dialog弹出窗口...我还添加了行选择代码选择行......我出于某种原因无法做到......

Answer 1

我必须实施类似的事情。我确实喜欢以下内容：

首先，不断定义你的按钮，如下所示：

"aoColumns": [
             { "mData": "Id" },
             ...
             {"mDataProp": null,
             "sDefaultContent": '<button id="editbutton" onclick="myfunction(this)"><img src="/Content/images/edit.png" alt="edit icon" height="14" width="14"/>Edit</button>'
             },
             { "mDataProp": null,
                        "sDefaultContent": '<button id="deletebutton" onclick="myotherfunction(this)"><img src="/Content/images/cross.png" alt="delete icon" height="16" width="16"/>Delete</button>'
             }
]

通过在你的onclick mehod中传递（this），你将能够在不同的行中获取数据。

您现在可以获得这样的数据：

function myfunction(el) {
    var row = $(el).parent().parent().parent(); // Get the row
    var id = oTable.fnGetData(row.get(0))[1]; // Get the cell
    row.remove(); // deletes the row
}

如何使用每行上的按钮编辑和删除数据表

1 个答案: