Level 75
Are you sure you have the css for the media queries included?
Sep 22, 2024
7
Level 2
Yajra-based data table not responsive
Hi,
I'm using Yajra datatable but the page (index.blade.php) where the orders are showing is not responsive and the console is not showing errors.
This is the master.blade.php template:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="csrf-token" content="{{ csrf_token() }}" />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<title>Online Shop | e-Commerce HTML Template</title>
<link rel="icon" type="image/png" href="images/favicon.png">
<link rel="icon" type="image/png" href="">
<link rel="stylesheet" href="{{ asset('backend/userdashboard/css/all.min.css') }}">
<link rel="stylesheet" href="{{ asset('backend/userdashboard/css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ asset('backend/userdashboard/css/select2.min.css') }}">
<link rel="stylesheet" href="{{ asset('backend/userdashboard/css/slick.css') }}">
<link rel="stylesheet" href="{{ asset('backend/userdashboard/css/jquery.nice-number.min.css') }}">
<link rel="stylesheet" href="{{ asset('backend/userdashboard/css/jquery.calendar.css') }}">
<link rel="stylesheet" href="{{ asset('backend/userdashboard/css/add_row_custon.css') }}">
<link rel="stylesheet" href="{{ asset('backend/userdashboard/css/mobile_menu.css') }}">
<link rel="stylesheet" href="{{ asset('backend/userdashboard/css/jquery.exzoom.css') }}">
<link rel="stylesheet" href="{{ asset('backend/userdashboard/css/multiple-image-video.css') }}">
<link rel="stylesheet" href="{{ asset('backend/userdashboard/css/ranger_style.css') }}">
<link rel="stylesheet" href="{{ asset('backend/userdashboard/css/jquery.classycountdown.css') }}">
<link rel="stylesheet" href="{{ asset('backend/userdashboard/css/venobox.min.css') }}">
<link rel="stylesheet" href="{{ asset('backend/assets/modules/summernote/summernote-bs4.css') }}">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="{{ asset('backend/assets/modules/bootstrap-daterangepicker/daterangepicker.css') }}">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
<link rel="stylesheet" href="{{ asset('backend/userdashboard/css/style.css') }}">
<link rel="stylesheet" href="{{ asset('backend/userdashboard/css/responsive.css') }}">
</head>
<body>
<!-- Dashboard Menu Start -->
<div class="wsus__dashboard_menu">
<div class="wsusd__dashboard_user">
<img src="{{ Auth::user()->image ? asset(Auth::user()->image) : asset('images/') }}" alt="User Image"
class="img-fluid">
<p>Hallo, {{ auth()->user()->name }}!</p> <!-- Display the user's name here -->
</div>
</div>
{{-- Explanation
{{--
* {{ Auth::user()->image ? asset(Auth::user()->image) : asset('images/') }}: This is a ternary operation within a Blade template.
* Auth::user()->image: This retrieves the image attribute of the currently authenticated user.
* asset(Auth::user()->image): This generates a URL for the image if it exists.
* asset('images/'): This generates a URL for a default image directory if the user's image does not exist.
* src="{{ ... }}": The URL for the image is dynamically set based on whether the user has an image or not.
* alt="User Image": This sets the alternative text for the image.
* class="img-fluid": This applies the Bootstrap class img-fluid to the image, making it responsive.
*
* User Greeting:
* <p>Hallo, {{ auth()->user()->name }}!</p>
* {{ auth()->user()->name }}: This retrieves and displays the name attribute of the currently authenticated user.
* This line displays a greeting message, "Hallo, [User's Name]!".
--}}
<!-- Dashboard Menu End -->
<!--Dashboard Start-->
@yield('content')
<!--Scroll Button Start-->
<div class="wsus__scroll_btn">
<i class="fas fa-chevron-up"></i>
</div>
<!--jquery library js-->
<!--jquery library js-->
<script src="{{ asset('backend/userdashboard/js/jquery-3.6.0.min.js') }}"></script>
<!--bootstrap js-->
<script src="{{ asset('backend/userdashboard/js/bootstrap.bundle.min.js') }}"></script>
<!--font-awesome js-->
<script src="{{ asset('backend/userdashboard/js/Font-Awesome.js') }}"></script>
<!--select2 js-->
<script src="{{ asset('backend/userdashboard/js/select2.min.js') }}"></script>
<!--slick slider js-->
<script src="{{ asset('backend/userdashboard/js/slick.min.js') }}"></script>
<!--simplyCountdown js-->
<script src="{{ asset('backend/userdashboard/js/simplyCountdown.js') }}"></script>
<!--product zoomer js-->
<script src="{{ asset('backend/userdashboard/js/jquery.exzoom.js') }}"></script>
<!--nice-number js-->
<script src="{{ asset('backend/userdashboard/js/jquery.nice-number.min.js') }}"></script>
<!--counter js-->
<script src="{{ asset('backend/userdashboard/js/jquery.waypoints.min.js') }}"></script>
<script src="{{ asset('backend/userdashboard/js/jquery.countup.min.js') }}"></script>
<!--add row js-->
<script src="{{ asset('backend/userdashboard/js/add_row_custon.js') }}"></script>
<!--multiple-image-video js-->
<script src="{{ asset('backend/userdashboard/js/multiple-image-video.js') }}"></script>
<!--sticky sidebar js-->
<script src="{{ asset('frontend/assets/js/sticky_sidebar.js') }}"></script>
<!--price ranger js-->
<script src="{{ asset('backend/userdashboard/js/ranger_jquery-ui.min.js') }}"></script>
<script src="{{ asset('backend/userdashboard/js/ranger_slider.js') }}"></script>
<!--isotope js-->
<script src="{{ asset('backend/userdashboard/js/isotope.pkgd.min.js') }}"></script>
<!--venobox js-->
<script src="{{ asset('backend/userdashboard/js/venobox.min.js') }}"></script>
<!--classycountdown js-->
<script src="{{ asset('backend/userdashboard/js/jquery.classycountdown.js') }}"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<!--Sweetalert js-->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="//cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<!--main/custom js-->
<script src="{{ asset('backend/userdashboard/js/main.js') }}"></script>
<script>
@if ($errors->any())
@foreach ($errors->all() as $error)
toastr.error("{{ $error }}")
@endforeach
@endif
</script>
<!-- Dynamic Delete alart -->
<script>
$(document).ready(function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('body').on('click', '.delete-item', function(event) {
event.preventDefault();
let deleteUrl = $(this).attr('href');
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.isConfirmed) {
$.ajax({
type: 'DELETE',
url: deleteUrl,
success: function(data) {
if (data.status == 'success') {
Swal.fire(
'Deleted!',
data.message,
'success'
)
window.location.reload();
} else if (data.status == 'error') {
Swal.fire(
'Cant Delete',
data.message,
'error'
)
}
},
error: function(xhr, status, error) {
console.log(error);
}
})
}
})
})
})
</script>
@stack('scripts')
</body>
</html>
This is the sidebar.blade.php:
<div class="dashboard_sidebar">
<span class="close_icon">
<i class="far fa-bars dash_bar"></i>
<i class="far fa-times dash_close"></i>
</span>
<h1 style="color: #fff; font-size: 1.4rem; margin: 20px;">The Online Shop</h1>
<ul class="dashboard_link">
<li><a class="active" href="{{ route('user.dashboard') }}"><i class="fas fa-tachometer"></i>Mein Konto</a></li>
<li><a href="{{ route('index') }}"><i class="fas fa-home"></i>Startseite</a></li>
<li><a href="{{ route('orders.index') }}"><i class="fas fa-shopping-cart"></i> Bestellungen</a></li>
<li><a href="{{ route('user.profile') }}"><i class="far fa-user"></i> Mein Profil</a></li>
<li><a href="{{ route('user.address') }}"><i class="fas fa-map-marker-alt"></i> Adressen</a></li>
<li><a href="{{ route('vendor-request.index') }}"><i class="far fa-user"></i> Verkäufer werden</a></li>
<li>
<form method="POST" action="{{ route('logout') }}">
@csrf
<a href="{{ route('logout') }}"onclick="event.preventDefault();
this.closest('form').submit();"><i class="far fa-sign-out-alt"></i> Abmelden</a>
</form>
</li>
</ul>
</div>
This is the index.blade.php where the data table which displays the orders but is not responsive:
@extends('user.dashboard.layouts.master')
@section('title')
Bestellungen
@endsection
@section('content')
<!-- Dashboard Start -->
<section id="wsus__dashboard">
<div class="container-fluid">
@include('user.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> Bestellungen</h3>
<div class="wsus__dashboard_profile">
<div class="wsus__dash_pro_area">
{{ $dataTable->table() }}
</div>
</div>
</div>
</div>
</div>
</div>
</section>
@endsection
@push('scripts')
<script>
$(document).on('click', '.cancel-order', function() {
var orderId = $(this).data('id');
// SweetAlert for confirmation dialog
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, cancel it!',
cancelButtonText: 'No, keep it'
}).then((result) => {
if (result.isConfirmed) {
$.ajax({
url: "{{ route('user.orders.cancel') }}",
type: 'POST',
data: {
_token: "{{ csrf_token() }}",
id: orderId
},
success: function(response) {
if (response.status === 'success') {
// Toastr success notification
toastr.success(response.message, 'Success');
// Optionally reload the page to reflect changes
setTimeout(function() {
location.reload();
}, 1000); // Delay before reload
} else {
// Toastr error notification
toastr.error(response.message, 'Error');
}
},
error: function(xhr, status, error) {
toastr.error('Something went wrong.', 'Error');
}
});
}
});
});
</script>
{{ $dataTable->scripts(attributes: ['type' => 'module']) }}
@endpush
Grateful for your guidance.
Level 2
@jlrdw Hi, I learned that there are two new links but they don't have an effect on the responsivness of the data table:
1. <script src="//cdn.datatables.net/2.0.7/js/jquery.dataTables.min.js"></script>
2. <link rel="stylesheet" href="//cdn.datatables.net/2.0.7/css/jquery.dataTables.min.css">
When I removed the old versions from the master.blade.php file, the data table was no longer rendering the data.
1. <link rel="stylesheet" href="//cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
2. <script src="//cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
Level 75
@Mamunsson When making changes, make sure you clear your cache.
Level 2
@jlrdw Good advice, I did a hard refresh but the result is still the same - it's not responsive.
Level 75
@Mamunsson I suggest re-reading their documentation in case you missed a step.
There should be an extension for responsive.
From here https://yajrabox.com/docs/laravel-datatables/11.0/introduction
go to https://datatables.net/
then https://datatables.net/extensions/index
and find:
Level 2
@jlrdw Many thanks, I'll check the resources and let you know how it goes.
Level 2
@jlrdw Many thanks, it worked and the datatable is now responsive.
Please or to participate in this conversation.