added mottie tablesorter, removed datatables and datepicker, restyled tablesorter for better bootstrap look, layout changes

This commit is contained in:
alex
2018-01-24 17:29:12 +01:00
parent 8ec02c7aaa
commit fe8e5ed507
6 changed files with 244 additions and 312 deletions
@@ -7,12 +7,8 @@
'bootstrap' => true,
'fontawesome' => true,
'sbadmintemplate' => true,
'tablesorter' => false,
'customCSSs' => 'vendor/FHC-vendor/jquery-tablesorter/css/theme.default.css',
'customJSs' => array(
'vendor/FHC-vendor/jquery-tablesorter/js/jquery.tablesorter.js',
'vendor/FHC-vendor/jquery-tablesorter/js/jquery.tablesorter.widgets.js'
)
'tablesorter' => true,
'customCSSs' => 'skin/tablesort_bootstrap.css'
)
);
?>
@@ -48,7 +44,7 @@
$("select").addClass("form-control");
$("input[type=text]").addClass("form-control");
$("input[type=button]").addClass("btn btn-default");
$("#tableDataset").addClass('table table-bordered table-responsive table-condensed');
$("#tableDataset").addClass('table table-bordered table-striped table-responsive table-condensed');
</script>
</body>
@@ -1,5 +1,17 @@
<?php
$this->load->view('templates/FHC-Header', array('title' => 'InfocenterDetails', 'jquery3' => true, 'bootstrap' => true, 'fontawesome' => true, 'bootstrapdatepicker' => true, 'datatables' => true, 'sbadmintemplate' => true));
$this->load->view(
'templates/FHC-Header',
array(
'title' => 'InfocenterDetails',
'jquery3' => true,
'bootstrap' => true,
'fontawesome' => true,
'jqueryui' => true,
'tablesorter' => true,
'sbadmintemplate' => true,
'customCSSs' => 'skin/tablesort_bootstrap.css'
)
);
?>
<body>
<div id="wrapper">
@@ -27,7 +39,7 @@ $this->load->view('templates/FHC-Header', array('title' => 'InfocenterDetails',
<div class="panel-heading text-center"><h4>Stammdaten</h4></div>
<div class="panel-body">
<div class="row">
<div class="col-lg-6">
<div class="col-lg-6 table-responsive">
<table class="table">
<tr>
<td><strong>Vorname</strong></td>
@@ -69,7 +81,7 @@ $this->load->view('templates/FHC-Header', array('title' => 'InfocenterDetails',
</tr>
</table>
</div>
<div class="col-lg-6">
<div class="col-lg-6 table-responsive">
<table class="table table-bordered">
<thead>
<tr>
@@ -120,12 +132,12 @@ $this->load->view('templates/FHC-Header', array('title' => 'InfocenterDetails',
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div> <!-- ./row -->
</div> <!-- ./column -->
</div> <!-- ./panel-body -->
</div> <!-- ./panel -->
</div> <!-- ./main column -->
</div> <!-- ./main row -->
</section>
<section>
<div class="row">
@@ -134,45 +146,37 @@ $this->load->view('templates/FHC-Header', array('title' => 'InfocenterDetails',
<a name="DokPruef"></a><!-- anchor for jumping to the section -->
<div class="panel-heading text-center"><h4>Dokumentenpr&uuml;fung</h4></div>
<div class="panel-body">
<table id="doctable" class="table table-striped table-bordered table-condensed">
<thead>
<th>Name</th>
<th>Typ</th>
<th>Uploaddatum</th>
<th>Ausstellungsnation</th>
<th>Formal gepr&uuml;ft</th>
<!-- <th>nachzureichen</th>
<th>nachgereicht am</th>-->
</thead>
<tbody>
<?php
foreach ($dokumente as $dokument):
$geprueft = isset($dokument->formal_geprueft_amum) ? "checked" : "";
?>
<tr>
<td>
<a href="../outputAkteContent/<?php echo $dokument->akte_id ?>"><?php echo empty($dokument->titel) ? $dokument->bezeichnung : $dokument->titel ?></a>
</td>
<td><?php echo $dokument->dokument_bezeichnung ?></td>
<td><?php echo date_format(date_create($dokument->erstelltam), 'd.m.Y') ?></td>
<td><?php echo $dokument->langtext ?></td>
<td>
<input type="checkbox" class="form-check-input"
id="prchkbx<?php echo $dokument->akte_id ?>" <?php echo $geprueft ?> />
<?php echo isset($dokument->formal_geprueft_amum) ? date_format(date_create($dokument->formal_geprueft_amum), 'd.m.Y') : ''; ?>
</td>
<!-- <td class="text-center">
<?php /*echo $dokument->nachgereicht === true ? 'X' : ''; */
<div class="table-responsive">
<table id="doctable" class="table table-striped table-bordered">
<thead>
<th>Name</th>
<th>Typ</th>
<th>Uploaddatum</th>
<th>Ausstellungsnation</th>
<th>Formal gepr&uuml;ft</th>
</thead>
<tbody>
<?php
foreach ($dokumente as $dokument):
$geprueft = isset($dokument->formal_geprueft_amum) ? "checked" : "";
?>
</td>
<td>
<?php /*echo isset($dokument->nachgereicht_am) ? date_format(date_create($dokument->nachgereicht_am), 'd.m.Y') : ''; */
?>
</td>-->
</tr>
<?php endforeach ?>
</tbody>
</table>
<tr>
<td>
<a href="../outputAkteContent/<?php echo $dokument->akte_id ?>"><?php echo empty($dokument->titel) ? $dokument->bezeichnung : $dokument->titel ?></a>
</td>
<td><?php echo $dokument->dokument_bezeichnung ?></td>
<td><?php echo date_format(date_create($dokument->erstelltam), 'd.m.Y') ?></td>
<td><?php echo $dokument->langtext ?></td>
<td>
<input type="checkbox" class="form-check-input"
id="prchkbx<?php echo $dokument->akte_id ?>" <?php echo $geprueft ?> />
<?php echo isset($dokument->formal_geprueft_amum) ? date_format(date_create($dokument->formal_geprueft_amum), 'd.m.Y') : ''; ?>
</td>
</tr>
<?php endforeach ?>
</tbody>
</table>
</div>
<?php if (count($dokumente_nachgereicht) > 0): ?>
<br/>
<p>Nachzureichende Dokumente:</p>
@@ -195,7 +199,6 @@ $this->load->view('templates/FHC-Header', array('title' => 'InfocenterDetails',
<td>
<?php echo $dokument->langtext ?>
</td>
</td>
<td>
<?php echo $dokument->anmerkung; ?>
</td>
@@ -204,10 +207,10 @@ $this->load->view('templates/FHC-Header', array('title' => 'InfocenterDetails',
</tbody>
</table>
<?php endif; ?>
</div>
</div>
</div>
</div>
</div> <!-- ./panel-body -->
</div> <!-- ./panel -->
</div> <!-- ./column -->
</div> <!-- ./row -->
</section>
<section>
<div class="row">
@@ -224,11 +227,11 @@ $this->load->view('templates/FHC-Header', array('title' => 'InfocenterDetails',
$infoonly = $zgvpruefung->infoonly;
$firstcolumns = array(3, 2, 2, 2, 3);
//set bootstrap columns
if($infoonly)
if ($infoonly)
$columns = array(3, 2, 2, 5);
else
$columns = array(4, 3, 2, 3);
?>
?>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
@@ -252,7 +255,7 @@ $this->load->view('templates/FHC-Header', array('title' => 'InfocenterDetails',
<div class="form-group">
<label>Letzter Status: </label>
<?php
if(isset($zgvpruefung->prestudentstatus->status_kurzbz))
if (isset($zgvpruefung->prestudentstatus->status_kurzbz))
{
echo $zgvpruefung->prestudentstatus->status_kurzbz.(isset($zgvpruefung->prestudentstatus->bezeichnung_statusgrund[0]) && $zgvpruefung->prestudentstatus->status_kurzbz === 'Abgewiesener' ? ' ('.$zgvpruefung->prestudentstatus->bezeichnung_statusgrund[0].')' : '');
}
@@ -267,7 +270,8 @@ $this->load->view('templates/FHC-Header', array('title' => 'InfocenterDetails',
</div>
<div class="col-lg-<?php echo $firstcolumns[3] ?>">
<div class="form-group">
<label><span style="display: inline-block">Ausbildungs</span><span style="display: inline-block">semester: </span></label>
<label><span style="display: inline-block">Ausbildungs</span><span
style="display: inline-block">semester: </span></label>
<?php echo isset($zgvpruefung->prestudentstatus->ausbildungssemester) ? $zgvpruefung->prestudentstatus->ausbildungssemester : '' ?>
</div>
</div>
@@ -278,8 +282,8 @@ $this->load->view('templates/FHC-Header', array('title' => 'InfocenterDetails',
<?php
$separator = (isset($zgvpruefung->prestudentstatus->orgform)) ? ', ' : '';
echo (isset($zgvpruefung->prestudentstatus->orgform) ? $zgvpruefung->prestudentstatus->orgform : '')
.(isset($zgvpruefung->prestudentstatus->sprachedetails->bezeichnung) ? $separator.$zgvpruefung->prestudentstatus->sprachedetails->bezeichnung[0] : '')
.(isset($zgvpruefung->prestudentstatus->alternative) ? ' ('.$zgvpruefung->prestudentstatus->alternative.')' : '') ?>
.(isset($zgvpruefung->prestudentstatus->sprachedetails->bezeichnung) ? $separator.$zgvpruefung->prestudentstatus->sprachedetails->bezeichnung[0] : '')
.(isset($zgvpruefung->prestudentstatus->alternative) ? ' ('.$zgvpruefung->prestudentstatus->alternative.')' : '') ?>
</span>
</div>
</div>
@@ -592,6 +596,15 @@ $this->load->view('templates/FHC-Header', array('title' => 'InfocenterDetails',
<?php endforeach ?>
</tbody>
</table>
<div id="notizpager" class="pager">
<form class="form-inline">
<i class="fa fa-step-backward first" style="cursor:pointer"></i>
<i class="fa fa-backward prev"></i>
<span class="pagedisplay"></span>
<i class="fa fa-forward next"></i>
<i class="fa fa-step-forward last"></i>
</form>
</div>
</div>
<div class="col-lg-6">
<table id="logtable" class="table table-bordered table-hover">
@@ -611,105 +624,84 @@ $this->load->view('templates/FHC-Header', array('title' => 'InfocenterDetails',
<?php endforeach ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="logpager" class="pager">
<form class="form-inline">
<i class="fa fa-step-backward first"></i>
<i class="fa fa-backward prev"></i>
<span class="pagedisplay"></span>
<i class="fa fa-forward next"></i>
<i class="fa fa-step-forward last"></i>
</form>
</div>
</div> <!-- ./column -->
</div> <!-- ./row -->
</div> <!-- ./panel-body -->
</div> <!-- ./panel -->
</div> <!-- ./main column -->
</div> <!-- ./main row -->
</section>
</div>
</div>
</div>
<script>
$(document).ready(function ()
{
//language for datatables
/* var german =
{
"sEmptyTable": "Keine Daten in der Tabelle vorhanden",
"sInfo": "_START_ bis _END_ von _TOTAL_ Einträgen",
"sInfoEmpty": "0 bis 0 von 0 Einträgen",
"sInfoFiltered": "(gefiltert von _MAX_ Einträgen)",
"sInfoPostFix": "",
"sInfoThousands": ".",
"sLengthMenu": "_MENU_ Einträge anzeigen",
"sLoadingRecords": "Wird geladen...",
"sProcessing": "Bitte warten...",
"sSearch": "Suchen",
"sZeroRecords": "Keine Einträge vorhanden.",
"oPaginate": {
"sFirst": "Erste",
"sPrevious": "Zurück",
"sNext": "Nächste",
"sLast": "Letzte"
},
"oAria": {
"sSortAscending": ": aktivieren, um Spalte aufsteigend zu sortieren",
"sSortDescending": ": aktivieren, um Spalte absteigend zu sortieren"
},
select: {
rows: {
_: '%d Zeilen ausgewählt',
0: 'Zum Auswählen auf eine Zeile klicken',
1: '1 Zeile ausgewählt'
}
}
};*/
var german = "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json";
//hack for disabling table pagination if only one page
var drawCallback = function (settings)
//initialise table sorter
addTablesorter("doctable", [[2, 1], [1, 0]]);
addTablesorter("nachgdoctable", [[2, 0], [1, 1]]);
addTablesorter("logtable", [[0, 1]], ["filter"]);
addTablesorter("notiztable", [[0, 1]], ["filter"]);
//add pager
togglePager(23, "logtable", "logpager");
togglePager(10, "notiztable", "notizpager");
function addTablesorter(tableid, sortList, widgets)
{
var pagination = $(this).closest('.dataTables_wrapper').find('.dataTables_paginate');
pagination.toggle(this.api().page.info().pages > 1);
};
$("#"+tableid).tablesorter(
{
theme: "default",
dateFormat: "ddmmyyyy",
sortList: sortList,
widgets: widgets
}
);
}
//format for sorting dates in tables
$.fn.dataTable.moment("DD.MM.YYYY");
$.fn.dataTable.moment("DD.MM.YYYY HH:mm:ss");
//not show pager if on first table page
function togglePager(size, tableid, pagerid)
{
var rowcount = $("#"+tableid+" tr").length;
//initialise datatables and datepicker
$("#doctable").DataTable({
"language": {"url": german},
"responsive": true,
"paging": false,
"searching": false,
"info": false,
"order": [[2, "desc"], [1, "asc"]]
});
$("#nachgdoctable").DataTable({
"language": {"url": german},
"responsive": true,
"paging": false,
"searching": false,
"info": false,
"order": [[2, "asc"], [1, "desc"]]
});
$("#logtable").DataTable({
"language": {"url": german},
"responsive": false,
"lengthChange": false,
"info": false,
"pageLength": 25,
"order": [[0, "desc"]],
"drawCallback": drawCallback
});
$("#notiztable").DataTable({
"language": {"url": german},
"responsive": false,
"lengthChange": false,
"info": false,
"pageLength": 13,
"order": [[0, "desc"], [2, "asc"]],
"drawCallback": drawCallback
});
if (rowcount > size)
{
$("#"+tableid).tablesorterPager(
{
container: $("#"+pagerid),
size: size,
cssDisabled: 'disabled',
savePages: false
}
);
}
else
{
$("#"+pagerid).remove();
}
}
//initialise datepicker
$.datepicker.setDefaults($.datepicker.regional['de']);
$(".dateinput").datepicker({
"language": "de",
"format": "dd.mm.yyyy"
"dateFormat": "dd.mm.yy"
});
//javascript hack - not nice!
$("select").addClass('form-control');
$("table").addClass('table-condensed');
$("#logtable, #notiztable").addClass('table-hover');
//add click events to "formal geprüft" checkboxes
<?php foreach($dokumente as $dokument): ?>
@@ -726,4 +718,5 @@ $this->load->view('templates/FHC-Header', array('title' => 'InfocenterDetails',
);
</script>
</body>
<?php $this->load->view('templates/FHC-Footer'); ?>
+21 -24
View File
@@ -12,8 +12,6 @@ $jquery3 = isset($jquery3) ? $jquery3 : false;
$jqueryui = isset($jqueryui) ? $jqueryui : false;
$bootstrap = isset($bootstrap) ? $bootstrap : false;
$fontawesome = isset($fontawesome) ? $fontawesome : false;
$bootstrapdatepicker = isset($bootstrapdatepicker) ? $bootstrapdatepicker : false;
$datatables = isset($datatables) ? $datatables : false;
$tablesorter = isset($tablesorter) ? $tablesorter : false;
$sbadmintemplate = isset($sbadmintemplate) ? $sbadmintemplate : false;
@@ -96,14 +94,15 @@ function _generateJSsInclude($JSs)
if ($bootstrap === true) _generateCSSsInclude('vendor/components/bootstrap/css/bootstrap.min.css');
// font awesome CSS
if ($fontawesome === true) _generateCSSsInclude('vendor/components/font-awesome/css/font-awesome.min.css');
// bootstrap datepicker CSS
if ($bootstrapdatepicker === true) _generateCSSsInclude('vendor/eternicode/bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css');
// datatables CSS
if ($datatables === true) _generateCSSsInclude('vendor/datatables/datatables/media/css/dataTables.bootstrap.min.css');
// Table sorter CSS
if ($tablesorter === true) _generateCSSsInclude('skin/tablesort.css');
if ($tablesorter === true)
{
_generateCSSsInclude('vendor/mottie/tablesorter/css/theme.default.css');
_generateCSSsInclude('vendor/mottie/tablesorter/addons/pager/jquery.tablesorter.pager.css');
}
// sb admin template CSS
if ($sbadmintemplate === true){
if ($sbadmintemplate === true)
{
_generateCSSsInclude('vendor/BlackrockDigital/startbootstrap-sb-admin-2/vendor/metisMenu/metisMenu.min.css');
_generateCSSsInclude('vendor/BlackrockDigital/startbootstrap-sb-admin-2/dist/css/sb-admin-2.min.css');
}
@@ -117,26 +116,24 @@ function _generateJSsInclude($JSs)
// JQuery V3
if ($jquery3 === true) _generateJSsInclude('vendor/components/jquery/jquery.min.js');
// JQuery UI
if ($jqueryui === true) _generateJSsInclude('vendor/components/jqueryui/jquery-ui.min.js');
if ($jqueryui === true)
{
_generateJSsInclude('vendor/components/jqueryui/jquery-ui.min.js');
//datepicker german language file
_generateJSsInclude('vendor/components/jqueryui/ui/i18n/datepicker-de.js');
}
// bootstrap JS
if ($bootstrap === true) _generateJSsInclude('vendor/components/bootstrap/js/bootstrap.min.js');
// bootstrap datepicker JS
if ($bootstrapdatepicker === true){
_generateJSsInclude('vendor/eternicode/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js');
_generateJSsInclude('vendor/eternicode/bootstrap-datepicker/dist/locales/bootstrap-datepicker.de.min.js');
}
// datatables JS
if ($datatables === true)
{
_generateJSsInclude('vendor/datatables/datatables/media/js/jquery.dataTables.js');
_generateJSsInclude('vendor/datatables/datatables/media/js/dataTables.bootstrap.min.js');
_generateJSsInclude('vendor/moment/moment/min/moment.min.js');
_generateJSsInclude('vendor/datatables/plugins/sorting/datetime-moment.js');
}
// Table sorter JS
if ($tablesorter === true) _generateJSsInclude('vendor/christianbach/tablesorter/jquery.tablesorter.min.js');
if ($tablesorter === true)
{
_generateJSsInclude('vendor/mottie/tablesorter/js/jquery.tablesorter.js');
_generateJSsInclude('vendor/mottie/tablesorter/js/jquery.tablesorter.widgets.js');
_generateJSsInclude('vendor/mottie/tablesorter/addons/pager/jquery.tablesorter.pager.js');
}
// sb admin template JS
if ($sbadmintemplate === true){
if ($sbadmintemplate === true)
{
_generateJSsInclude('vendor/BlackrockDigital/startbootstrap-sb-admin-2/vendor/metisMenu/metisMenu.min.js');
_generateJSsInclude('vendor/BlackrockDigital/startbootstrap-sb-admin-2/dist/js/sb-admin-2.js');
}