Level 67
Any errors in console? That's a really old version of jquery. We also don't need to see 300 lines of table rows lol.
Apr 13, 2018
12
Level 1
Datatable is not working.
The dataTable is not working, I tried different stylesheet and JS package, but it doesn't show the anything for my table.
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css">
Level 88
Well the problem here is that your javascript is not on the correct place I guess. Have you tried putting all the <script> tags just before the closing </body> tag? It should run by then!
Level 1
I reordered this.
My index.blade.php page is like this
@extends('layouts.app')
@section('content')
<div class="container">
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
</tfoot>
</table>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
@endsection
My app.blade.php is like this
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css" />
</head>
1 like
Level 1
It is still not working...
Level 1
In the console, it said the error below. Any ideas? I have been trying this like forever. lol sorry about the 300 lines of table rows.
Uncaught TypeError: $(...).DataTable is not a function at HTMLDocument. (organizations:504) at fire (jquery-1.12.4.js:3232) at Object.fireWith [as resolveWith] (jquery-1.12.4.js:3362) at Function.ready (jquery-1.12.4.js:3582) at HTMLDocument.completed (jquery-1.12.4.js:3617)
Level 1
I got it! It is a conflicts with my app.blade.php. I am still looking for the solution, but I know where the problem is. I probably loading jquery twice.
1 like
Level 1
app.js is having conflicts with my table. How can I disable it for just that page? Or if I just delete that line, will it break the site?
Level 67
app.js includes jquery by default. If you're not actually using app.js, just remove the reference from the <head>
Level 60
Why not jQuery
No one uses jQuery anymore
No one should be using jQuery anymore
STOP USING JQUERY!
Most futures have been implemented natively in one way or other
Adds a lot of overhead
:))
Level 67
"no one uses jquery anymore". There are a few millions sites out there using jquery, and major things like bootstrap and wordpress still use it. Just because it's not as shiny as some of the newer things like vue, doesn't mean it's "bad" or you "shouldn't" use it. Can you be any more opinionated lol?
3 likes
Level 60
@Cronix actually it was a joke, I thought that it will be funny. I have nothing against jQuery, I don't hate jQuery. Everything has its own spot.
Level 1
@Sun In app.blade.php file remove defer from <script src="{{ asset('js/app.js') }}" defer></script>
And remove <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script> from index.blade.php
Please or to participate in this conversation.