@extends('layouts.default')

@section('styles')

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.12/r-2.1.0/datatables.min.css"/>
    I see the issue. Looking at your datatable initialization code and the loader implementation, I can help you fix this. Let's modify the code to properly show the loader.
First, let's add this CSS just after your existing DataTables CSS import:
htmlCopy@section('styles')
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.12/r-2.1.0/datatables.min.css"/>
    <style>
        #custom-loader {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 9999;
            background: rgba(255, 255, 255, 0.8);
            padding: 20px;
            border-radius: 4px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }

        .spinner {
            width: 40px;
            height: 40px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>

@endsection

@section('content')

    <div class="page-header">
        <div class="container">
            <h1>{{ $title }}</h1>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                @if (Session::get('flash_message'))
                    <div class="alert bg-success alert-styled-left">
                        <button type="button" class="close" data-dismiss="alert"><span>×</span><span
                                    class="sr-only">Close</span></button>
                        {{ Session::get('flash_message') }}
                    </div>
                @endif
            </div>
        </div>
    </div>

    <div class="container">

        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">Import Orders</div>
                    <div class="panel-body">
                {{ Form::open(['route'=>['orders.import'],'type'=>'POST', 'files'=>true]) }}
                <div class="form-group">
                    <label class="control-label">Orders File:</label>
                    <input type="file" name="orders" class="file-input">
                    <label class="control-label" for="account">Use USAuto VA LTL Account:</label>
                    <input type="checkbox" name="account" id="account" class="form-control">
                </div>

                    {{ Form::submit('Import',['class'=>'btn btn-primary']) }}
                {{ Form::close() }}

                    </div>
                </div>
            </div>
        </div>

    <div class="row">
        <div class="col-lg-12">
            <div id="custom-loader" style="display: none;">
                <div class="spinner"></div>
            </div>
            <table class="table table-striped table-bordered table-hover table-checkable order-column" id="orders">
                <thead>
                <tr>
                    <th>
                        <label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
                            <input type="checkbox" class="group-checkable" data-set="#orders .checkboxes" />
                            <span></span>
                        </label>
                    </th>
                    <th> Supplier </th>
                    {{--<th> Supplier Part # </th>--}}
                    <th> PO # </th>
                    <th> Partslink </th>
                    {{--<th> Part Name </th>--}}
                    {{--<th> Part Details </th>--}}
                    {{--<th> PO # </th>--}}
                    <th> Quantity </th>
                    <th> Company </th>
                    <th> Customer </th>
                    <th> Imported </th>
                    {{--<th> Street </th>--}}
                    {{--<th> City </th>--}}
                    <th> State </th>
                    {{--<th> Zip/Postal </th>--}}
                    {{--<th> Phone </th>--}}
                    <th> Confirmation </th>
                    <th> Status Message </th>
                    <th> Status </th>
                    <th> Delete </th>
                </tr>
                </thead>
                <tbody>
                {{--@foreach($orders as $order)--}}
                    {{--@foreach($order->items as $item)--}}
                {{--<tr class="{{ ($order->status==2)?'danger':'' }}">--}}
                    {{--<td>--}}
                        {{--<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">--}}
                            {{--<input type="checkbox" class="checkboxes" value="1" />--}}
                            {{--<span></span>--}}
                        {{--</label>--}}
                    {{--</td>--}}
                    {{--<td>{{ $order->supplier }}</td>--}}

                    {{--<td>{{ $order->po }}</td>--}}
                    {{--<td>{{ $item->partslink }}</td>--}}

                    {{--<td>{{ $item->quantity }}</td>--}}
                    {{--<td>{{ $order->company }}</td>--}}
                    {{--<td>{{ $order->customer_name }}</td>--}}
                    {{--<td>{{ $order->created_at }}</td>--}}

                    {{--<td>{{ $order->state }}</td>--}}


                    {{--<td>{{ $order->confirmation }}</td>--}}
                    {{--<td><span style="display: none;">{{ ['waiting','success','error'][$order->status] }}</span>{{ $order->status_message }}</td>--}}
                    {{--<td>--}}
                        {{--{{ Form::select('status',['waiting','success','error'],$order->status,['class'=>'form-control','onchange'=>"location = 'orders/status/".$order->id."/'+this.options[this.selectedIndex].value;"]) }}--}}

                    {{--</td>--}}
                    {{--<td>{{ Html::linkRoute('orders.delete', 'Delete', array($order->id)) }}--}}
                    {{--</td>--}}
                {{--</tr>--}}
                    {{--@endforeach--}}
                {{--@endforeach--}}
                </tbody>
            </table>
{{--            {{ Html::link('/orders/export/','Export',['class'=>'btn btn-primary']) }}--}}
        </div>
    </div>
    </div>
@endsection

@section('scripts')
    <script type="text/javascript" src="https://cdn.datatables.net/v/bs/dt-1.10.12/r-2.1.0/datatables.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
    {{--{!! Html::script('assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js')  !!}--}}

    <script>

        jQuery(document).ready(function() {
            var e = $("#orders");

            e.dataTable({
//                "serverSide": true,
                processing: true,
                ajax: {
                        url: '{{ URL::to('orders/list') }}',
                        beforeSend: function() {
                            $('#custom-loader').show();
                        },
                        complete: function() {
                            $('#custom-loader').hide();
                        }
                    },
                "deferRender": true,
                "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
//                    alert(aData);
                    if ( aData["statusId"] == "2" ) {
                        $(nRow).addClass('danger');
                    }
                },
                "drawCallback": function(settings) {
                    $('#custom-loader').hide();
                },
                "columns": [
                    {data: 'checkbox', name: 'checkbox'},
                    {data: 'order.supplier', name: 'order.supplier',defaultContent: ''},
                    {data: 'order.po', name: 'po',defaultContent: ''},
                    {data: 'partslink',name: 'partslink'},
                    {data: 'quantity', name: 'quantity'},
                    {data: 'order.company', name: 'order.company'},
                    {data: 'order.customer_name', name: 'order.customer_name'},
                    {data: 'order.created_at',
                            name: 'order.created_at',
                            render: function(data) {
                                if (data) {
                                    return moment(data).format('YYYY-MM-DD HH:mm:ss');
                                }
                                return '';
                            }
                    },
                    {data: 'order.state', name: 'order.state',defaultContent: ''},
                    {data: 'order.confirmation', name: 'order.confirmation',defaultContent: ''},
                    {data: 'order.status_message', name: 'order.status_message',defaultContent: ''},
//                    {data: 'statusId', name: 'statusId',defaultContent: ''},
//                    {data: 'status', name: 'status',defaultContent: ''},
                    {data: 'order.status', name: 'order.status', searchable: false, orderable: false,defaultContent: ''},
                    {data: 'delete', name: 'delete'}
                ],
                language: {
                    aria: {
                        sortAscending: ": activate to sort column ascending",
                        sortDescending: ": activate to sort column descending"
                    },
                    emptyTable: "No data available in table",
                    info: "Showing _START_ to _END_ of _TOTAL_ records",
                    infoEmpty: "No records found",
                    infoFiltered: "(filtered1 from _MAX_ total records)",
                    lengthMenu: "Show _MENU_",
                    search: "Search:",
                    zeroRecords: "No matching records found",
                    paginate: {
                        previous: "Prev",
                        next: "Next",
                        last: "Last",
                        first: "First"
                    }
                },

                bStateSave: !0,
                lengthMenu: [
                    [25, 50, 250, -1],
                    [25, 50, 250, "All"]
                ],
                pageLength: 250,
                paginationType: 'full_numbers',
                columnDefs: [{
                    orderable: false,
                    targets: [0,4,11,12]
                }, {
                    searchable: false,
                    targets: [0,4,11,12]
                }, {
                    className: "dt-right"
                }],
                order: [
                    [7, "desc"]
                ]
            });
            e.find(".group-checkable").change(function () {
                var e = jQuery(this).attr("data-set"),
                        t = jQuery(this).is(":checked");
                jQuery(e).each(function () {
                    t ? ($(this).prop("checked", !0), $(this).parents("tr").addClass("active")) : ($(this).prop("checked", !1), $(this).parents("tr").removeClass("active"))
                })
            }), e.on("change", "tbody tr .checkboxes", function () {
                $(this).parents("tr").toggleClass("active")
            })

        });



    </script>
@endsection