Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

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..


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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="https://i.ibb.co/wLFSPt8/image.png" 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="https://cdn.datatables.net/1.12.0/css/jquery.dataTables.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.0/js/jquery.dataTables.js"></script>

Next, you can write script tage after the </table> tag

<script>

$(document).ready(function()
{
$('#test').DataTable();
});

</script>


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(