我使用PHP，MySQL，DataTables和模态Bootstrap 3来编写AJAX表单，我已经实现了从我的MySQL数据库加载数据但是我无法在不刷新整个数据的情况下看到新数据页。这是我的代码：
color.php
<?php
session_start();
require_once '../../class/query_color.php';
$objColor = new Color;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" type="image/png" href="../ico/icono.ico">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Administración de colores</title>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="../css/dataTables.bootstrap.css">
<link rel="stylesheet" type="text/css" href="../css/dataTables.colVis.css">
<link rel="stylesheet" type="text/css" href="../css/bootstrap-select.min.css">
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../js/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="../js/dataTablesLanguage.js"></script>
<script type="text/javascript" src="../js/dataTables.colVis.js"></script>
<script type="text/javascript" src="../js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="../js/dataTables.fnReloadAjax.js"></script>
</head>
<body>
<div class="container" id="container">
<?php
$consulta = $objColor->select_color();
include('modal_add_color.php');
?>
<button type='button' href='#agregarColor' class="btn btn-success" data-toggle='modal' data-backdrop='static'>Nuevo</button>
<br/>
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered table-condensed" id="colores">
<thead>
<tr>
<th>Color</th>
</tr>
</thead>
<tbody>
<?php
while($fila = mysql_fetch_array($consulta)){
$id = $fila['idColor'];
echo "<tr>";
echo "<td>";
include('modal_edit_color.php');
echo "<button type='button' href='#editarColor".$id."' id='".$id."' class='btn btn-default btn-xs' data-toggle='modal' data-backdrop='static'>".$fila['nomColor']."</button>";
echo "</td>";
echo "</tr>";
}
?>
</tbody>
</table>
</div>
<br/><br/>
<script>
$('.modal').on('shown.bs.modal', function() {
$(this).find('input:eq(1)').focus();
});
</script>
</body>
</html>
modal_add_color.php
<?php
if(isset($_POST['submit'])){
require_once '../../class/query_color.php';
$nomColor = $_POST['nomColor'];
$objColor = new Color;
$objColor->alta_color($nomColor);
}else{
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<script type="text/javascript" src="../../class/ajaxColor.js"></script>
</head>
<body>
<div id="agregarColor" class="modal fade" role="dialog" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title">Agregar color</h2>
</div>
<form id="formularioAltaColor" name="formularioAltaColor" method='post' action="modal_add_color.php" onsubmit="altaColor(); return false">
<input type="hidden" name="submit" value="">
<div class="modal-body">
<table class="modal-table">
<tr>
<td><label>Color</label></td>
<td><input type='text' name='nomColor' class="form-control focusedInput" onfocus="this.value = this.value;" maxlength="30" required></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
<button type="submit" name="submit" id="submit" class="btn btn-primary" value="submit">Guardar cambios</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
<?php
}
?>
ajaxColor.php
function altaColor(){
var dataString = $('#formularioAltaColor').serialize();
var table = $('#colores').DataTable();
$.ajax({
url: 'modal_add_color.php',
type: "POST",
data: dataString,
success: function(datos){
$('#agregarColor').modal('hide');
/*What can I code here to refresh my dataTable without refresh fullpage?*/
}
})
return false;
}
dataTablesLanguage.js
$(document).ready(function(){
$('#colores').DataTable({
"language": {
"sProcessing": "Procesando...",
"sLengthMenu": "Mostrar _MENU_ registros",
"sZeroRecords": "No se encontraron resultados",
"sEmptyTable": "Ningún dato disponible en esta tabla",
"sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
"sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
"sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
"sInfoPostFix": "",
"sSearch": "Buscar:",
"sUrl": "",
"sInfoThousands": ",",
"sLoadingRecords":"Cargando...",
"paginate": {
"sFirst": "Primero",
"sLast": "Último",
"sNext": "Siguiente",
"sPrevious": "Anterior"
},
"aria": {
"sSortAscending": ": Activar para ordenar la columna de manera ascendente",
"sSortDescending": ": Activar para ordenar la columna de manera descendente"
}
},
//"responsive": true,
"iDisplayLength": 50
});
});
query_color.php
<?php
require_once 'connection.php';
class Color{
private $conn;
function color(){
$this->conn = new Connection;
}
function select_color(){
$result = NULL;
if($this->conn->connect() == true){
$query = "SELECT idColor, nomColor FROM color ORDER BY nomColor ASC";
$result = mysql_query($query);
}
$this->conn->disconnect();
return $result;
}
function alta_color($campo){
$resultado = NULL;
if($this->conn->connect() == true){
$query = "INSERT INTO color (nomColor) VALUES ('".mysql_real_escape_string($campo)."')";
$result = mysql_query($query);
}
$this->conn->disconnect();
return $result;
}
}
?>
它工作正常，它插入数据没有问题，但我想省略重新加载整页的部分，以查看插入的数据。
答案 0 :(得分：0)
您可以尝试使用您的数据
var str='';
for(var value in datos){
str+='<tr><td>'+value+'</label></td>';
}
$('tbody').html(str);
答案 1 :(得分：0)
要刷新数据表，请使用draw()功能。但是，要使其工作，您需要更新数据表数据对象。例如，如果需要更新单个单元格中的数据，则可以使用cell.data()函数：
var table = $('#colores').DataTable();
$.ajax({
url: 'modal_add_color.php',
type: "POST",
data: dataString,
success: function(datos){
$('#agregarColor').modal('hide');
cell = table.cell($('jquery-selector-here'));
cell.data('new-cell-data-here');
table.draw();
}
})
不建议直接更新表格html，因为数据表不会看到新数据。您需要通过它API更新数据表，然后重新绘制表格。