I explain I'm doing a crud at the moment everything works well I followed a guide because I really do not have much knowledge and the guide did not have the dataTables plugin that I think is important in a CRUD but I add them and the modal is damaged but the tables do not appear and the truth is no longer where to put them this is the code without putting the plugin
<?php
require('../php/seguridad.php');
require_once('../php/Conexion.php');
$conn = Conectar();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>.::Cerdos::.</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="../jscerdo/ajaxcer.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/administrador/">Deseas Ir al Inicio?</a>
</nav>
<div class="container">
<div class="starter-template">
<h1>.::Cerdos::.</h1>
<button type="button" Onclick='Modal();' class="btn btn-primary btn-lg" >
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Nuevo
</button>
</div>
<div class="panel panel-default">
<div class="panel-heading">.::Lista de Cerdos::.</div>
<table id="table" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>#</th>
<th>Cerdo</th>
<th>Chapeta</th>
<th>Raza</th>
<th>Genero</th>
<th>Modulo</th>
<th>Corral</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT *
FROM cerdo cer
INNER JOIN raza raz ON raz.id_raza=cer.id_raza
INNER JOIN genero gen ON gen.id_genero=cer.id_genero
INNER JOIN corral cor ON cor.id_corral=cer.id_corral
INNER JOIN modulo mdu ON mdu.id_modulo=cor.id_modulo
ORDER BY cerdo";
$stmt = $conn->prepare($sql);
$result = $stmt->execute();
$rows = $stmt->fetchAll(\PDO::FETCH_OBJ);
foreach($rows as $row){
?>
<tr>
<td><?php print($row->id_cerdo); ?></td>
<td><?php print($row->cerdo); ?></td>
<td><?php print($row->chapeta); ?></td>
<td><?php print($row->raza); ?></td>
<td><?php print($row->genero); ?></td>
<td><?php print($row->modulo); ?></td>
<td><?php print($row->corral); ?></td>
<td>
<div class="btn-group">
<button type="button" class="btn btn-danger">Seleccione</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a onclick="Eliminar('<?php print($row->id_cerdo); ?>');">Eliminar</a></li>
<li><a onclick="Editar('<?php print($row->id_cerdo); ?>','<?php print($row->cerdo); ?>','<?php print($row->chapeta); ?>','<?php print($row->raza); ?>','<?php print($row->genero); ?>','<?php print($row->modulo); ?>','<?php print($row->corral); ?>');">Actualizar</a></li>
</ul>
</div>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Nuevo Cerdo</h4>
</div>
<form role="form" action="" name="frmClientes" onsubmit="Registrar(idP,accion); return false">
<div class="col-lg-12">
<div class="form-group">
<label>Cerdo</label>
<input name="cerdo" class="form-control" required>
</div>
<div class="form-group">
<label>Chapeta</label>
<input name="chapeta" class="form-control" required>
</div>
<div class="form-group">
<label for="lll">Raza</label>
<select id="lll" name="raza">
<?php
$sql = "SELECT * FROM raza ORDER BY raza";
$stmt =$conn->prepare($sql);
$result = $stmt->execute();
$rows = $stmt->fetchAll(\PDO::FETCH_OBJ);
foreach ($rows as $row) {
?>
<option value ="<?php print($row->id_raza);?>"><?php print($row->raza);?></option>
<?php
}
?>
</select>
</div>
<div class="form-group">
<label for="lll">Genero</label>
<select id="lll" name="genero">
<?php
$sql = "SELECT * FROM genero ORDER BY genero";
$stmt =$conn->prepare($sql);
$result = $stmt->execute();
$rows = $stmt->fetchAll(\PDO::FETCH_OBJ);
foreach ($rows as $row) {
?>
<option value ="<?php print($row->id_genero);?>"><?php print($row->genero);?></option>
<?php
}
?>
</select>
</div>
<div class="form-group">
<label for="lll">Modulo</label>
<select id="lll" name="modulo">
<?php
$sql = "SELECT * FROM modulo ORDER BY modulo";
$stmt =$conn->prepare($sql);
$result = $stmt->execute();
$rows = $stmt->fetchAll(\PDO::FETCH_OBJ);
foreach ($rows as $row) {
?>
<option value ="<?php print($row->id_modulo);?>"><?php print($row->descripcion);?>"><?php print($row->modulo);?></option>
<?php
}
?>
</select>
</div>
<div class="form-group">
<label for="lll">Corral</label>
<select id="lll" name="corral">
<?php
$sql = "SELECT * FROM corral ORDER BY corral";
$stmt =$conn->prepare($sql);
$result = $stmt->execute();
$rows = $stmt->fetchAll(\PDO::FETCH_OBJ);
foreach ($rows as $row) {
?>
<option value ="<?php print($row->id_corral);?>"><?php print($row->corral);?></option>
<?php
}
?>
</select>
</div>
</div>
<button type="submit" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Registrar
</button>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-circle" data-dismiss="modal"><i class="fa fa-times"></i>x</button>
</div>
</div>
</div>
</div>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script type="text/javascript">
function Modal(){
Nuevo();
$('#modal').modal('show');
}
var accion;
var idP;
function Nuevo(){
accion = 'N';
document.frmClientes.cerdo.value = "";
document.frmClientes.chapeta.value = "";
document.frmClientes.raza.value = "";
document.frmClientes.genero.value = "";
document.frmClientes.modulo.value = "";
document.frmClientes.corral.value = "";
$('#modal').modal('show');
}
function Editar(id, cerdo, chapeta, raza, genero, modulo, corral ){
accion = 'E';
idP = id;
alert(cerdo,chapeta,raza,genero,modulo,corral);
document.frmClientes.cerdo.value = cerdo;
document.frmClientes.chapeta.value = chapeta;
document.frmClientes.raza.value = raza;
document.frmClientes.genero.value = genero;
document.frmClientes.modulo.value = modulo;
document.frmClientes.corral.value = corral;
$('#modal').modal('show');
}
</script>
</body>
</html>