thetool/Layout/default/Device/Index.php

<?php
$pagination_baseurl = $this->getUrl($Mod, "Index");
$pagination_baseurl_params = ["filter" => $filter];
$pagination_entity_name = "Device";
?>
<?php include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/header.php"); ?>

    <style>
        #filterrow input {
            width: 100%;
            padding: 3px;
            box-sizing: border-box;
            display: table-header-group;
            height: unset;
        }

        .dataTables_wrapper .dataTables_filter {
            float: left;
            text-align: left;
        }

        .dataTables_wrapper .dataTables_length {
            float: right;
        }

        .clear-fa {
            margin-left: 5px;
            font-size: 23px;
            vertical-align: middle;
            color: #cb2929;
            cursor: pointer;
        }

        .margina {
            margin-left: 30px !important;
            margin-top: -5px;
        }
    </style>
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="<?= self::getUrl("Dashboard") ?>"><?= MFAPPNAME_SLUG ?></a>
                        </li>
                        <li class="breadcrumb-item active">Devices</li>
                    </ol>
                </div>
                <h4 class="page-title">Devices</h4>
            </div>
        </div>
    </div>
    <!-- end page title -->


    <div class="card">
        <div class="card-body mb-3">
            <div class="row">
                <div class="col-12">
                    <div class="float-left">
                        <h4 class="header-title">Liste aller Devices</h4>
                    </div>
                    <div class="float-right">
                        <a class="btn btn-primary mb-2" href="<?= self::getUrl("Device", "add") ?>"><i
                                    class="fas fa-plus"></i> Neues Device anlegen</a>
                    </div>
                </div>
            </div>

            <!--            --><?php //include(realpath(dirname(__FILE__) . "/../") . "/tpl/pagination.php"); ?>
            <!--            --><?php //include(realpath(dirname(__FILE__) . "/../") . "/tpl/pagination-summary.php"); ?>

            <table id="datatable" class="table table-striped table-hover">
                <thead>
                <tr>
                    <th>Geräte Name</th>
                    <th class="text-center">Geräte Typ</th>
                    <th class="text-center">Hersteller</th>
                    <th class="text-center">Pop</th>
                    <th class="text-center">IP-Adresse</th>
                    <th class="text-center">Mac-Adresse</th>
                    <th class="text-center">Seriennummer</th>
                    <th class="text-center">Preis</th>
                    <th class="text-center">max. Leistung</th>
                    <th class="w15"></th>
                </tr>
                <tr id="filterrow">
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                <?php

                foreach ($devices as $device):
                    if (!empty($device->price)) {
                        $price = $device->price;
                    } else {
                        $price = $device->devicetype->price;
                    }
                    ?>

                    <tr>
                        <td>
                            <a href="<?= self::getUrl("Device", "detail", ["id" => $device->id]) ?>"><?= $device->name ?></a>
                        </td>
                        <td class="text-center"><?= $device->devicetype->name ?></td>
                        <td class="text-center"><?= $device->devicetype->devicemanufactor->name ?></td>
                        <td class="text-center"><?= $device->pop->name ?></td>


                        <td class="text-center"><?= $device->ip ?></td>
                        <td class="text-center"><?= $device->mac ?></td>
                        <td class="text-center"><?= $device->serial ?></td>
                        <td class="text-right"><?= $price ?> €</td>
                        <td class="text-right"><?= $device->devicetype->power ?> Watt</td>


                        <td style="text-align: left; letter-spacing: 4px; font-size: 1.1em; width: 80px">
                            <a href="<?= self::getUrl("Device", "edit", ["id" => $device->id]) ?>"><i
                                        class="far fa-edit" title="Bearbeiten"></i></a>
                            <a href="<?= self::getUrl("Device", "delete", ["id" => $device->id]) ?>"
                               onclick="if(!confirm('Device wirklich löschen?')) return false;" class="text-danger"
                               title="Löschen"><i class="fas fa-trash "></i></a>

                        </td>

                    </tr>

                <?php endforeach; ?>
                </tbody>
            </table>

            <!--            --><?php //include(realpath(dirname(__FILE__) . "/../") . "/tpl/pagination-summary.php"); ?>
            <!--            --><?php //include(realpath(dirname(__FILE__) . "/../") . "/tpl/pagination.php"); ?>
            <!---->

        </div>
    </div>

    </div>
    </div>


    <script type="text/javascript">
        let table;
        $('#filterrow th').each(function (i) {
            let title = $('#datatable thead th').eq($(this).index()).text();

            if ($(this).index() == "9") {

            } else {
                $(this).html('<input type="text" placeholder="' + title + '" class="form-control" data-index="' + i + '" value="" />');
            }
        });

        table = $('#datatable').DataTable({
            buttons: [
                {
                    extend: 'excelHtml5',
                    text: 'XLSX Export',
                    className: 'btn-success margina'

                }
            ],
            orderCellsTop: true,
            stateSave: true,
            "initComplete": function () {
                $('#datatable_filter').append('<i id="clear_cookie" class="fas fa-times clear-fa" title="Filter löschen" aria-hidden="true" ></i>');
                $('#clear_cookie').click(function () {
                    $('input').val('');

                    table.search('').columns().search('').draw();
                });
            },
            "dom": 'flBrtip'

        });

        $('#filterrow').on('keyup', 'input', function () {

            table
                .column($(this).data('index'))
                .search(this.value)
                .draw();


        });
        var state = table.state.loaded();
        if (state) {
            table.columns().eq(0).each(function (colIdx) {
                var colSearch = state.columns[colIdx].search;

                if (colSearch.search) {


                    $('#filterrow').find("[data-index='" + colIdx + "']").val(colSearch.search);


                }
            });

            table.draw();
        }
        $(document).ready(function () {

        });
    </script>


<?php include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/footer.php"); ?>