DataTable verbessert

This commit is contained in:
aschwarz
2023-09-19 14:27:53 +02:00
parent d86dcf1dfe
commit 515f168663
159 changed files with 49065 additions and 83 deletions

View File

@ -13,16 +13,13 @@
<!-- icons in nav-->
<!-- data Table: https://datatables.net/ -->
<script src="../bootstrap/data-table/jquery.min.js"></script>
<link rel="stylesheet" href="../bootstrap/data-table/dataTables.bootstrap5.min.css"></style>
<link rel="stylesheet" href="../bootstrap/data-table/rowReorder.dataTables.min.css"></style>
<script type="text/javascript" src="../bootstrap/data-table/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../bootstrap/data-table/dataTables.rowReorder.min.js"></script>
<script type="text/javascript" src="../bootstrap/data-table/dataTables.bootstrap5.min.js"></script>
<link rel="stylesheet" href="../bootstrap/data-table/jumistyle.css"></style>
<script src="../jquery/jquery-3.4.1.min.js"></script>
<link href="../bootstrap/data-table/datatables.min.css" rel="stylesheet"/>
<script src="../bootstrap/data-table/datatables.min.js"></script>
<script type="text/javascript" src="../bootstrap/data-table/moment.mon.js"></script>
<script type="text/javascript" src="../bootstrap/data-table/datetime-moment.js"></script>
<script src="js/all.js" crossorigin="anonymous"></script>
<script src="../jquery/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="../bootstrap/node_modules/bootstrap-icons/font/bootstrap-icons.css">
</head>
@ -56,7 +53,7 @@
<!-- https://datatables.net/download/release -->
<table id="myTable" class="table table-striped table-bordered table-hover" >
<table id="tblDataTable" class="table table-striped table-hover table-bordered dataTable no-footer" cellpadding="0" border="0" role="grid" aria-describedby="tblDataTable_info">
<thead>
<tr>
<th>Vorname</th>
@ -96,18 +93,23 @@
</div>
</div>
</body>
<script>
$(document).ready(function(){
var table = new DataTable('#myTable', {
rowReorder: true,
pageLength: 10,
language: {
url: '//cdn.datatables.net/plug-ins/1.13.4/i18n/de-DE.json',
search: "",
lengthMenu: "_MENU_ Zeilen",
},
});
});
</script>
<script>
// Hinweise zur Sortierung nach Datum. <table Definition muss so <20>bernommen werden. Keine Leerzeichen <td>datum</td>. Datumsfelder d<>rfen nicht leer sein und vom Format stimmig sein
$(document).ready(function () {
$('#tblDataTable').DataTable({
responsive: true,
fixedHeader: true,
pageLength: 10,
order: [[1, 'asc']],
language: {
url: '//cdn.datatables.net/plug-ins/1.13.4/i18n/de-DE.json',
search: "",
lengthMenu: "_MENU_ Zeilen",
},
});
});
</script>
</html>
{/if}
{/if}

View File

@ -13,16 +13,13 @@
<!-- icons in nav-->
<!-- data Table: https://datatables.net/ -->
<script src="../bootstrap/data-table/jquery.min.js"></script>
<link rel="stylesheet" href="../bootstrap/data-table/dataTables.bootstrap5.min.css"></style>
<link rel="stylesheet" href="../bootstrap/data-table/rowReorder.dataTables.min.css"></style>
<script type="text/javascript" src="../bootstrap/data-table/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../bootstrap/data-table/dataTables.rowReorder.min.js"></script>
<script type="text/javascript" src="../bootstrap/data-table/dataTables.bootstrap5.min.js"></script>
<link rel="stylesheet" href="../bootstrap/data-table/jumistyle.css"></style>
<script src="../jquery/jquery-3.4.1.min.js"></script>
<link href="../bootstrap/data-table/datatables.min.css" rel="stylesheet"/>
<script src="../bootstrap/data-table/datatables.min.js"></script>
<script type="text/javascript" src="../bootstrap/data-table/moment.mon.js"></script>
<script type="text/javascript" src="../bootstrap/data-table/datetime-moment.js"></script>
<script src="js/all.js" crossorigin="anonymous"></script>
<script src="../jquery/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="../bootstrap/node_modules/bootstrap-icons/font/bootstrap-icons.css">
</head>
@ -56,7 +53,7 @@
<!-- https://datatables.net/download/release -->
<table id="myTable" class="table table-striped table-bordered table-hover" >
<table id="tblDataTable" class="table table-striped table-hover table-bordered dataTable no-footer" cellpadding="0" border="0" role="grid" aria-describedby="tblDataTable_info">
<thead>
<tr>
<th>Vorname</th>
@ -119,18 +116,22 @@
</div>
</div>
</body>
<script>
$(document).ready(function(){
var table = new DataTable('#myTable', {
rowReorder: true,
pageLength: 10,
language: {
url: '//cdn.datatables.net/plug-ins/1.13.4/i18n/de-DE.json',
search: "",
lengthMenu: "_MENU_ Zeilen",
},
});
});
</script>
<script>
// Hinweise zur Sortierung nach Datum. <table Definition muss so übernommen werden. Keine Leerzeichen <td>datum</td>. Datumsfelder dürfen nicht leer sein und vom Format stimmig sein
$(document).ready(function () {
$('#tblDataTable').DataTable({
responsive: true,
fixedHeader: true,
pageLength: 10,
order: [[1, 'asc']],
language: {
url: '//cdn.datatables.net/plug-ins/1.13.4/i18n/de-DE.json',
search: "",
lengthMenu: "_MENU_ Zeilen",
},
});
});
</script>
</html>
{/if}

