Datatable delete record with sweetalert dont working

Question

I'm writing a crm script. But i have a problem. Customers are in the datatable. I want to delete with confirmation from database and datatable. I write some codes. And put in foreach. But codes only work at page 1. How can i fix it?

My button on datatable:

<form id="mulksilme-<?php echo $mulkid; ?>" method="POST">
    <input type="text" style="display: none;" name="mulkklavus" value="<?php echo $mulkid; ?>">
    <button id="sa-warning" type="submit" class="btn btn-info">
        <i class="ti-trash"> </i>
    </button>
</form>

My javascript(this code generating for each row):

$('#myTable').dataTable({
    "drawCallback": function (settings) {
        $("#mulksilme-<?php echo $mulkid; ?>").on("submit", function (e) {
            e.preventDefault();
            Swal.fire({
                title: 'Emin Misiniz?',
                text: "Mülk sonsuza dek silinecektir!",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Evet, silinsin!',
                cancelButtonText: 'Hayır, vazgeç!'
            }).then((result) => {
                    if (result.value) {
                        $.ajax({
                            url: "sil.php",
                            type: "POST",
                            data: new FormData(this),
                            contentType: false,
                            processData: false,

                        })
                        location.reload();
                    }
                }
            )
        });
    }
});

Answer 1

Passing the ID from the server-side will not work in this case. You have to fetch the ID per row on the client-side.

Example

<table id="data-table" class="table table-striped table-bordered dt-responsive nowrap dataTable no-footer dtr-inline collapsed">
    <thead>
    <tr>
        <th>Username</th>
        <th>E-Mail/th>
        <th>First name</th>
        <th>Last name/th>
        <th>Role</th>
        <th>Enabled</th>
        <th>Created at</th>
        <th>Action</th>
    </tr>
    <tfoot></tfoot>
</table>

const table = $('#data-table').DataTable({
    'processing': true,
    'serverSide': true,
    'language': {
        'url': __('js/datatable-english.json')
    },
    'ajax': {
        'url': 'users/list',
        'type': 'POST'
    },
    'columns': [
        {'data': 'username'},
        {'data': 'email'},
        {'data': 'first_name'},
        {'data': 'last_name'},
        {'data': 'role'},
        {'data': 'enabled'},
        {'data': 'created_at'},
        {
            'orderable': false,
            'searchable': false,
            'data': null,
            'render': function (data, type, row, meta) {
                return '<button type="button" class="btn btn-info">Edit</button>';
            }
        }
    ],
});

$('#data-table tbody').on('click', 'button', table, function () {
    const data = table.row($(this).parents('tr')).data();
    //alert('Edit user: ' + data.id);

    Swal.fire({
        title: 'Emin Misiniz?',
        text: "Mülk sonsuza dek silinecektir!",
        type: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Evet, silinsin!',
        cancelButtonText: 'Hayır, vazgeç!'
    }).then(function (result) {
            if (result.value) {
                $.ajax({
                    url: "sil.php",
                    type: "POST",
                    contentType: 'application/json',
                    dataType: 'json',
                    data: JSON.stringify(data)
                }).done(function (result) {
                    alert('done');
                    //location.reload();
                });
            }
        }
    )
});