在这方面我需要一些帮助，我有一个表，该表可以从数据库中获取数据。这会带来一个ID，日期，名称，描述，数量，价格和总计。我使用数据表来提高表的性能，但是我需要添加最后一列并将其显示在该表的页脚中，但我做不到，我已经阅读并查看了数据表，但未成功，在这里我留下我的代码：
plantilla.php：
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import Stamen from 'ol/source/Stamen';
import VectorLayer from 'ol/layer/Vector';
import Vector from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON';
import Style from 'ol/style/Style';
import Circle from 'ol/style/Circle';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';
import Overlay from 'ol/Overlay';
import {fromLonLat, toLonLat} from 'ol/proj';
import sync from 'ol-hashed';
import OSM from 'ol/source/OSM';
import Feature from 'ol/Feature';
import {circular} from 'ol/geom/Polygon';
import Point from 'ol/geom/Point';
import Control from 'ol/control/Control';
import * as olProj from 'ol/proj';
import XYZ from 'ol/source/XYZ';
// define the map
const map = new Map({
target: 'map',
view: new View({
center: fromLonLat([16.37, 48.2]),
zoom: 13
})
});
sync(map);
//Adresssuche
const searchResultSource = new Vector();
const searchResultLayer = new VectorLayer({
source: searchResultSource
});
searchResultLayer.setStyle(new Style({
image: new Circle({
fill: new Fill({
color: 'rgba(255,255,255,0.4)'
}),
stroke: new Stroke({
color: '#3399CC',
width: 1.25
}),
radius: 15
})
}));
var element = document.getElementById('search');
element.addEventListener('keydown', listenerFunction);
function listenerFunction(event) {
console.log(event);
console.log(event.keyCode);
if (event.keyCode === 13) {
const xhr = new XMLHttpRequest;
xhr.open('GET', 'https://photon.komoot.de/api/?q=' + element.value + '&limit=3');
xhr.onload = function() {
const json = JSON.parse(xhr.responseText);
const geoJsonReader = new GeoJSON({
featureProjection: 'EPSG:3857'
});
searchResultSource.clear();
const features = geoJsonReader.readFeatures(json);
console.log(features);
searchResultSource.addFeatures(features);
};
xhr.send();
}
}
var ZoomLayer = new ol.ZoomLayer({
layer: searchResultLayer,
colName: 'SearchLayer',
zoom: 10,
collapsed: true,
map: Map
zoomTo: layer(5,xy)
});
//OpenStreetMap
const OSMbaseLayer = new TileLayer({
type: 'base',
source: new OSM()
});
// Statellit
const satellitLayer = new TileLayer({
source: new XYZ ({
attributions: ['Powered by Esri', 'Source: Esri, DigitalGlobe, GeoEye, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AeroGRID, IGN, and the GIS User Community'],
attributionsCollapsible: false,
url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
maxZoom: 30
})
});
//shape
const parkLayer = new VectorLayer({
source: new Vector({
url: 'data/park1.geojson',
format: new GeoJSON()
})
});
// Layer hinzufügen
map.addLayer(OSMbaseLayer);
map.addLayer(searchResultLayer);
map.addLayer(parkLayer);
const OSMbase = document.getElementById('OSMbase');
OSMbase.addEventListener('click', function(event) {
//contr.style.color = 'ffffff';
//Andere Layer entfernen
map.removeLayer(satellitLayer);
map.removeLayer(searchResultLayer);
//OSM Layer hinzufügen
map.addLayer(OSMbaseLayer);
map.addLayer(searchResultLayer);
});
// Get the satellit Base-Button
const satellit = document.getElementById('satellit');
satellit.addEventListener('click', function(event) {
//Andere Layer entfernen
map.removeLayer(OSMbaseLayer);
map.removeLayer(searchResultLayer);
//Satelliten Layer hinzufügen
map.addLayer(satellitLayer);
map.addLayer(searchResultLayer);
});
facturas.php
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Administración</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
<link href="w3.css" rel="stylesheet"/>
<link rel="stylesheet" href="Vistas/bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="Vistas/bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="Vistas/bower_components/Ionicons/css/ionicons.min.css">
<link rel="stylesheet" href="Vistas/dist/css/AdminLTE.min.css">
<link rel="stylesheet" href="Vistas/dist/css/skins/_all-skins.min.css">
<link rel="stylesheet" href="Vistas/bower_components/morris.js/morris.css">
<link rel="stylesheet" href="Vistas/bower_components/jvectormap/jquery-jvectormap.css">
<link rel="stylesheet" href="Vistas/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
<link rel="stylesheet" href="Vistas/bower_components/bootstrap-daterangepicker/daterangepicker.css">
<link rel="stylesheet" href="Vistas/css/estilos.css">
<link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/mdb.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="Vistas/https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="Vistas/https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Google Font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<body class="hold-transition skin-blue sidebar-mini login-page">
<?php
if(isset($_SESSION["Ingreso"]) && $_SESSION["Ingreso"] == true){
echo '<div class="wrapper">';
include "modulos/cabecera.php";
include "modulos/menu.php";
if(isset($_GET["url"])){
if($_GET["url"] == "inicio" || $_GET["url"] == "ingreso" || $_GET["url"] == "usuarios" || $_GET["url"] == "salir"
|| $_GET["url"] == "perfil" || $_GET["url"] == "slide" || $_GET["url"] == "nosotros" || $_GET["url"] == "servicios"
|| $_GET["url"] == "productos" || $_GET["url"] == "galeria" || $_GET["url"] == "facturas" || $_GET["url"] == "facturacion"
|| $_GET["url"] == "gastos" || $_GET["url"] == "mensajes" || $_GET["url"] == "suscriptores" || $_GET["url"] == "inicio"
|| $_GET["url"] == "dinero"
){
include "modulos/".$_GET["url"].".php";
}
}else{
include "modulos/inicio.php";
}
echo '</div>';
}else{
include "modulos/ingreso.php";
}
?>
<script src="Vistas/bower_components/jquery/dist/jquery.min.js"></script>
<script src="Vistas/bower_components/jquery-ui/jquery-ui.min.js"></script>
<script>$.widget.bridge('uibutton', $.ui.button);</script>
<script src="Vistas/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="Vistas/bower_components/raphael/raphael.min.js"></script>
<script src="Vistas/bower_components/morris.js/morris.min.js"></script>
<script src="Vistas/bower_components/jquery-sparkline/dist/jquery.sparkline.min.js"></script>
<script src="Vistas/bower_components/jquery-knob/dist/jquery.knob.min.js"></script>
<script src="Vistas/bower_components/moment/min/moment.min.js"></script>
<script src="Vistas/bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="Vistas/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<script src="Vistas/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="Vistas/bower_components/fastclick/lib/fastclick.js"></script>
<script src="Vistas/dist/js/adminlte.min.js"></script>
<script src="Vistas/dist/js/pages/dashboard.js"></script>
<script src="Vistas/dist/js/demo.js"></script>
<link rel="stylesheet" href="Vistas/css/estilos.css">
<script src="Vistas/js/usuarios.js"></script>
<script src="Vistas/js/slide.js"></script>
<script src="Vistas/js/servicios.js"></script>
<script src="Vistas/js/productos.js"></script>
<script src="Vistas/js/galeria.js"></script>
<script src="Vistas/js/facturas.js"></script>
<script src="Vistas/js/gastos.js"></script>
<script src="Vistas/js/mensajes.js"></script>
<script src="Vistas/js/suscriptores.js"></script>
<script src="Vistas/js/dinero.js"></script>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/mdb.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/dataTables.foundation.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/autofill/2.3.4/css/autoFill.foundation.min.css"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/autofill/2.3.4/js/dataTables.autoFill.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/autofill/2.3.4/js/autoFill.foundation.min.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/plug-ins/1.10.20/api/sum().js"></script>
<script>//DATATABLE
$(document).ready( function () {
$('#table_id').DataTable();
} );
</script>
<script>
function imprim1(imp1){
var printContents = document.getElementById('imp1').innerHTML;
w = window.open();
w.document.write(printContents);
w.document.close();
w.focus();
w.print();
w.close();
return true;}
</script>
</body>
</html>
facturasC.php：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="Vistas/css/estilos.css">
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1 style="font-family: Quicksand; font-size: 20px;">
Facturas
<small style="font-family: Quicksand; font-size: 14px;">Lista de facturas</small>
</h1>
</section>
<!-- Main content -->
<section class="content">
<!-- CREAR Productos -->
<div class="box">
<div class="box-header with-border">
<button class="btn btn-bootstra" data-toggle="modal"data-target="#CrearFacturas">Crear Factura</button>
</div>
<div class="box-body">
<table class="table table-striped TB display table-sm" id="table_id">
<thead>
<tr class="bg-primary">
<th style="font-family: Quicksand; font-size: 14px;"><strong>N</strong></th>
<th style="font-family: Quicksand; font-size: 14px;"><strong>Fecha</strong></th>
<th style="font-family: Quicksand; font-size: 14px;"><strong>Nombre</strong></th>
<th style="font-family: Quicksand; font-size: 14px;"><strong>Descripcion</strong></th>
<th style="font-family: Quicksand; font-size: 14px;"><strong>Cantidad</strong></th>
<th style="font-family: Quicksand; font-size: 14px;"><strong>Precio</strong></th>
<th style="font-family: Quicksand; font-size: 14px;"><strong>Total</strong></th>
<th style="font-family: Quicksand; font-size: 9px;">Editar - Imprimir - Eliminar</th>
</tr>
</thead>
<tfoot>
//HERE NEED SHOW TOTAL***********************************
</tfoot>
<tbody>
<?php
$verF = new FacturasC();
$verF -> VerFacturasC();
$item = null;
$valor = null;
$editarF = FacturasC::EFacturasC($item, $valor);
?>
</tbody>
</table>
</div>
</div>
</section>
</div>
<!-- /.CREAR PRODUCTOS -->
<div class="modal face" role="dialog" id="CrearFacturas">
<div class="modal-dialog">
<div class="modal-content">
<form method="post" role="form" enctype="multipart/form-data">
<div class="modal-body">
<div class="box-body">
<div class="form-group">
<h2 style="font-family: Quicksand; font-size: 14px;">Fecha</h2>
<input type="text" class="form-control input-lg" name="fechaN" required>
</div>
<div class="form-group">
<h2 style="font-family: Quicksand; font-size: 14px;">Nombre</h2>
<input type="text" class="form-control input-lg" name="nombreN" required>
</div>
<div class="form-group">
<h2 style="font-family: Quicksand; font-size: 14px;">Descripcion</h2>
<input type="text" class="form-control input-lg" name="descripcionN" required>
</div>
<div class="form-group">
<h2 style="font-family: Quicksand; font-size: 14px;">Cantidad</h2>
<input type="text" class="form-control input-lg" name="cantidadN" required>
</div>
<div class="form-group">
<h2 style="font-family: Quicksand; font-size: 14px;">Precio</h2>
<input type="text" class="form-control input-lg" name="precioN" required>
</div>
<div class="form-group">
<input type="hidden" class="form-control input-lg" name="totalN">
</div>
<div class="form-group">
<input type="hidden" class="form-control input-lg" name="saldoN">
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Agregar</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
</div>
<?php
$crearF = new FacturasC();
$crearF -> CrearFacturasC();
?>
</form>
</div>
</div>
</div>
<?php
$borrarF = new FacturasC();
$borrarF -> BorrarFacturasC();
?>
<div class="modal face" role="dialog" id="EditarF">
<div class="modal-dialog">
<div class="modal-content">
<form method="post" role="form">
<div class="modal-body">
<div class="box-body">
<div class="form-group">
<h2>Fecha</h2>
<input type="text" id="fechaE" class="form-control input-lg" name="fechaE" required>
</div>
<div class="form-group">
<h2>Nombre</h2>
<input type="text" id="nombreE" class="form-control input-lg" name="nombreE" required>
<input type="hidden" id="Fid" name="Fid">
</div>
<div class="form-group">
<h2>Descripcion</h2>
<input type="text" id="descripcionE" class="form-control input-lg" name="descripcionE" required>
</div>
<div class="form-group">
<h2>Cantidad</h2>
<input type="text" id="cantidadE" class="form-control input-lg" name="cantidadE" required>
</div>
<div class="form-group">
<h2>Precio</h2>
<input type="text" id="precioE" class="form-control input-lg" name="precioE" required>
</div>
<div class="form-group">
<input type="hidden" id="totalE" class="form-control input-lg" name="totalE">
</div>
<div class="form-group">
<input type="hidden" id="totalE" class="form-control input-lg" name="saldoE">
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success">Guardar Cambios</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Salir</button>
</div>
<?php
$actualizarF = new FacturasC();
$actualizarF -> ActualizarFacturasC();
?>
</form>
</div>
</div>
</div>
<div class="modal fade" id="ImprimirF" role="dialog" >
<div class="modal-dialog" role="document">
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Imprimir Factura</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<form action="facturacion"method="post" role="form">
<h4>Fecha de emision</h4>
<input type="text" class="" id="fechaI" name="fechaI" required>
<hr>
<h4>Nombre cliente</h4>
<input type="text" class="" id="nombreI" name="nombreI" required>
<hr>
<table class="table table-hover" id="table_id">
<thead>
<tr>
<th>Detalle</th>
<th>Cantidad</th>
<th>Precio</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="" id="descripcionI" name="descripcionI" required>
</td>
<td>
<input type="text" class="" id="cantidadI" name="cantidadI" required>
</td>
<td>
<input type="text" class="" id="precioI" name="precioI" required>
</td>
</tr>
<tr class="total">
<th scope="row">Total</th>
<td>
<input type="text" class="" id="totalI" name="totalI" required>
</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<?php
$imprimirF = new FacturasC();
$imprimirF -> ActualizarFacturasC();
?>
<button type="button" class="btn btn-outline-primary" data-dismiss="modal">Cerrar</button>
<input type="submit" value="Imprimir">
</form>
</div>
<!--Footer-->
<div class="modal-footer">
</div>
</div>
</div>
</div>
facturasM.php：
<?php
class FacturasC{
//VER PRODUCTOS
public function VerFacturasC(){
$tablaBD = "facturas";
$respuesta = FacturasM::VerFacturasM($tablaBD);
foreach ($respuesta as $key => $value) {
echo'<tr>
<td style="font-family: Quicksand; font-size: 16px;">'.($key+1).'</td>
<td style="font-family: Quicksand; font-size: 12px;">'.$value["fecha"].'</td>
<td style="font-family: Quicksand; font-size: 16px;">'.$value["nombre"].'</td>
<td style="font-family: Quicksand; font-size: 16px;">'.$value["descripcion"].'</td>
<td style="font-family: Quicksand; font-size: 16px;"><span>$ </span>'.$value["cantidad"].'</td>
<td style="font-family: Quicksand; font-size: 16px;"><span>$ </span>'.$value["precio"].'</td>
<td style="font-family: Quicksand; font-size: 16px;"><span>$ </span>'.$value["total"].'</td>
<td>
<div class="btn-group">
<button class="btn btn-success EditarF" Fid="'.$value["id"].'"><i class="fa fa-edit" data-toggle="modal" data-target="#EditarF"></i></button>
<button class="btn btn-success ImprimirF" Fid="'.$value["id"].'" data-toggle="modal" data-target="#ImprimirF"><i class="fa fa-print"></i></button>
<button class="btn btn-danger BorrarF" Fid="'.$value["id"].'"><i class="fa fa-times"></i></button>
</div>
</td>
</tr>';
}
}
//CREAR PRODUCTOS
public function CrearFacturasC(){
if(isset($_POST["nombreN"])){
$tablaBD = "facturas";
$num1=$_POST['precioN'];
$num2=$_POST['cantidadN'];
$totall=($num1*$num2);
setlocale(LC_MONETARY, 'en_US');
$datosC = array("fecha"=>$_POST["fechaN"],"nombre"=>$_POST["nombreN"],"descripcion"=>$_POST["descripcionN"],"cantidad"=>$_POST["cantidadN"],"precio"=>$_POST["precioN"],"total"=>$totall);
$respuesta = FacturasM::CrearFacturasM($tablaBD,$datosC);
if($respuesta == true){
echo '<script>
window.location = "facturas";
</script>';
}else{
echo 'ERROR AL CREAR USUARIO';
}
}
}
//Borrar Productos
public function BorrarFacturasC(){
if(isset($_GET["Fid"])){
$tablaBD = "facturas";
$datosC = $_GET["Fid"];
$respuesta = FacturasM::BorrarFacturasM($tablaBD, $datosC);
if($respuesta == true){
echo '<script>
window.location = "facturas";
</script>';
}else{
echo 'ERROR AL BORRAR PRODUCTO';
}
}
}
//Llamar datos para editarlos
static public function EFacturasC($item, $valor){
$tablaBD = "facturas";
$respuesta = FacturasM::EFacturasM($tablaBD, $item, $valor);
return $respuesta;
}
public function ActualizarFacturasC(){
if(isset($_POST["Fid"])){
$tablaBD = "facturas";
$num1=$_POST['precioE'];
$num2=$_POST['cantidadE'];
$totall=($num1*$num2);
$datosC = array("id"=>$_POST["Fid"], "fecha"=>$_POST["fechaE"],"nombre"=>$_POST["nombreE"],"descripcion"=>$_POST["descripcionE"],"cantidad"=>$_POST["cantidadE"],"precio"=>$_POST["precioE"],"total"=>$totall);
$respuesta = FacturasM::ActualizarFacturasM($tablaBD, $datosC);
if($respuesta == true){
echo '<script>
window.location = "facturas";
</script>';
}else{
echo 'ERROR AL EDITAR PRODUCTO';
}
}
}
}