Working on my Laravel project, I decided to use MDBootstrap to style a datatable. However, after running the script at the bottom of my page to create the datatable, I noticed that the Search function and pagination were not styled and did not have classes added to them. Even the "Show Entries" button at the top left remained unstyled by MDB. Comparing with the example on the Bootstrap webpage, it seemed like everything should have been styled automatically with the scripts included. Is there something I might be overlooking?
// Material Design example
$(document).ready(function () {
$('#dtBasicExample').DataTable({
"order": [[ 1, "asc" ]]
});
$('.dataTables_length').addClass('bs-select');
});
</script>
index.blade.php
@extends('layouts.app')
@section('content')
<div class="float-left">
<a href="/" class="btn btn-light-blue">
<i class="fa fa-arrow-left" aria-hidden="true"></i>
</a>
</div>
<table id="dtBasicExample" class="table" width="100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
@endsection
@section('scripts')
<script src="{{asset('js/jquery.min.js')}}"></script>
<script src="{{asset('js/popper.min.js')}}"></script>
<script src="{{asset('js/bootstrap.min.js')}}"></script>
<script src="{{asset('js/datatables2.min.js')}}"></script>
<script>
// Material Design example
$(document).ready(function () {
$('#dtBasicExample').DataTable({
"order": [[ 1, "asc" ]]
});
$('.dataTables_length').addClass('bs-select');
});
</script>
@endsection
app.scss
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');
@import url('https://use.fontawesome.com/releases/v5.11.2/css/all.css');
// Bootstrap
//@import '~bootstrap/scss/bootstrap';
// MDBootstrap
@import '~mdbootstrap/css/bootstrap.min.css';
@import '~mdbootstrap/css/mdb.min.css';
@import '~mdbootstrap/css/addons/datatables2.min.css';
//Awesome Font
@import '~font-awesome/css/font-awesome.min.css';
app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{asset('css/app.css')}}">
<title>Datatable Test</title>
</head>
<body>
<div class="container">
<br>
@include('inc.messages')
@yield('content')
</div>
<script src="{{asset('js/app.js')}}"></script>
@yield('scripts')
</body>
</html>
bootstrap.js
window._ = require('lodash');
/**
* Loading jQuery and Bootstrap jQuery plugin for JavaScript based Bootstrap features.
*/
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
// require('bootstrap');
require('./../../node_modules/mdbootstrap/js/jquery.min.js');
require('./../../node_modules/mdbootstrap/js/popper.min.js');
require('./../../node_modules/mdbootstrap/js/bootstrap.min.js');
require('./../../node_modules/mdbootstrap/js/mdb.min.js');
require('./../../node_modules/mdbootstrap/js/addons/datatables2.min.js');
} catch (e) {}
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
/**
* Implementation of Echo API for subscribing to channels and listening for events broadcasted by Laravel.
*/
// import Echo from 'laravel-echo';
// window.Pusher = require('pusher-js');
// window.Echo = new Echo({
// broadcaster: 'pusher',
// key: process.env.MIX_PUSHER_APP_KEY,
// cluster: process.env.MIX_PUSHER_APP_CLUSTER,
// forceTLS: true
});
webpack.mix.js
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Using Mix for defining Webpack build steps in your Laravel application.
| Compiling Sass file for the application and bundling JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.js('node_modules/mdbootstrap/js/jquery.min.js', 'public/js')
.js('node_modules/mdbootstrap/js/popper.min.js', 'public/js')
.js('node_modules/mdbootstrap/js/bootstrap.min.js', 'public/js')
.js('node_modules/mdbootstrap/js/addons/datatables2.min.js', 'public/js');