arm-api/resources/views/admin/DataManagement/SignupManagement.blade.php

@extends('admin.master')

@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="contentpanel">
                <!--<form id="listForm" method="post">-->
                <form id='searchForm' action="{{ route('signup.export') }}" method="POST">
                    @csrf
                    <!-- 功能按鈕(新增/批量處理等等) -->
                    <div class="row" style="margin-bottom: 5px;">
                        <div class="col-lg-12">
                            <ol class="headermenu">
                                
                                <li>
                                    <button class="btn btn-darkblue btn-xs" id="export"><strong>匯出</strong></button>
                                </li>
                            </ol>
                        </div>
                    </div>
                    <!-- 搜尋段 -->
                    <div class="panel panel-default">
                        <div class="panel-heading _panel-heading" data-bs-toggle="collapse" data-bs-target="#search_content">
                            <h3 class="panel-title m-0">報名資料</h3>
                        </div>
                        <div id="search_content" class="collapse show">
                            <div class="panel-body row">
                                <!-- 關鍵字 -->
                                <div class="form-group _form-group col-sm-12 col-md-6 col-xl-3">
                                    <label for="keyword">關鍵字(可搜尋欄位：first name, last name, company name, company email, backup email, phone number)</label>
                                    <input type="text" class="form-control input-sm" id="keyword" name="keyword" maxlength="50">
                                </div>
                                <!-- Search -->
                                <div class="form-group _form-group col-sm-12 col-md-12 col-xl-12">
                                    <a class="btn btn-success btn-sm _fz-12" onclick="javascript: custom_search();">
                                        <div class="_glyphicon _glyphicon-search"></div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr class="search-hr"/>
                    <!-- 列表段 -->
                    <div class="row">
                        <div class="col-lg-12">
                            <table id="GridView1" class="table table-striped table-bordered" cellspacing="0"
                                   width="100%">
                                <thead>
                                <tr>
                                    <th>序號</th>
                                    <th>first name</th>
                                    <th>last name</th>
                                    <th>company name</th>
                                    <th>country</th>
                                    <th>track no</th>
                                    <th>session(TW only)</th>
                                    <th>lunch(TW only)</th>
                                    <th>報名時間</th>
                                    
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </form>
                <!-- row -->
            </div>
        </div>
    </div>
@endsection

@section('extjs')
    <script>
        $(document).ready(function () {
            var table = $('#GridView1').dataTable({
                "scrollX": true,
                "processing": true,
                "serverSide": true,
                "ajax": "signup/grid",
                "paging": true,
                "ordering": true,
                "info": true,
                "order": [[0, "desc"]],
                "stateSave": true,
                "pagingType": "full",
                "bFilter": true,
                "aoColumnDefs": [{
                    'bSortable': false,
                    // 'aTargets': [0] //不想參加排序的欄位，可指定多個，逗號分隔
                }],
                "fnDrawCallback":function( oSettings ) {
                    table.find('.downloadBtn').on('click',function(){
                        let urlToDownload = $(this).data('for-download');
                        let downloadFilename = urlToDownload.split('/');
                        forceDownload($(this).data('for-download'),downloadFilename[downloadFilename.length-1]);
                    });
                }
            }); 
            // 從網址參觸發搜尋
            custom_search()
            $('#GridView1_filter').hide();
        });

        //客製化搜尋欄位
        function custom_search() {
            $('#GridView1').DataTable()
                .column(1).search($('#keyword').val())
            ;
            $('#GridView1').dataTable().fnDraw(true);
        }
        
        function forceDownload(url, fileName){
            var xhr = new XMLHttpRequest();
            xhr.withCredentials = true;
            xhr.open("GET", url, true);
            xhr.responseType = "blob";
            xhr.onload = function(){
                var urlCreator = window.URL || window.webkitURL;
                var imageUrl = urlCreator.createObjectURL(this.response);
                var tag = document.createElement('a');
                tag.href = imageUrl;
                tag.download = fileName;
                document.body.appendChild(tag);
                tag.click();
                document.body.removeChild(tag);
            }
            xhr.send();
        }

        // 匯出報告
        $("#export").click(function () {

            $('#searchForm').submit();
        });
        
    </script>
@endsection