View File

@ -13,16 +13,13 @@
<!-- icons in nav-->
<!-- data Table: https://datatables.net/ -->
<script src="../bootstrap/data-table/jquery.min.js"></script>
<link rel="stylesheet" href="../bootstrap/data-table/dataTables.bootstrap5.min.css"></style>
<link rel="stylesheet" href="../bootstrap/data-table/rowReorder.dataTables.min.css"></style>
<script type="text/javascript" src="../bootstrap/data-table/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../bootstrap/data-table/dataTables.rowReorder.min.js"></script>
<script type="text/javascript" src="../bootstrap/data-table/dataTables.bootstrap5.min.js"></script>
<link rel="stylesheet" href="../bootstrap/data-table/jumistyle.css"></style>
<script src="../jquery/jquery-3.4.1.min.js"></script>
<link href="../bootstrap/data-table/datatables.min.css" rel="stylesheet"/>
<script src="../bootstrap/data-table/datatables.min.js"></script>
<script type="text/javascript" src="../bootstrap/data-table/moment.mon.js"></script>
<script type="text/javascript" src="../bootstrap/data-table/datetime-moment.js"></script>
<script src="js/all.js" crossorigin="anonymous"></script>
<script src="../jquery/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="../bootstrap/node_modules/bootstrap-icons/font/bootstrap-icons.css">
</head>
@ -56,7 +53,7 @@
<!-- https://datatables.net/download/release -->
<table id="myTable" class="table table-striped table-bordered table-hover" >
<table id="tblDataTable" class="table table-striped table-hover table-bordered dataTable no-footer" cellpadding="0" border="0" role="grid" aria-describedby="tblDataTable_info">
<thead>
<tr>
<th>Vorname</th>
@ -92,19 +89,23 @@
</div>
</div>
</body>
<script>
$(document).ready(function(){
var table = new DataTable('#myTable', {
rowReorder: true,
pageLength: 10,
language: {
url: '//cdn.datatables.net/plug-ins/1.13.4/i18n/de-DE.json',
search: "",
lengthMenu: "_MENU_ Zeilen",
},
});
});
</script>
<script>
// Hinweise zur Sortierung nach Datum. <table Definition muss so <20>bernommen werden. Keine Leerzeichen <td>datum</td>. Datumsfelder d<>rfen nicht leer sein und vom Format stimmig sein
$(document).ready(function () {
$('#tblDataTable').DataTable({
responsive: true,
fixedHeader: true,
pageLength: 10,
order: [[1, 'asc']],
language: {
url: '//cdn.datatables.net/plug-ins/1.13.4/i18n/de-DE.json',
search: "",
lengthMenu: "_MENU_ Zeilen",
},
});
});
</script>
</html>
{/if}

View File

@ -2,7 +2,7 @@
<!DOCTYPE html>
<html lang="de">
<head>
<title>JU & MI Einwilligungen</title>
<title>JU & MI Einwilligungen</title>
<link rel="stylesheet" href="../jquery/jquery-ui.css">
<link rel="stylesheet" href="../jquery/jquery.timepicker.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
@ -11,19 +11,15 @@
<!-- nochmals bootstrap.css mit Erweiterungen vom Dashboard -->
<link href="css/styles.css" rel="stylesheet" />
<!-- icons in nav-->
<!-- data Table: https://datatables.net/ -->
<script src="../bootstrap/data-table/jquery.min.js"></script>
<link rel="stylesheet" href="../bootstrap/data-table/dataTables.bootstrap5.min.css">
</style>
<link rel="stylesheet" href="../bootstrap/data-table/rowReorder.dataTables.min.css">
</style>
<script type="text/javascript" src="../bootstrap/data-table/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../bootstrap/data-table/dataTables.rowReorder.min.js"></script>
<script type="text/javascript" src="../bootstrap/data-table/dataTables.bootstrap5.min.js"></script>
<link rel="stylesheet" href="../bootstrap/data-table/jumistyle.css">
</style>
<script src="js/all.js" crossorigin="anonymous"></script>
<script src="../jquery/jquery-3.4.1.min.js"></script>
<link href="../bootstrap/data-table/datatables.min.css" rel="stylesheet"/>
<script src="../bootstrap/data-table/datatables.min.js"></script>
<script type="text/javascript" src="../bootstrap/data-table/moment.mon.js"></script>
<script type="text/javascript" src="../bootstrap/data-table/datetime-moment.js"></script>
<script src="js/all.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="../bootstrap/node_modules/bootstrap-icons/font/bootstrap-icons.css">
</head>
<body class="sb-nav-fixed">
@ -56,7 +52,7 @@
</div>
<div class="card-body">
<!-- https://datatables.net/download/release -->
<table id="myTable" class="table table-striped table-bordered table-hover" >
<table id="tblDataTable" class="table table-striped table-hover table-bordered dataTable no-footer" cellpadding="0" border="0" role="grid" aria-describedby="tblDataTable_info">
<thead>
<tr>
<th>Vorname</th>
@ -107,10 +103,14 @@
</div>
</body>
<script>
$(document).ready(function(){
var table = new DataTable('#myTable', {
rowReorder: true,
// Hinweise zur Sortierung nach Datum. <table Definition muss so übernommen werden. Keine Leerzeichen <td>datum</td>. Datumsfelder dürfen nicht leer sein und vom Format stimmig sein
$(document).ready(function () {
$('#tblDataTable').DataTable({
responsive: true,
fixedHeader: true,
pageLength: 10,
order: [[1, 'asc']],
language: {
url: '//cdn.datatables.net/plug-ins/1.13.4/i18n/de-DE.json',
search: "",