Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Laravel paginate() with DataTables #3134

Open
Onepamopa opened this issue Apr 11, 2024 · 1 comment
Open

Laravel paginate() with DataTables #3134

Onepamopa opened this issue Apr 11, 2024 · 1 comment

Comments

@Onepamopa
Copy link

Hello, so...
Since executing the query "normally" is too expensive in terms of resources, I'm trying to limit using ->paginate(xx):

    public function getManufacturers(Request $request)
    {
        $manufacturers = Manufacturer::active()->paginate(10);

        return DataTables::of($manufacturers)
            ->editColumn('checkbox', function ($manufacturer) {
                return view('admin.partials.actions.manufacturer.checkbox', compact('manufacturer'));
            })
            ->editColumn('id', function ($manufacturer) {
                return view('admin.partials.actions.manufacturer.id', compact('manufacturer'));
            })
            ->editColumn('custom_id', function ($manufacturer) {
                return view('admin.partials.actions.manufacturer.custom_id', compact('manufacturer'));
            })
            ->editColumn('image', function ($manufacturer) {
                return view('admin.partials.actions.manufacturer.image', compact('manufacturer'));
            })
            ->editColumn('name', function ($manufacturer) {
                return view('admin.partials.actions.manufacturer.name', compact('manufacturer'));
            })
            ->editColumn('phone', function ($manufacturer) {
                return view('admin.partials.actions.manufacturer.phone', compact('manufacturer'));
            })
            ->editColumn('email', function ($manufacturer) {
                return view('admin.partials.actions.manufacturer.email', compact('manufacturer'));
            })
            ->editColumn('country', function ($manufacturer) {
                return view('admin.partials.actions.manufacturer.country', compact('manufacturer'));
            })
            ->editColumn('products_count', function ($manufacturer) {
                return view('admin.partials.actions.manufacturer.products_count', compact('manufacturer'));
            })
            ->addColumn('option', function ($manufacturer) {
                return view('admin.partials.actions.manufacturer.options', compact('manufacturer'));
            })
            ->rawColumns(['checkbox', 'id', 'custom_id', 'image', 'name', 'phone', 'email', 'country', 'products_count', 'option'])
            ->make(true);
    }

This is the datatable:
    let manufacturersTblColumns = {
        "aaSorting": [],
        "iDisplayLength": 10,
        "processing": true,
        "serverSide": true,
        "columns": [
            {
                'data': 'checkbox',
                'name': 'checkbox',
                'orderable': false,
                'searchable': false,
                'exportable': false,
                'printable': false
            },
            {
                'data': 'id',
                'name': 'id',
                'orderable': true,
                'searchable': false
            },
            {
                'data': 'custom_id',
                'name': 'custom_id',
                'orderable': true,
                'searchable': false
            },
            {
                'data': 'image',
                'name': 'image',
                'orderable': false,
                'searchable': false
            },
            {
                'data': 'name',
                'name': 'name',
                'orderable': false,
                'searchable': true
            },
            {
                'data': 'phone',
                'name': 'phone',
                'orderable': false,
                'searchable': true
            },
            {
                'data': 'email',
                'name': 'email',
                'orderable': false,
                'searchable': true
            },
            {
                'data': 'country',
                'name': 'country',
                'orderable': false,
                'searchable': false
            },
            {
                'data': 'products_count',
                'name': 'products_count',
                'orderable': true,
                'searchable': false
            },
            {
                'data': 'option',
                'name': 'option',
                'orderable': false,
                'searchable': false,
                'exportable': false,
                'printable': false
            }
        ],
        "initComplete": function (settings, json) {
            // console.log(json);
        },
        "drawCallback": function (settings) {
            $(".massAction, .checkbox-toggle").unbind();
            $(".fa", '.checkbox-toggle').removeClass("fa-check-square-o").addClass('fa-square-o');
            initMassActions();
        },
        "oLanguage": {
            "sInfo": "_START_ {{trans('app.dt_to')}} _END_ {{trans('app.dt_of')}} _TOTAL_ {{trans('app.dt_entries')}}",
            "sInfoEmpty": "0 {{trans('app.dt_to')}} 0 {{trans('app.dt_of')}} 0 {{trans('app.dt_entries')}}",
            "sLengthMenu": "{{trans('app.dt_show')}} _MENU_",
            "buttons": {
                "sLengthMenu": "{{trans('app.dt_show')}} _MENU_",
                "pageLength": {
                    _: "{{trans('app.dt_show')}} %d {{trans('app.dt_rows')}}"
                },
            },
            "sSearch": "",
            "sEmptyTable": "{{ trans('app.no_data_found') }}",
            "oPaginate": {
                "sNext": '<i class="fa fa-hand-o-right"></i>',
                "sPrevious": '<i class="fa fa-hand-o-left"></i>',
            },
        },
        "aoColumnDefs": [{
            "bSortable": false,
            "aTargets": [-1]
        }],
        "lengthMenu": [
            [10, 20, 50, 100],
            ['10 {{trans('app.dt_rows')}}', '20 {{trans('app.dt_rows')}}', '50 {{trans('app.dt_rows')}}', '100 {{trans('app.dt_rows')}}']
        ],
        "dom": 'Bfrtip',
        "buttons": [
            'pageLength'
        ]
    };

        // Load manufacturers table
        $('#manufacturers_table').DataTable($.extend({}, manufacturersTblColumns, {
            "ajax": {
                url: "{{ route('admin.catalog.manufacturer.getMore') }}",
                type: "GET",
                async: true,
                error: function (xhr, error, code) {
                    if (xhr.status === 401) {
                        window.location.href = "{{ route('admin.login') }}";
                    }
                }
            }
        }));

However, getting a "No available engine for Illuminate\Pagination\LengthAwarePaginator"

Any ideas on how to run this table with Laravle's paginate()? Or, if that's not possible - how to render it properly?
There's images and so forth...

Laravel 8.83.27, laravel-datatables v. 9.21.2

@yajra
Copy link
Owner

yajra commented Apr 16, 2024

Don't paginate as the package will handle it for you. Use query/eloquent builder too instead of collection if possible for better performance.

$manufacturers = Manufacturer::active();

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants