Question

我拥有删除数据表行所需的所有代码，但是当我第一次单击该行的按钮时，它会删除标题，而不是我选择的行。删除标题后它可以正常工作，但我不希望标题可删除。如何确保标题没有被删除？

以下是我的文件的代码：

@{
    ViewBag.Title = "Reissue";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div style="text-align: right; margin-top: 20px; margin-bottom: 20px; margin-right: 50px;"><button type="button" class="btn btn-primary" id="printBatchButton">PRINT BATCH</button></div>

<div class="container-fluid left">
    <div class="container-fluid left">
        <table id="ReissuesTable" class="table table-striped table-bordered table-hover text-nowrap">
            <thead>
                <tr>
                    <th data-column="CheckNo" class="text-left" id="TDtooltip" data-toggle="tooltip" data-placement="bottom" data-original-title="Check Number" data-container="body">Check No.</th>
                    <th data-column="StudentID" class="text-left" id="TDtooltip" data-toggle="tooltip" data-placement="bottom" data-original-title="Student ID Number" data-container="body">Student ID</th>
                    <th data-column="studentSSN" class="text-left" id="TDtooltip" data-toggle="tooltip" data-placement="bottom" data-original-title="Social Security Number" data-container="body">SSN</th>
                    <th data-column="Payee" class="text-left" id="TDtooltip" data-toggle="tooltip" data-placement="bottom" data-original-title="Payee Name" data-container="body">Payee</th>
                    <th data-column="Date" class="text-left" id="TDtooltip" data-toggle="tooltip" data-placement="bottom" data-original-title="Date" data-container="body">Date</th>
                    <th data-column="Type" class="text-left" id="TDtooltip" data-toggle="tooltip" data-placement="bottom" data-original-title="Type" data-container="body">Type</th>
                    <th data-column="Amount" class="text-left" id="TDtooltip" data-toggle="tooltip" data-placement="bottom" data-original-title="Amount" data-container="body">Amount</th>
                    <th data-column="Status" class="text-left" id="TDtooltip" data-toggle="tooltip" data-placement="bottom" data-original-title="Status" data-container="body">Status</th>
                    <th></th>
                </tr>
            </thead>
        </table>
    </div>
</div>

@section scripts
{
    @Scripts.Render("~/bundles/dataTables")
    <script type="text/javascript">
        $.extend($.fn.dataTable.defaults, {
            'pagingType': 'full_numbers',
            'pageLength': 10,
            'language': {
                'paginate':{
                    'first': '&laquo;',
                    'last': '&raquo;',
                    'previous': '&lsaquo;',
                    'next': '&rsaquo;'
                },
                'info': 'Displaying _START_-_END_ of _TOTAL_',
                'infoEmpty': 'Displaying 0 to 0 of 0',
                'infoFiltered': '',
                'search': '',
                'zeroRecords': 'No matching records found'
            },
            //'dom': '<"top"f>rt<"bottom"<"pull-left"l><"pull-right"i>p<"clear">>',
            'dom': '<"top">rt<"bottom"<"pull-left"l><"pull-right"i>p<"clear">>',
            'initComplete': function (settings, json) {
                $('.dataTables_filter input[type=search]').attr('placeholder', 'Search');
            }
        });

        $(function () {
            var dataTable = $('#ReissuesTable').dataTable({
                'ajax': {
                    type: 'POST',
                    url: '@Url.Action("GetData", "Reissue")',
                    //data: function(d) {
                    //}
                },
                columns: [
                    {
                        data: 'CheckNo',
                        sortable: true,
                        className: "text-center"
                    },
                    {
                        data: 'StudentID',
                        sortable: true,
                        className: "text-center"
                    },
                    {
                        data: 'studentSSN',
                        sortable: true,
                        className: "text-center"
                    },
                    {
                        data: 'Payee',
                        sortable: true,
                        className: "text-center"
                    },
                    {
                        data: 'Date',
                        sortable: true,
                        className: "text-center"
                    },
                    {
                        data: 'Type',
                        sortable: true,
                        className: "text-center"
                    },
                    {
                        data: 'Amount',
                        sortable: true,
                        className: "text-center"
                    },
                    {
                        data: 'Status',
                        sortable: true,
                        className: "text-center"
                    },
                    {
                        data: "actions",
                        render: function (data, type, row) {
                            return '<a class="btn removeBtn" id="return"><i class="fa fa-remove"></i></a>';
                        },
                        sortable: false,
                        className: "text-center"
                    }
                ],
                sort: true,
                ordering: true,
                order: [0, 'StartDate'],
                processing: true,
                serverSide: true
            });

            $(document).ready(function () {
                $('#ReissuesTable tbody').on("click", ".removeBtn", function () {
                    var row = $(this).closest('tr').first();
                    ReissuesTable.deleteRow(row);
                });
            })

            $('[data-toggle="tooptip"]').tooltip({
                delay: 0,
                track: true,
                fade: 100
            });
        });
    </script>
}

Answer 1

使用find（'tr'）代替最近（'tr'）

使用JQuery删除Datatable Row

1 个答案: