Boostrap Datatable Modal Ajax成功问题

我制作了一个网页，它有一个顶部固定的导航栏和一个带有分页的CRUD数据表，其中有打开模式的按钮。我似乎遇到的问题是，当我点击删除按钮时，模态弹出，我能够删除该记录，但是模态不会关闭，除非我点击模态之外的其他地方，并将总记录"添加到"中；显示12〃中的10〃；是不正确的，直到我刷新页面，然后显示正确的值。`我在下面包含了我的所有代码。我不知道如何解决这个问题，如果有任何帮助，我们将不胜感激。
//AJAX CODE
//ADD
$(document).on('click','#btn-add',function(e) {
var data = $("#user_form").serialize();
$.ajax({
data: data,
type: "post",
url: "backend/save.php",
success: function(dataResult){
var dataResult = JSON.parse(dataResult);
if(dataResult.statusCode==200){
$('#addEmployeeModal').modal('hide');
alert('Data added successfully !'); 
location.reload();                      
}
else if(dataResult.statusCode==201){
alert(dataResult);
}
}
});
});
$(document).on('click','.update',function(e) {
var id=$(this).attr("data-id");
var code=$(this).attr("data-code");
var regno=$(this).attr("data-regno");
var vatno=$(this).attr("data-vatno");
var name=$(this).attr("data-name");
var address=$(this).attr("data-address");
var phone=$(this).attr("data-phone");
var email=$(this).attr("data-email");       
var person=$(this).attr("data-person");
$('#id_u').val(id);
$('#code_u').val(code);
$('#regno_u').val(regno);
$('#vatno_u').val(vatno);
$('#name_u').val(name);
$('#address_u').val(address);
$('#phone_u').val(phone);
$('#email_u').val(email);       
$('#person_u').val(person);
});
//Update
$(document).on('click','#update',function(e) {
var data = $("#update_form").serialize();
$.ajax({
data: data,
type: "post",
url: "backend/save.php",
success: function(dataResult){
var dataResult = JSON.parse(dataResult);
if(dataResult.statusCode==200){
$('#editEmployeeModal').modal('hide');
alert('Data updated successfully !'); 
location.reload();                      
}
else if(dataResult.statusCode==201){
alert(dataResult);
}
}
});
});
$(document).on("click", ".delete", function() { 
var id=$(this).attr("data-id");
$('#id_d').val(id);

});
$(document).on("click", "#delete", function() { 
$.ajax({
url: "backend/save.php",
type: "POST",
cache: false,
data:{
type:3,
id: $("#id_d").val()
},
success: function(dataResult){
$('#deleteEmployeeModal').modal('hide');
$("#"+dataResult).remove();

}
});
});
$(document).on("click", "#delete_multiple", function() {
var user = [];
$(".user_checkbox:checked").each(function() {
user.push($(this).data('user-id'));
});
if(user.length <=0) {
alert("Please select records."); 
} 
else { 
WRN_PROFILE_DELETE = "Are you sure you want to delete "+(user.length>1?"these":"this")+" row?";
var checked = confirm(WRN_PROFILE_DELETE);
if(checked == true) {
var selected_values = user.join(",");
console.log(selected_values);
$.ajax({
type: "POST",
url: "backend/save.php",
cache:false,
data:{
type: 4,                        
id : selected_values
},
success: function(response) {
var ids = response.split(",");
for (var i=0; i < ids.length; i++ ) {   
$("#"+ids[i]).remove(); 
}   
} 
}); 
}  
} 
});
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
var checkbox = $('table tbody input[type="checkbox"]');
$("#selectAll").click(function(){
if(this.checked){
checkbox.each(function(){
this.checked = true;                        
});
} else{
checkbox.each(function(){
this.checked = false;                        
});
} 
});
checkbox.click(function(){
if(!this.checked){
$("#selectAll").prop("checked", false);
}
});
});
//MY php CODE
<?php
session_start();
if (!isset($_SESSION["user_email"])) {
header('location: login.html');
}
include 'backend/database.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
PHP
</title>
<!-- favicon -->
<link rel="icon" href="/assets/img/favicon.ico">
<!-- ===== DATATABLE ===== -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<!-- ===== DATATABLE STYLE ===== -->
<link rel="stylesheet" href="http://localhost/PHP/assets/style.css">
<!-- Style -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- BOOTSTRAP MODAL -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- AJAX -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="ajax/ajax.js"></script>
</head>
<body class="home">
<!-- Navbar -->
<header class="header">
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">LIMA RDF <i>Engineering</i></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
<span></span>
<span></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="navbarSupportedContent">
<ul class="navbar-nav" style="margin-left: auto;text-align: center;">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="http://localhost/PHP/index.php">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link active dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Setup
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="http://localhost/PHP/partner.php">Business Partner</a></li>
<li><a class="dropdown-item" href="#">Project</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<button class="btn btn-outline-danger" type="button" onclick="window.location.href='./login/logout.php';">Log Out</button>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- DATATABLE START-->
<div class="container">
<div>
<a href="#addClientModal" class="btn btn-success" data-toggle="modal"><i class="material-icons">&#xE147;</i>
<span>Add New Client</span></a>
</div>   
<div class="row">
<div class="col-md-12">
<div class="datatable">
<table id="example" class="content-table table-hover" style="width:100%">
<thead>
<tr>
<th style="text-align: center;">CLIENT NO</th>
<th>NAME</th>
<th>ADDRESS</th>
<th>PHONE NO</th>
<th>EMAIL</th>
<th>CONTACT PERSON</th>
<th style="text-align: center;">ACTION</th>
</tr>
</thead>
<tbody>
<?php
$result = mysqli_query($conn, "SELECT * FROM tbl_client");
$i = 1;
while ($row = mysqli_fetch_array($result)) {
?>
<tr id="<?php echo $row["id"]; ?>">
<td style="text-align: center;"><?php echo $row["code"]; ?></td>
<td><?php echo $row["name"]; ?></td>
<td><?php echo $row["address"]; ?></td>
<td><?php echo $row["phone"]; ?></td>
<td><?php echo $row["email"]; ?></td>
<td><?php echo $row["person"]; ?></td>
<td style="text-align: center;">
<a style="padding-left:5px;padding-right:5px;" href="#editClientModal" class="edit" data-toggle="modal">
<i class="material-icons update" data-toggle="tooltip" data-id="<?php echo $row["id"]; ?>" data-code="<?php echo $row["code"]; ?>" data-regno="<?php echo $row["regno"]; ?>" data-vatno="<?php echo $row["vatno"]; ?>" data-name="<?php echo $row["name"]; ?>" data-address="<?php echo $row["address"]; ?>" data-phone="<?php echo $row["phone"]; ?>" data-email="<?php echo $row["email"]; ?>" data-person="<?php echo $row["person"]; ?>" title="Edit"><span class="fa fa-pencil"></span></i>
</a>
<a style="padding-left:5px;padding-right5px;" href="#deleteClientModal" class="delete" data-id="<?php echo $row["id"]; ?>" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Delete"><span class="fa fa-trash"></span></i></a>
</td>
</tr>
<?php
$i++;
}
?>
</tbody>
</table>
<!-- Add Modal HTML -->
<div id="addClientModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<form id="user_form">
<div class="modal-header">
<h4 class="modal-title">Add User</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>CLIENT CODE</label>
<input type="text" id="code" name="code" class="form-control" required>
</div>
<div class="form-group">
<label>BUSINESS REGISTRATION NO.</label>
<input type="text" id="regno" name="regno" class="form-control" required>
</div>
<div class="form-group">
<label>VAT REGISTRAION NO.</label>
<input type="text" id="vatno" name="vatno" class="form-control" required>
</div>
<div class="form-group">
<label>NAME</label>
<input type="text" id="name" name="name" class="form-control" required>
</div>
<div class="form-group">
<label>ADDRESS</label>
<input type="textarear" rows="4" cols="50" id="address" name="address" class="form-control" required>
</div>
<div class="form-group">
<label>PHONE</label>
<input type="phone" id="phone" name="phone" class="form-control" required>
</div>
<div class="form-group">
<label>EMAIL</label>
<input type="email" id="email" name="email" class="form-control" required>
</div>
<div class="form-group">
<label>CONTACT PERSON</label>
<input type="text" id="person" name="person" class="form-control" required>
</div>
</div>
<div class="modal-footer">
<input type="hidden" value="1" name="type">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
<button type="button" class="btn btn-success" id="btn-add">Add</button>
</div>
</form>
</div>
</div>
</div>
<!-- Edit Modal HTML -->
<div id="editClientModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<form id="update_form">
<div class="modal-header">
<h4 class="modal-title">Edit User</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
</div>
<div class="modal-body">
<input type="hidden" id="id_u" name="id" class="form-control" required>
<div class="form-group">
<label>Code</label>
<input type="text" id="code_u" name="code" class="form-control" required>
</div>
<div class="form-group">
<label>Buiness Registration No.</label>
<input type="text" id="regno_u" name="regno" class="form-control" required>
</div>
<div class="form-group">
<label>VAT Registration No.</label>
<input type="text" id="vatno_u" name="vatno" class="form-control" required>
</div>
<div class="form-group">
<label>Name</label>
<input type="text" id="name_u" name="name" class="form-control" required>
</div>
<div class="form-group">
<label>Address</label>
<input type="address" id="address_u" name="address" class="form-control" required>
</div>
<div class="form-group">
<label>Phone No.</label>
<input type="phone" id="phone_u" name="phone" class="form-control" required>
</div>
<div class="form-group">
<label>Email</label>
<input type="email" id="email_u" name="email" class="form-control" required>
</div>
<div class="form-group">
<label>Contact Person</label>
<input type="text" id="person_u" name="person" class="form-control" required>
</div>
</div>
<div class="modal-footer">
<input type="hidden" value="2" name="type">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
<button type="button" class="btn btn-info" id="update">Update</button>
</div>
</form>
</div>
</div>
</div>
<!-- Delete Modal HTML -->
<div id="deleteClientModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<form>
<div class="modal-header">
<h4 class="modal-title">Delete User</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
</div>
<div class="modal-body">
<input type="hidden" id="id_d" name="idd" class="form-control">
<p>Are you sure you want to delete these Records?</p>
<p class="text-warning"><small>This action cannot be undone.</small></p>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
<button type="button" class="btn btn-danger" id="delete">Delete</button>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src=" https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap5.min.js"></script>
<style>
.pagination {
float: right;
text-align: right;
}
.pagination .page-item.active .page-link {
background-color: #0A2558;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item.active .page-link:focus {
background-color: #0A2558;
}
.pagination .page-item.active .page-link:hover {
background-color: #0A2558;
}
.content-table {
border-collapse: collapse;
margin: 5px 0;
font-size: 0.9em;
min-width: 400px;
border-radius: 5px 5px 0 0;
overflow: hidden;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.content-table thead tr {
background-color: #0A2558;
color: #ffffff;
text-align: left;
font-weight: bold;
}
.content-table th,
.content-table td {
padding: 8px 8px;
}
.content-table tbody tr {
border-bottom: 1px solid #dddddd;
}
.content-table tbody tr:nth-of-type(even) {
background-color: #f3f3f3;
}
.content-table tbody tr:last-of-type {
border-bottom: 2px solid #009879;
}
.content-table tbody tr.active-row {
font-weight: bold;
color: #009879;
}
.dataTables_filter {
float: right;
text-align: right;
}
</style>
<script>
$(document).ready(function() {
$('#example').DataTable();
});
</script>
</body>
</html>
//MY SAVE PHP
<?php
include 'database.php';
if(count($_POST)>0){
if($_POST['type']==1){
$code=$_POST['code'];
$regno=$_POST['regno'];
$vatno=$_POST['vatno'];
$name=$_POST['name'];
$address=$_POST['address'];
$phone=$_POST['phone'];
$email=$_POST['email'];
$person=$_POST['person'];

$sql = "INSERT INTO `tbl_client`( `code`, `regno`, `vatno`, `name`, `address`, `phone`, `email`,`person`) 
VALUES ('$code','$regno','$vatno','$name','$address','$phone','$email','$person')";
if (mysqli_query($conn, $sql)) {
echo json_encode(array("statusCode"=>200));
} 
else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
mysqli_close($conn);
}
}
if(count($_POST)>0){
if($_POST['type']==2){
$id=$_POST['id'];
$code=$_POST['code'];
$regno=$_POST['regno'];
$vatno=$_POST['vatno'];
$name=$_POST['name'];
$address=$_POST['address'];
$phone=$_POST['phone'];
$email=$_POST['email'];
$person=$_POST['person'];
$sql = "UPDATE `tbl_client` SET `code`='$code',`regno`='$regno',`vatno`='$vatno',`name`='$name',`address`='$address', `phone`='$phone', `email`='$email', `person`='$person' WHERE id=$id";
if (mysqli_query($conn, $sql)) {
echo json_encode(array("statusCode"=>200));
} 
else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
mysqli_close($conn);
}
}
if(count($_POST)>0){
if($_POST['type']==3){
$idd=$_POST['id'];
$sql = "DELETE FROM `tbl_client` WHERE id=$idd ";
if (mysqli_query($conn, $sql)) {
echo $idd;
} 
else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
mysqli_close($conn);
}
}

?>
查看所有引导程序data-属性，以确保所有属性都使用data bs-prefix。我在你的代码中发现了几个没有它的。在bootstrap 5中，你的bootstrap属性应该包含data bs-，而不是
data-如果您是从bootstrap 4迁移，请查看此处的迁移更改列表。
相关内容

最新更新

热门标签：
