DataTable not working on Laravel
First I get Typescript error because Jquery is not included in page.. Once I include Jquery(I thought this theme came DataTable ready?.. ) I get this error,
Uncaught TypeError: $(...).DataTable is not a function
at HTMLDocument.<anonymous> (customers:2297:165)
at j (jquery.js:3148:30)
at Object.fireWith [as resolveWith] (jquery.js:3260:7)
at Function.ready (jquery.js:3472:13)
at HTMLDocument.J (jquery.js:3503:10)..
Why is my Datatable not working?
It oads the column but after it gets to scripting everything shuts down..
Replies (6)
Hi Kenneth,
Please check the console log if there is an error. If the "processing" indicator is stuck in the middle of the table, seems like there is an error on the server-side.
Please check the Network tab as well. The server-side might have an error. Working request should be like this;
<img src=" alt="image" border="0">
Thanks
I need to know where can I insert the CSS that came with metronic for DataTables because it is not applying Metronics css
In config/global/pages.php
add -
"page here" => [
"*" => [
"title" => "page title here",
"assets" => [
"custom" => [
"css" => [
"plugins/custom/datatables/datatables.bundle.css",
],
"js" => [
"plugins/custom/datatables/datatables.bundle.js",
],
],
],
],
],Otherwise you can put the scripts in line under the </x-base-layout> in that specific page or yield a script directly.
Thank you! Everything is good now! Except now i get this Button saying processing in the middle of the table.. Any idea why? Its that it doesnt let the button create appear.. do i need another step?
Also if you're having trouble I always reference the Metronic Laravel Documentation.
https://preview.keenthemes.com/metronic8/laravel/documentation/configuration/page?demo=demo1
You can add this three lines into <head> Tag
<link rel="stylesheet" type="text/css" href="
<script src="
<script type="text/javascript" charset="utf8" src="
Next, you can write script tage after the </table> tag
<script>
$(document).ready(function()
{
$('#test').DataTable();
});
</script>
