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"]; ?>" class="btn btn-success btn-sm view_member_data">
<i class="bi bi-eye-fill"></i>
</button>
<button type="button" id="<?php echo $row["Member_ID"]; ?>" class="btn btn-danger btn-sm delete_member_data">
<i class="bi bi-trash-fill"></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>
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"]; ?>)" class="btn btn-success btn-sm view_member_data">
<i class="bi bi-eye-fill"></i>
</button>
<button type="button" onclick="set_employee_id(<?php echo $row["Member_ID"]; ?>)" class="btn btn-danger btn-sm delete_member_data">
<i class="bi bi-trash-fill"></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>