带有 Ajax + 数据表的 CRUD 表不起作用
Posted
技术标签:
【中文标题】带有 Ajax + 数据表的 CRUD 表不起作用【英文标题】：CRUD table with Ajax + Datatables does not work 【发布时间】：2021-08-24 18:28:38 【问题描述】：我正在使用 Ajax + Datatables 创建一个 CRUD 表，但由于某种原因，我的代码无法正常工作。
我可以使用我的数据库中的数据获取我的 json 响应，但我不知道为什么，它无法打印在我的表上。
我正在使用 2 个文件：
1.- main.php:
<?php
get_header_admin('Alex - AlexCRUD');
get_content_admin('Alex', 'AlexCRUD');
?>
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" href="#" />
<title>Alex CRUD</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<header>
<h3 class='text-center'>Tabla CRUD con Ajax</h3>
</header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<button id="btnNuevo" type="button" class="btn btn-info" data-toggle="modal"><i class="material-icons">library_add</i></button>
</div>
</div>
</div>
<br>
<div class="container caja">
<div class="row">
<div class="col-lg-12 col-sm-12">
<div>
<table id="tablaUsuarios" class="table table-striped table-bordered table-condensed" style="width:100%" >
<thead class="text-center">
<tr>
<!-- <th>ID</th> -->
<th>Usuario</th>
<th>Apellido 1</th>
<th>Apellido 2</th>
<th>Email</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modalCRUD" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<form id="formUsuarios">
<div class="modal-body">
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="" class="col-form-label">Usuario:</label>
<input type="text" class="form-control" id="usuario">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="" class="col-form-label">Apellido 1</label>
<input type="text" class="form-control" id="apellido1">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="" class="col-form-label">Apellido 2</label>
<input type="text" class="form-control" id="apellido2">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="" class="col-form-label">Email</label>
<input type="text" class="form-control" id="email">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-dismiss="modal">Cancelar</button>
<button type="submit" id="btnGuardar" class="btn btn-dark">Guardar</button>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function()
var id, opcion;
opcion = 4;
tablaUsuarios = $("#tablaUsuarios").DataTable(
"language": "url": "//cdn.datatables.net/plug-ins/1.10.20/i18n/Spanish.json",
"paging": true,
"lengthChange": false,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": false,
"scrollX": false,
"ajax":
"url": '<?=SITE_URL_ADMIN?>/alexcrud/crud',
"method": 'POST', //usamos el metodo POST
"data": opcion: opcion, //enviamos opcion 4 para que haga un SELECT
"dataSrc": ""
,
"columns": [
"data": "id",
"data": "usuario",
"data": "apellido1",
"data": "apellido2",
"data": "email",
"defaultContent": "<div class='text-center'><div class='btn-group'><button class='btn btn-primary btn-sm btnEditar'><i class='material-icons'>edit</i></button><button class='btn btn-danger btn-sm btnBorrar'><i class='material-icons'>delete</i></button></div></div>"
],
success: function(data) // A function to be called if request succeeds
console.log(data);
);
var fila; // Captura la fila, para editar o eliminar.
// Submit para el Alta y Actualización.
$('#formUsuarios').submit(function(e)
e.preventDefault(); // Evita el comportambiento normal del submit.
id = '1';
usuario = $.trim($('#usuario').val());
apellido1 = $.trim($('#apellido1').val());
apellido2 = $.trim($('#apellido2').val());
email = $.trim($('#email').val());
$.ajax(
"url": '<?=SITE_URL_ADMIN?>/alexcrud/crud',
type: "POST",
datatype: "json",
data: id:id, usuario:usuario, apellido1:apellido1, apellido2:apellido2, email:email, opcion:opcion,
success: function(data)
tablaUsuarios.ajax.reload(null, false);
);
$('#modalCRUD').modal('hide');
);
// Para limpiar los campos antes de dar de Alta una Persona.
$("#btnNuevo").click(function()
opcion = 1; // Alta
id = null;
$("#formUsuarios").trigger("reset");
$(".modal-header").css( "background-color", "#17a2b8");
$(".modal-header").css( "color", "white" );
$(".modal-title").text("Alta de Usuario");
$('#modalCRUD').modal('show');
);
// Editar
$(document).on("click", ".btnEditar", function()
opcion = 2; // Editar
fila = $(this).closest("tr");
id = parseInt(fila.find('td:eq(0)').text()); // Capturo el ID
usuario = fila.find('td:eq(1)').text();
apellido1 = fila.find('td:eq(2)').text();
apellido2 = fila.find('td:eq(3)').text();
email = fila.find('td:eq(4)').text();
$("#usuario").val(usuario);
$("#apellido1").val(apellido1);
$("#apellido2").val(apellido2);
$("#email").val(email);
$(".modal-header").css("background-color", "#007bff");
$(".modal-header").css("color", "white" );
$(".modal-title").text("Editar Usuario");
$('#modalCRUD').modal('show');
);
// Borrar
$(document).on("click", ".btnBorrar", function()
fila = $(this);
id = parseInt($(this).closest('tr').find('td:eq(0)').text());
opcion = 3; // Eliminar
var respuesta = confirm("¿Está seguro de borrar el registro " + id + "?");
if (respuesta)
$.ajax(
"url": '<?=SITE_URL_ADMIN?>/alexcrud/crud',
type: "POST",
datatype:"json",
data: opcion:opcion, id:id,
success: function()
tablaUsuarios.row(fila.parents('tr')).remove().draw();
);
);
);
</script>
</body>
</html>
<?php
get_footer_admin();
?>
2.- crud.php:
<?php
global $DB;
$id = (isset($_POST['id'])) ? $_POST['id'] : '';
$usuario = (isset($_POST['usuario'])) ? $_POST['usuario'] : '';
$apellido1 = (isset($_POST['apellido1'])) ? $_POST['apellido1'] : '';
$apellido2 = (isset($_POST['apellido2'])) ? $_POST['apellido2'] : '';
$email = (isset($_POST['email'])) ? $_POST['email'] : '';
$opcion = (isset($_POST['opcion'])) ? $_POST['opcion'] : '';
/* PRE Queries */
$draw = $_POST['draw'];
$row = $_POST['start'];
$rowperpage = $_POST['length']; // Rows display per page
$columnIndex = $_POST['order'][0]['column']; // Column index
$columnName = $_POST['columns'][$columnIndex]['data']; // Column name
$columnSortOrder = $_POST['order'][0]['dir']; // asc or desc
$searchValue = $_POST['search']['value']; // Search value
// Search
$searchQuery = " ";
if($searchValue != '')
$searchQuery = " and (nombre LIKE '%".$searchValue."%' or apellido1 like '%".$searchValue."%' or apellido2 like '%".$searchValue."%')";
// Total number of records without filtering
$sel = "select count(*) as allcount from users_test";
$records = $DB->get_record($sel);
$totalRecords = $records->allcount;
// Total number of record with filtering
$sel = "select count(*) as allcount from users_test WHERE 1 ".$searchQuery;
$records = $DB->get_record($sel);
$totalRecordwithFilter = $records->allcount;
switch($opcion)
case 1: // Alta.
$consulta = "INSERT INTO users_test (id, usuario, apellido1, apellido2, email) VALUES('$id', '$usuario', '$apellido1', '$apellido2', '$email') ";
$resultado = $DB->query($consulta);
$consulta = "SELECT id, usuario, apellido1, apellido2, email FROM users_test";
$resultado = $DB->get_records($consulta);
$data = $resultado;
break;
case 2: // Editar.
$consulta = "UPDATE users_test SET usuario = '$usuario', apellido1='$apellido1', apellido2='$apellido2', email='$email' WHERE id = '$id' ";
$resultado = $DB->query($consulta);
$consulta = "SELECT id, usuario, apellido1, apellido2, email FROM users_test"; // $consulta = "SELECT id, usuario, apellido1, apellido2, email FROM users_test WHERE id='$id' ";
$resultado = $DB->get_records($consulta);
$data = $resultado;
break;
case 3: // Borrar.
$consulta = "DELETE FROM users_test WHERE id = '$id'";
$resultado = $DB->query($consulta);
$data = $resultado;
break;
case 4: // Ver datos.
$consulta = "SELECT id, usuario, apellido1, apellido2, email FROM users_test"; // WHERE 1 and ".$searchQuery." order by ".$columnName." ".$columnSortOrder." limit ".$row.",".$rowperpage;;
$resultado = $DB->get_records($consulta);
$data = array();
foreach($resultado as $res)
$nestedData = array();
$nestedData[id] = $res->id;
$nestedData[usuario] = $res->usuario;
$nestedData[apellido1] = $res->apellido1;
$nestedData[apellido2] = $res->apellido2;
$nestedData[email] = $res->email;
$data[] = $nestedData;
$json_data = array(
"draw" => intval($draw),
"iTotalRecords" => $totalRecords,
"iTotalDisplayRecords" => $totalRecordwithFilter, // Total number of records after searching, if there is no searching then totalFiltered = totalData
"data" => $data // Total data array
);
echo json_encode($json_data);
break;
?>
只是为了澄清一些事情...我在自定义 CMS 下工作，这就是为什么我不需要导入 bootstrap、jquery 或 Datatables，因为已经导入。
另外，我正在从自定义函数加载页眉、内容和页脚，所以...只是为了澄清这一点。
所以，这是我的表格（我可以显示数据）：
这是我刷新页面并引发 Ajax 调用时得到的 json 响应：
我无法完全显示我的数据，但我从我的数据库中获取了所有数据，即我需要的信息，因此 Ajax 工作正常。
我需要在我的桌子上展示我从我的回复中得到了什么。 怎么能这样做？我的代码不工作:(
提前谢谢各位
【问题讨论】：
尝试删除"dataSrc": "" - 您根本不需要使用 dataSrc 选项，因为看起来您的 JSON 行数据已经在***命名数组中： ... "data": [...] ... .默认情况下，DataTables 为行迭代入口点使用的名称是data。因此，完全不使用dataSrc 与使用"dataSrc": "data" 相同。
哇，伙计......你真是难以置信......现在它起作用了，哈哈......你是对的！非常感谢！
【参考方案1】：
删除 "dataSrc": "" - 您根本不需要使用 dataSrc 选项，因为它看起来好像您的 JSON 行数据已经在***命名数组中： ... "data": [...] ... 。
默认情况下，DataTables 为行迭代入口点使用的名称是 data。所以，根本不使用dataSrc 与使用"dataSrc": "data" 是一样的。
如果你使用"dataSrc": ""，那就是告诉 DataTables 你的行数组是这样的 JSON 结构——一个数组数组：
[ [...], [...], ]
或者像这样 - 一个对象数组：
[ ..., ..., ]
并且在上述两种情况下，那个外层数组是 JSON 字符串的顶层，它没有名字，也没有包含 ...。
dataSrc 选项记录在 here 中，供参考。
【讨论】：
以上是关于带有 Ajax + 数据表的 CRUD 表不起作用的主要内容，如果未能解决你的问题，请参考以下文章
ng-click 在 ajax 数据表 + codeigniter 中不起作用
CRUD - 如果页面没有刷新，添加和删除一个接一个地不起作用