DataTable not responsive
DataTable not responsive
Fullstack
Posts: 3Questions: 1Answers: 0
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
Answers
This is the master.blade.php:
It is if yu are using Bootstrap 5. Its difficult to tell with the names of the Bootstrap library you are loading.
Perfect!
Yes, but it doesn't look like you have enabled the use of responsive in you Datatable. I think you are defining the Datatable options on line 94 with
return $this->builder(). The Responsive docs show how to enable Responsive using Javascript. However it looks like you are using Yarja Datatables. You will need to refer to their docs or support to learn how to enable Responsive. This forum doesn't have anyone who is familiar with the Yarja package.Kevin
Hi Kevin,
Many thanks for your guidance. It seems to have worked now- I tested how the page would like like on various mobile devices using Chrome.
These are the changes I made:
For the VendorProductDataTable.php I added this: