How to integrate with datatables?

[mrizkihidayat66]

How can I integrate datatables-net with laravel-wizard? Since the index() route is automatically handled by the library, I'm unable to modify its parameters to receive dataTables like I usually would.

app\Steps\License\ProductStep.php

class ProductStep extends Step
{
    public function getProductDT()
    {
        return app(\App\DataTables\LicenseProductDataTable::class);
    }
}

views\steps\license\product.blade.php

@php
    $dtProduct          = $step->getProductDT();
    $customer_detail    = $step->find('customer')->data();
@endphp

<div class="table-responsive">
    <table class="table table-sm">
        {{ $dtProduct->html()->table() }}
    </table>
</div>

@push('scripts')
    {{ $dtProduct->html()->scripts() }}
@endpush

app\DataTables\LicenseProductDataTable.php

..

[ycs77]

Hi @mrizkihidayat66, please share GitHub repo simple Laravel App contains above code, and remove your business related contents, this will allow me to better investigate your issue.

[mrizkihidayat66]

Hi @ycs77, can you check this? https://github.com/mrizkihidayat66/laravel-wizard-datatables Thank you

[ycs77]

@mrizkihidayat66 You can create a new route api to respond to the JSON data for datatable.

First, add two methods for ProductStep:

app/Steps/Order/ProductStep.php

class ProductStep extends Step
{
    public function getProductDT()
    {
        return app(\App\DataTables\OrderProductDataTable::class);
    }

    // add api response
    public function productDTApi()
    {
        return $this->getProductDT()->ajax();
    }

    public function getCouponDT()
    {
        return app(\App\DataTables\OrderCouponDataTable::class);
    }

    // add api response
    public function couponDTApi()
    {
        return $this->getCouponDT()->ajax();
    }
}

Then OrderWizardController also needs to:

app/Http/Controllers/OrderWizardController.php

class OrderWizardController extends Controller
{
    public function productDTApi()
    {
        /** @var \App\Steps\Order\ProductStep */
        $step = $this->wizard()->stepRepo()->find('product');

        return $step->productDTApi();
    }

    public function couponDTApi()
    {
        /** @var \App\Steps\Order\ProductStep */
        $step = $this->wizard()->stepRepo()->find('product');

        return $step->couponDTApi();
    }
}

Append the routes:

Wizard::routes('/orders/order', OrderWizardController::class, 'orders.order');
// add api routes
Route::get('/orders/order/product/api', [OrderWizardController::class, 'productDTApi'])->name('orders.order.product.api');
Route::get('/orders/order/coupon/api', [OrderWizardController::class, 'couponDTApi'])->name('orders.order.coupon.api');

Now you can change the api urls for the datatables:

app/DataTables/OrderProductDataTable.php

    public function html(): HtmlBuilder
    {
        return $this->builder()
                    ...
                    ->ajax([
                        'url'           => route('orders.order.product.api'),
                        ...
                    ])
    }

app/DataTables/OrderCouponDataTable.php

    public function html(): HtmlBuilder
    {
        return $this->builder()
                    ...
                    ->ajax([
                        'url'           => route('orders.order.coupon.api'),
                        ...
                    ])
    }