html builder with layout

[zonbloginc]

I'm using the 'laravel-datatables' in Laravel 9. Everything is work perfectly except the 'layout' order.

https://datatables.net/examples/layout/positioning.html

layout: { topStart: 'pageLength', topEnd: 'search', bottomStart: 'info', bottomEnd: 'paging' }

I tried directly and it's worked:

https://live.datatables.net/bisoqelo/1/edit

I added these into parameters:

$this->builder() ... ->parameters([ 'lengthMenu' => [ [10, 25, 50, 100, -1], ['10 rows', '25 rows', '50 rows', '100 rows', 'Show all'] ], 'layout' => [ 'topStart' => 'info', 'topEnd' => 'search', 'bottomStart' => 'pageLength', 'bottomEnd' => 'paging', ], ]) ....

But it never works as expected.

How can I make it work?

[yajra]

Make sure you don't use dom anywhere in your code.

Based on my previous testing, you can only use either dom or layout. Declaring both options at the same time does not work.

[zonbloginc]

The only place I define it is in the backend:

public function html()
    {
        return $this->builder()
                    ->setTableId('orders_orders')
                    ->responsive(true)
                    ->columns($this->getColumns())
                    ->minifiedAjax()
                    ->orderBy(0)
                    ->pageLength(10)
                    ->parameters([
                        'scrollX' => false,
                        'lengthMenu' => [
                            [10, 25, 50, 100, -1],
                            ['10 rows', '25 rows', '50 rows', '100 rows', 'Show all']
                        ],
                        'language' => [
                            'className' => 'form-control form-control-solid w-250px ps-14',
                            'searchPlaceholder' => 'Search Order',
                            'lengthMenu' => "<span class='dt-length-style'><i class='fa fa-bars'></i> &nbsp;View &nbsp;&nbsp;_MENU_ &nbsp;records&nbsp;&nbsp; </span>",
                        ],
                        'layout' => [
                            'topStart' => 'info',
                            'topEnd' => 'search',
                            'bottomStart' => 'pageLength',
                            'bottomEnd' => 'paging',
                        ],
                    ])
                    ->addTableClass('add-test-class test-class')
                    ->buttons(
                        Button::make('create'),
                        Button::make('export'),
                        Button::make('print'),
                        Button::make('reset'),
                        Button::make('reload')
                    );
    }

The frontend js output is:

$(function() {
    window.LaravelDataTables = window.LaravelDataTables || {};
    window.LaravelDataTables["orders_orders"] = $("#orders_orders").DataTable({
        "serverSide": true,
        "processing": true,
        "ajax": {
            "url": "https:\/\/laravel.tony\/woocommerce-orders-datatables-v2.html",
            "type": "GET",
            "data": function(data) {
                for (var i = 0, len = data.columns.length; i < len; i++) {
                    if (!data.columns[i].search.value) delete data.columns[i].search;
                    if (data.columns[i].searchable === true) delete data.columns[i].searchable;
                    if (data.columns[i].orderable === true) delete data.columns[i].orderable;
                    if (data.columns[i].data === data.columns[i].name) delete data.columns[i].name;
                }
                delete data.search.regex;
            }
        },
        "columns": [{
            "data": "id",
            "name": "id",
            "title": "ID",
            "orderable": true,
            "searchable": true
        }, {
            "data": "order_id",
            "name": "order_id",
            "title": "Order ID",
            "orderable": true,
            "searchable": true
        }, {
            "data": "order_source",
            "name": "order_source",
            "title": "Order Source",
            "orderable": true,
            "searchable": true
        }, {
            "data": "created_at",
            "name": "created_at",
            "title": "Created At",
            "orderable": true,
            "searchable": true
        }, {
            "data": "updated_at",
            "name": "updated_at",
            "title": "Updated At",
            "orderable": true,
            "searchable": true
        }],
        "responsive": true,
        "renderer": "bootstrap",
        "order": [
            [0, "desc"]
        ],
        "pageLength": 10,
        "scrollX": false,
        "lengthMenu": [
            [10, 25, 50, 100, -1],
            ["10 rows", "25 rows", "50 rows", "100 rows", "Show all"]
        ],
        "language": {
            "className": "form-control form-control-solid w-250px ps-14",
            "searchPlaceholder": "Search Order",
            "lengthMenu": "<span class='dt-length-style'><i class='fa fa-bars'><\/i> &nbsp;View &nbsp;&nbsp;_MENU_ &nbsp;records&nbsp;&nbsp; <\/span>"
        },
        "layout": {
            "bottom": {
                "text": {
                    "text": "DataTables<br>rocks!",
                    "html": true
                }
            },
            "topStart": "info",
            "topEnd": "search",
            "bottomStart": "pageLength",
            "bottomEnd": "paging"
        },
        "buttons": [{
            "extend": "create"
        }, {
            "extend": "export"
        }, {
            "extend": "print"
        }, {
            "extend": "reset"
        }, {
            "extend": "reload"
        }]
    });
});

[yajra]

I just remembered, on DT 2 - it seems like you need to explicitly set the route in ajax.

->minifiedAjax(route('users.index'))

[zonbloginc]

It didn't work. I had to use 'dom'.