I am new to jquery datatables ,I tried may solution given in the stackoverflow but nothing works for me So please suggest me what should i to according to my code(easy and simple solution with explanation).
Problem statement- i implemented checkbox to delete the multiple records of table, Jquery Datatable works fine on first page, when i click the check all checkbox on first page it checks all the check box of that page and delete the record but if i am in second page and click check all checkbox then it return to first page, also it will not delete the record if i select the records of two different pages
< script >
//Delete conformation message
/***************************/
//SelectAll checkBox
/****************************/
$(document).ready(function() {
$('#testtable').dataTable();
$('#checkall').click(function() {
if (this.checked) {
$('.delete_checkbox').each(function() {
this.checked = true;
$(this).closest('tr').addClass('removeRow');
});
} else {
$('.delete_checkbox').each(function() {
this.checked = false;
$(this).closest('tr').removeClass('removeRow');
});
}
});
/********************************/
//Select indivisual checkBox
/*******************************/
$('.delete_checkbox').click(function() {
if ($(this).is(':checked')) {
$(this).closest('tr').addClass('removeRow');
} else {
$(this).closest('tr').removeClass('removeRow');
}
});
/*******************************/
//Deletion of Data
/***********************************/
$('#delete_all').click(function() {
var checkbox = $('.delete_checkbox:checked').prop('checked', this.checked);;
if (checkbox.length > 0) {
var result = confirm("Are you sure");
if (result == true) {
var checkbox_valu = [];
$(checkbox).each(function() {
checkbox_valu.push($(this).val());
});
$.ajax({
url: "delete.php",
method: "POST",
data: {
checkbox_id: checkbox_valu
},
success: function() {
$('.removeRow').fadeOut(1500);
location.reload(true)
}
});
} else {
return false;
}
} else {
alert("Select atleast one records");
}
});
/******************************************/
});
<
/script>
<style>.removeRow {
background-color: #FF0000;
color: #FFFFFF;
}
</style>
<html>
<head>
<title>Delete Multiple Records using PHP Ajax with Animated Effect</title>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css">
</head>
<body>
<div class="container">
<br />
<div class="table-responsive">
<h3 align="center">Delete Multiple Records using PHP Ajax with Animated Effect</h3><br />
<div class="table-responsive">
<table id="testtable" class="table table-bordered">
<thead>
<tr>
<th width="10%">
<form method="post" action="">
<input type="checkbox" id="checkall" autocomplete="off" />
<button type="button" id="delete_all" class="btn btn-danger btn-xs">Delete</button>
</form>
</th>
<th width="20%">Name</th>
<th width="38%">Address</th>
<th width="7%">Gender</th>
<th width="25%">Designation</th>
<th width="5%">Age</th>
</tr>
</thead>
<?php
foreach($result as $row)
{
echo '
<tr>
<td>
<input type="checkbox" autocomplete="off" class="delete_checkbox" value="'.$row["id"].'" />
</td>
<td>'.$row["name"].'</td>
<td>'.$row["address"].'</td>
<td>'.$row["gender"].'</td>
<td>'.$row["designation"].'</td>
<td>'.$row["age"].'</td>
</tr>
';
}
?>
</table>
</div>
</div>
</div>
</body>
</html>
.
Aucun commentaire:
Enregistrer un commentaire