Question

尝试使用jquery对话框确认删除jquery数据表中的记录。删除适用于初始页面加载，但如果我更改页面或搜索删除链接不起作用。

<script type="text/javascript">
$(document).ready(function () {
    $('#dataTable').dataTable({
        "aoColumnDefs": [
        { "bSortable": false, "bSearchable": false, "aTargets": [2] }
        ]
    });

    //modal popup

    $("#dialog-confirm").dialog({
        autoOpen: false,
        resizable: false,
        height: 200,
        width: 400,
        modal: true,
        buttons: {
            "Delete": function () {
                $(this).dialog("close");
                $("form")["delete"].submit();
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        }
    });

    $(".deleteLink").click(function (e) {
        e.preventDefault();
        $("#dialog-confirm").dialog("open");
    });

    //     $.ajaxSetup({ cache: false });

});

这是html。

<table cellpadding="0" cellspacing="0" border="0" class="display" id="dataTable">
<thead>
    <tr>
        <th>
            @Html.LabelFor(p => Model.FirstOrDefault().LastName)
        </th>
        <th>
            @Html.LabelFor(p => Model.FirstOrDefault().FirstName)
        </th>
        <th>
        </th>
    </tr>
</thead>
<tbody>
    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.LastName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.FirstName)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.UserId }) |
                @Html.ActionLink("Details", "Details", new { id = item.UserId }) |
                @Html.ActionLink("Delete", "DeleteConfirmed", new { id = item.UserId }, new { @class = "deleteLink" })
                @using (Html.BeginForm("DeleteConfirmed", "User", new { id = item.UserId})){}
            </td>
        </tr>
    }
</tbody>

这是确认对话框

<div id="dialog-confirm" title="Delete the item?" style="display:none" >  
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>This item will be deleted. Are you sure?</p>

Answer 1

 <script type="text/javascript">
        $(document).ready(function () {
            $('#dataTable').dataTable({
                "aoColumnDefs": [
        { "bSortable": false, "bSearchable": false, "aTargets": [2] }
        ]
            });

            //modal popup


            $(".deleteLink").live('click', function (e) {
                var obj = $(this);
                e.preventDefault();
                var dialogAppendData = '<div><p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>'
                                     + 'This item will be deleted. Are you sure?</p></div>';
                $(dialogAppendData).dialog({
                    autoOpen: true, resizable: false, modal: true,
                    height: 200, width: 400, zIndex: 10000,
                    title: 'Delete the item?',
                    buttons: {
                        'Delete': function () {
                            $.ajax({
                                url: '/User/DeleteUser', type: 'delete', dataType: 'json',
                                data: { 'userId': obj.data('id') },
                                success: function (data) {
                                    $(obj).remove();
                                }
                            });

                            $(this).dialog("close");
                        },
                        'Cancel': function () {
                            $(this).dialog("close");
                        }
                    },
                    close: function (event, ui) {
                        $(this).remove();
                    }
                });
            });
        });
    </script>

insteand of : 
@Html.ActionLink("Delete", "DeleteConfirmed", new { id = item.UserId }, new { @class = "deleteLink" })

//use below link.
     <a class = "deleteLink">Delete</a>


     //In controller

    UserController :

    [HttpDelete]
    public JsonResult DeleteUser(int userId)
    {
        var user = db.users.Find(userId);
        db.Users.Remove(user);
        db.SaveChanges();

        //Or

        // U r logic for delete.

        return Json(true, JsonRequestBehavior.AllowGet);
    }

Answer 2

 <script type="text/javascript">
        $(document).ready(function () {
            $('#dataTable').dataTable({
                "aoColumnDefs": [
        { "bSortable": false, "bSearchable": false, "aTargets": [2] }
        ]
            });

            //modal popup
            $('.deleteLink').live('click', function (e) {
                e.preventDefault();

                var obj = $(this);

                var dialogAppendData = '<div><p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>'
                                     + 'This item will be deleted. Are you sure?</p></div>';
                $(dialogAppendData).dialog({
                    autoOpen: true, resizable: false, modal: true,
                    height: 200, width: 400, zIndex: 10000,
                    title: 'Delete the item?',
                    buttons: {
                        'Delete': function () {
                            $("form")["delete"].submit();

                            $(this).dialog("close");
                        },
                        'Cancel': function () {
                            $(this).dialog("close");
                        }
                    },
                    close: function (event, ui) {
                        $(this).remove();
                    }
                });
            });

            //     $.ajaxSetup({ cache: false });
        });

    </script>

Jquery Dialog确认无法在Jquery Datatable中工作

2 个答案: