Hi,
I followed this page: https://datatables.net/download/ to make my vendor data table responsive with no success.
Chose a styling framework- I selected bootstrap 5 (Not sure if this is the right choice).
Select Packages- I chose DataTables (Not sure if this is the right choice).
Extension- I chose Responsive (Again not sure if this is the right choice but I chose since I want the data table to be responsive).
The console is not showing an error. Grateful for your guidance.
Here is the setup:
This is the VendorProductDataTable.php:
<?php
namespace App\DataTables;
use App\Models\Product;
use Illuminate\Database\Eloquent\Builder as QueryBuilder;
use Illuminate\Support\Facades\Auth;
use Yajra\DataTables\EloquentDataTable;
use Yajra\DataTables\Html\Builder as HtmlBuilder;
use Yajra\DataTables\Html\Button;
use Yajra\DataTables\Html\Column;
use Yajra\DataTables\Html\Editor\Editor;
use Yajra\DataTables\Html\Editor\Fields;
use Yajra\DataTables\Services\DataTable;
class VendorProductDataTable extends DataTable
{
/**
* Build the DataTable class.
*
* @param QueryBuilder $query Results from query() method.
*/
public function dataTable(QueryBuilder $query): EloquentDataTable
{
return (new EloquentDataTable($query))
->addColumn('action', function ($query) {
$editBtn = "<a href='" . route('vendor.products.edit', $query->id) . "' class='btn btn-primary'><i class='far fa-edit'></i></a>";
$deleteBtn = "<a href='" . route('vendor.products.destroy', $query->id) . "' class='btn btn-danger delete-item' ><i class='far fa-trash-alt'></i></a>";
$moreBtn = '<div class="btn-group dropstart" style="margin-left:3px">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-cog"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item has-icon" href="' . route('vendor.products-image-gallery.index', ['product' => $query->id]) . '"> Image Gallery</a></li>
</ul>
</div>';
return $editBtn . $deleteBtn . $moreBtn;
})
->addColumn('image', function ($query) {
return "<img width='70px' src='" . asset($query->thumb_image) . "' ></img>";
})
->addColumn('type', function ($query) {
switch ($query->product_type) {
case 'new_arrival':
return '<i class="badge bg-success">New Arrival</i>';
break;
case 'featured_product':
return '<i class="badge bg-warning">Featured Product</i>';
break;
case 'top_product':
return '<i class="badge bg-info">Top Product</i>';
break;
case 'best_product':
return '<i class="badge bg-danger">Top Product</i>';
break;
default:
return '<i class="badge bg-dark">None</i>';
break;
}
})
->addColumn('status', function ($query) {
if ($query->status == 1) {
$button = '<div class="form-check form-switch">
<input checked class="form-check-input change-status" type="checkbox" id="flexSwitchCheckDefault" data-id="' . $query->id . '"></div>';
} else {
$button = '<div class="form-check form-switch">
<input class="form-check-input change-status" type="checkbox" id="flexSwitchCheckDefault" data-id="' . $query->id . '"></div>';
}
return $button;
})
->rawColumns(['image', 'type', 'status', 'action'])
->setRowId('id');
}
/**
* Get the query source of dataTable.
*/
public function query(Product $model): QueryBuilder
{
return $model->where('vendor_id', Auth::user()->vendor->id)->newQuery();
}
/**
* Optional method if you want to use the html builder.
*/
public function html(): HtmlBuilder
{
return $this->builder()
->setTableId('vendorproduct-table')
->columns($this->getColumns())
->minifiedAjax()
->orderBy(0)
->selectStyleSingle()
->pageLength(5) // Set the default number of items per page
->buttons([
Button::make('excel'),
Button::make('csv'),
Button::make('pdf'),
Button::make('print'),
Button::make('reset'),
Button::make('reload')
]);
}
/**
* Get the dataTable columns definition.
*/
public function getColumns(): array
{
return [
Column::make('id'),
Column::make('image')->width(150),
Column::make('product_name'),
Column::make('price'),
Column::make('type')->width(150),
Column::make('status'),
Column::computed('action')
->exportable(false)
->printable(false)
->width(200)
->addClass('text-center'),
];
}
/**
* Get the filename for export.
*/
protected function filename(): string
{
return 'VendorProduct_' . date('YmdHis');
}
}
This is the index.blade.php:
@extends('vendor.dashboard.layouts.master')
@section('content')
<!-- ======= Vendor Dashboard ======= -->
<section id="wsus__dashboard">
<div class="container-fluid">
@include('vendor.dashboard.layouts.sidebar')
<div class="row">
<div class="col-xl-9 col-xxl-10 col-lg-9 ms-auto">
<div class="dashboard_content mt-2 mt-md-0">
<h3><i class="far fa-user"></i> Produkte</h3>
<div class="create_button">
<a href="{{ route('vendor.products.create') }}" class="btn btn-primary"><i class="fas fa-plus"></i>
Produkt erstellen</a>
</div>
<div class="wsus__dashboard_profile">
<div class="wsus__dash_pro_area">
{{ $dataTable->table() }}
</div>
</div>
</div>
</div>
</div>
</div>
</section>
@endsection
@push('scripts')
{{ $dataTable->scripts(attributes: ['type' => 'module']) }}
<script>
$(document).ready(function() {
$('body').on('click', '.change-status', function() {
let isChecked = $(this).is(':checked');
let id = $(this).data('id');
$.ajax({
url: "{{ route('vendor.product.change-status') }}",
method: 'PUT',
data: {
status: isChecked,
id: id
},
success: function(data) {
toastr.success(data.message)
},
error: function(xhr, status, error) {
console.log(error);
}
})
})
})
</script>
@endpush
