I have this datatables on my php but the jquery onclick functions only works properly on the first page but not the others.

the view data using modal works fine and the deleting of data as well but only on the first page

this is my buttons

<button type="button" id="<?php echo $row["Member_ID"]; ?>" >
    <i ></i>
</button>
<button type="button" id="<?php echo $row["Member_ID"]; ?>" >
    <i ></i>
</button

the command for viewing and deleting data:

<script>
    $(document).ready(function() {
        $('.delete_member_data').click(function(e) {
            e.preventDefault();
            var employee_id = $(this).attr("id");
            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "delete_members.php",
                        method: "post",
                        data: {
                            employee_id: employee_id
                        },
                        success: function(data) {
                            Swal.fire(
                                'Deleted!',
                                'Member successfully deleted.',
                                'success'
                            ).then((result) => {
                                window.location.reload(true);
                            });
                        }
                    });
                }
            })
        });
    });
</script>
<script>
    $(document).ready(function() {
        $('.view_member_data').click(function() {
            var employee_id = $(this).attr("id");
            $.ajax({
                url: "view_member_data.php",
                method: "post",
                data: {
                    employee_id: employee_id
                },
                success: function(data) {
                    $('#employee_detail').html(data);
                    $('#dataModal').modal("show");
                }
            });
        });
    });
</script>

CodePudding user response：

I've created a global variable for employe_id, then add employe_id when clicking on the button.

Buttons

<button type="button" onclick="set_employee_id(<?php echo $row["Member_ID"]; ?>)" >
    <i ></i>
</button>
<button type="button" onclick="set_employee_id(<?php echo $row["Member_ID"]; ?>)" >
    <i ></i>
</button> 

JS

<script>

var employee_id;
function set_employee_id(id){
    employee_id = id;
}

    $(document).ready(function() {
        $('.delete_member_data').click(function(e) {
            e.preventDefault();
            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "delete_members.php",
                        method: "post",
                        data: {
                            employee_id: employee_id
                        },
                        success: function(data) {
                            Swal.fire(
                                'Deleted!',
                                'Member successfully deleted.',
                                'success'
                            ).then((result) => {
                                window.location.reload(true);
                            });
                        }
                    });
                }
            })
        });
    });


    $(document).ready(function() {
        $('.view_member_data').click(function() {
            $.ajax({
                url: "view_member_data.php",
                method: "post",
                data: {
                    employee_id: employee_id
                },
                success: function(data) {
                    $('#employee_detail').html(data);
                    $('#dataModal').modal("show");
                }
            });
        });
    });
</script>