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

how to edit and delete from datatables with buttons on each row

本文关键字：数据表编辑删除按钮何使用更新时间：2023-09-26

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…我还添加了行选择代码，不选择行…由于某种原因，我不能做。

我必须实现一个类似的东西。我喜欢以下内容:

首先，用不同的方式定义按钮，像这样:

"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方法中传递(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
}