mardi 29 janvier 2019

How to fix poor looking Processing message in laravel-datatables?

In my laravel 5.7/ blade / jQuery v3.3.1 / Bootstrap v4.1.2 app I use

I use "yajra/laravel-datatables-oracle": "~8.0" library and it works ok, but when data are retrieving I do not like how Processing message looks like : https://imgur.com/a/Otebuku

I can hardly read this message and it is over my table header and as common it looks poor. I have blade block :

    <div class="table-responsive">
        <table class="table table-bordered table-striped text-primary" id="get-storage-space-dt-listing-table">
            <thead>
            <tr>
                <th>Id</th>
                <th>Box Room No.</th>
                <th>Selling range</th>
                <th>Warehouse</th>
                <th>Level</th>
                <th>Storage Capacity</th>
                <th>Check In</th>
                <th>Paid through date</th>
                <th>Job Ref No</th>
                <th>Status</th>
                <th>Created At</th>
                <th></th>
                <th></th>
            </tr>
            </thead>
        </table>

    </div>

and javascript initialization :

backendStorageSpace.prototype.StorageSpacesLoad = function () {
    Mustache.tags = ["<%", "%>"];
    var template = $('#storage_space_details_info_template').html();

    var ins = this
    oTable = $('#get-storage-space-dt-listing-table').DataTable({
        processing: true,
        serverSide: true,
        "lengthChange": true,
        "lengthMenu": this_backendLengthMenuArray,
        ajax: {
            url: this_backend_home_url + '/admin/get-box-rooms-dt-listing',
            data: function (d) {
                d.filter_status = $("#filter_status").val();
                ...
            },
        }, // ajax: {

        columns: [

            {data: 'id', name: 'id'},
            {data: 'number', name: 'number'},
            {data: 'selling_range', name: 'selling_range'},
            {data: 'warehouse_name', name: 'warehouse_name'},
            {data: 'level', name: 'level'},
            {data: 'storage_capacity_name', name: 'storage_capacity_name'},
            {data: 'check_in_date', name: 'check_in_date'},
            {data: 'check_out_date', name: 'check_out_date'},

            {data: 'job_ref_no', name: 'job_ref_no'},
            {data: 'status', name: 'status'},
            {data: 'created_at', name: 'created_at'},
            {data: 'action', name: 'action', orderable: false, searchable: false},
            {data: 'action_delete', name: 'action_delete', orderable: false, searchable: false}

        ],

        "drawCallback": function (settings, b) {
            ...

I search and did not find where this message appearance is controled ? If there is a way to make it look better, say show this message below of table row with head block ?

Thanks!



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire