confirms/app/Views/pages/manage/log/lists.php

<?= $this->extend('layouts/main') ?>

<?= $this->section('content') ?>
<style>
    th {
        font-size: 11px;
    }

    #logList tbody tr {
        cursor: pointer;
    }

    .blockUI {
        z-index: 1500 !important;
    }

    .ellipsis {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 180px;
    }
</style>

<h1>로그인이력 관리</h1>

<div class="col-md-12 col-xl-12">
    <div class="main-card mb-3 card">
        <div class="card-header d-flex align-items-center">
            <h3 class="card-title mb-0">로그인이력 목록</h3>
            <div class="ms-auto d-flex align-items-center gap-3">
                <button class="mb-2 me-2 border-0 btn-transition btn btn-shadow btn-outline-success"
                    id="excel-download">엑셀다운로드</button>
            </div>
        </div>
        <div class="card-body">
            <table id="logList" class="table table-hover table-striped table-bordered">
                <thead>
                    <tr>
                        <th>순번</th>
                        <th>아이디</th>
                        <th>사용자명</th>
                        <th>입력아이디</th>
                        <th>사유</th>
                        <th>아이피</th>
                        <th>사용자 에이전트</th>
                        <th>일시</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 여기는 비워둠: AJAX로 채움 -->
                </tbody>
            </table>
        </div>
    </div>
</div>


<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css" />
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script defer src="/architectui/assets/js/datatable.kor.js"></script>
<script type="text/javascript">

    // const tpl = document.querySelector('.my-loader-template')
    let date = new Date()

    $(function () {

        let table = $('#logList').DataTable({
            language: lang_kor,
            processing: true,
            serverSide: false,
            ajax: {
                url: '/manage/loginlog/getLogList',
                type: 'GET',
                beforeSend: function () {
                    blockUI.blockPage({
                        message: tpl
                    })
                },
                complete: function () {
                    blockUI.unblockPage()
                },
                data: function (d) {
                    d.start = d.start || 0
                    d.length = d.length || 10
                }
            },
            "columnDefs": [
                { 'targets': '_all', "defaultContent": "" },
                { 'className': 'text-center', 'targets': [0, 1, 2, 3, 4, 5, 7] },
                { targets: 6, className: "ellipsis" }
            ],
            columns: [
                {
                    "data": null,
                    "width": "50px",
                    "render": function (data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    }
                },
                { data: 'usr_id_in' },
                { data: 'usr_nm' },
                { data: 'usr_id_in' },
                { data: 'reason' },
                { data: 'ip' },
                { data: 'useragent' },
                { data: 'regdate' },
            ],
            // 옵션들 예시
            paging: true,
            searching: true,
            ordering: false,
            serverSide: true,
        });


        // 엑셀 다운로드 click
        $("#excel-download").on("click", function () {
            $.ajax({
                url: "/manage/loginlog/excel",
                method: "GET",
                dataType: "json",
                data: $("#frm_srch_info").serialize(),
                beforeSend: function () {
                    blockUI.blockPage({
                        message: tpl
                    })
                },
                complete: function () {
                    blockUI.unblockPage()
                },
                success: function (result) {
                    downloadExcel(result.data);
                }
            });
        });

    });

    // 엑셀 다운로드
    function downloadExcel(data) {
        const ws = XLSX.utils.json_to_sheet(data);
        ws['!cols'] = [
            { wpx: 80 },
            { wpx: 80 },
            { wpx: 100 },
            { wpx: 100 },
            { wpx: 120 },
            { wpx: 120 }
        ];

        const wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, "Sheet1");

        const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });

        const blob = new Blob([wbout], { type: 'application/octet-stream' });

        const link = document.createElement("a");
        link.href = URL.createObjectURL(blob);
        link.download = "로그인이력조회" + getDateTimeString() + ".xlsx";
        link.click();
        URL.revokeObjectURL(link.href);
    }


    function getDateTimeString() {
        const d = new Date();
        const yyyy = d.getFullYear();
        const mm = String(d.getMonth() + 1).padStart(2, '0');
        const dd = String(d.getDate()).padStart(2, '0');
        const hh = String(d.getHours()).padStart(2, '0');
        const mi = String(d.getMinutes()).padStart(2, '0');
        const ss = String(d.getSeconds()).padStart(2, '0');
        return `${yyyy}${mm}${dd}${hh}${mi}${ss}`;
    }



</script>
<?= $this->endSection() ?>