Hi, i am using datatable in my nextjs project, i got an error .DataTable is not a function.
Hi, i am using datatable in my nextjs project, i got an error .DataTable is not a function.
noumansarwar
Posts: 1Questions: 1Answers: 0
pages/form/index.js
// import "../../styles/table.module.css";
export default function index() {
if (typeof window === "object") {
// console.log(document.querySelector("#example").DataTable());
document
.querySelector("#example")
.DataTable({
responsive: true,
})
.columns.adjust()
.responsive.recalc();
}
return (
<div class="bg-gray-100 text-gray-900 tracking-wider leading-normal">
<div class="container w-full md:w-4/5 xl:w-3/5 mx-auto px-2">
<div class="p-8 mt-6 lg:mt-0 rounded shadow bg-white">
<table id="example" class="stripe hover">
<thead>
<tr>
<th data-priority="1">Field 1</th>
<th data-priority="2">Field 2</th>
<th data-priority="3">Field 3</th>
<th data-priority="4">Field 4</th>
<th data-priority="5">Boolean Field</th>
<th data-priority="6">Clickable</th>
<th data-priority="6">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
);
}
styles/table.module.css
@import url("https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css");
.dataTables_wrapper select,
.dataTables_wrapper .dataTables_filter input {
color: #4a5568;
/*text-gray-700*/
padding-left: 1rem;
/*pl-4*/
padding-right: 1rem;
/*pl-4*/
padding-top: .5rem;
/*pl-2*/
padding-bottom: .5rem;
/*pl-2*/
line-height: 1.25;
/*leading-tight*/
border-width: 2px;
/*border-2*/
border-radius: .25rem;
border-color: #edf2f7;
/*border-gray-200*/
background-color: #edf2f7;
/*bg-gray-200*/
}
table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover {
background-color: #ebf4ff;
/*bg-indigo-100*/
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
font-weight: 700;
/*font-bold*/
border-radius: .25rem;
/*rounded*/
border: 1px solid transparent;
/*border border-transparent*/
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
color: #fff !important;
/*text-white*/
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
/*shadow*/
font-weight: 700;
/*font-bold*/
border-radius: .25rem;
/*rounded*/
background: #667eea !important;
/*bg-indigo-500*/
border: 1px solid transparent;
/*border border-transparent*/
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
color: #fff !important;
/*text-white*/
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
/*shadow*/
font-weight: 700;
/*font-bold*/
border-radius: .25rem;
/*rounded*/
background: #667eea !important;
/*bg-indigo-500*/
border: 1px solid transparent;
/*border border-transparent*/
}
table.dataTable.no-footer {
border-bottom: 1px solid #e2e8f0;
/*border-b-1 border-gray-300*/
margin-top: 0.75em;
margin-bottom: 0.75em;
}
table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before {
background-color: #667eea !important;
/*bg-indigo-500*/
}
pages/_app.js
import "tailwindcss/tailwind.css";
import "../styles/globals.css";
import "../styles/table.module.css";
import Head from "next/Head";
import Nav from "../components/Nav";
function MyApp({ Component, pageProps }) {
return (
<>
<Head>
<script
type="text/javascript"
src="https://code.jquery.com/jquery-3.4.1.min.js"
></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
{/* <script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script> */}
</Head>
<Nav />
<Component {...pageProps} />
</>
);
}
export default MyApp;
Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
Answers
You would get that if you haven't included the sources. The easiest way to tell if it is present is to use the debugger.
If that doesn't help, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin