通过选择复选框删除记录在 Jquery 数据表的第一页上工作正常，但在第二页上不行
Posted
技术标签:
【中文标题】通过选择复选框删除记录在 Jquery 数据表的第一页上工作正常，但在第二页上不行【英文标题】：Record deletion by selecting checkbox works fine on first page of Jquery datatables but not in second page 【发布时间】：2020-01-16 04:35:15 【问题描述】：我是 jquery 数据表的新手，我尝试了 *** 中给出的可能解决方案，但对我没有任何作用 所以请根据我的代码建议我应该做什么（简单的解决方案和解释）。
问题陈述- 我实现了复选框来删除表的多条记录， Jquery Datatable 在第一页上工作正常，当我单击第一页上的选中所有复选框时，它会选中该页面的所有复选框并删除记录，但如果我在第二页并单击选中所有复选框，则它返回到第一页，如果我选择两个不同页面的记录，它也不会删除记录
< 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 >
<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 >Name</th>
<th >Address</th>
<th >Gender</th>
<th >Designation</th>
<th >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>.
【问题讨论】：
【参考方案1】：您的页面正在重新加载，因为您的表格位于表单元素中，并且由于您的操作没有目标，因此页面只会提交给自身。试试
$('#buttonId').click( function(event)
event.preventDefault();
);
停止表单提交页面，因为您正在使用 javascript 处理它。
您的删除行功能在多个页面上不起作用，因为其他 [DataTables] 页面上的元素在 DOM 中不存在。当您单击第 2 页或其他任何内容时，DataTables 将重新绘制表格元素以显示新值并隐藏旧值。分页只是这么多结果的一个限制，而 DataTables 足够聪明，可以将其放入分页中。
【讨论】：
以上代码不起作用，我在 javascript 文件中使用 id=checkall 下面的代码 感谢以上回答，有什么方法可以删除 Jquery 数据表中的隐藏复选框，如何删除不可见的先前页面的选中复选框？？以上是关于通过选择复选框删除记录在 Jquery 数据表的第一页上工作正常，但在第二页上不行的主要内容，如果未能解决你的问题，请参考以下文章
标题和行中带有复选框的Jquery数据表：选择所有复选框不起作用
使用jquery表中的复选框从数组中删除JavaScript对象