The datatables plugin isn't working - nothing happens?
The datatables plugin isn't working - nothing happens?
KiaCher
Posts: 1Questions: 1Answers: 0
Hi there!
I am having troubling getting the datatables plugin to work/to apply to the table on my webpage.
I would like to install the files locally because my website isn't live yet but for the sake of this question I am using the CDN file - so far I have tried both ways (many times) and I have no idea what I'm doing wrong, if someone could please help! (Please bear in mind that I am totally new to jquery!)
I have attached:
- a html page with only the pieces relevant to this table question included
- the css external style sheet that the html is calling
- the error messages I'm seeing in the browser console
I have also pasted both page contents below.
All help appreciated! Thanks!
HTML PAGE:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="yad_style.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.css">
<title> MyDunya </title>
<meta charset="UTF-8">
<meta name="description" content="YaDunya Discussion Topics">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
</head>
<body>
$(document).ready( function () { $('#myTable').DataTable( { lengthMenu: [[5,10,50,100,-1],[5,10,50,100,"All"]] } ); });
```
My Bookmarks
| Header 1 | Header 2 | Header 3 | Header 4 | Header 5 |
|---|---|---|---|---|
| Row:1 Cell:1 | Row:1 Cell:2 | Row:1 Cell:3 | Row:1 Cell:4 | Row:1 Cell:5 |
| Row:2 Cell:1 | Row:2 Cell:2 | Row:2 Cell:3 | Row:2 Cell:4 | Row:2 Cell:5 |
| Row:3 Cell:1 | Row:3 Cell:2 | Row:3 Cell:3 | Row:3 Cell:4 | Row:3 Cell:5 |
| Row:4 Cell:1 | Row:4 Cell:2 | Row:4 Cell:3 | Row:4 Cell:4 | Row:4 Cell:5 |
| Row:5 Cell:1 | Row:5 Cell:2 | Row:5 Cell:3 | Row:5 Cell:4 | Row:5 Cell:5 |
| Row:6 Cell:1 | Row:6 Cell:2 | Row:6 Cell:3 | Row:6 Cell:4 | Row:6 Cell:5 |
</body>
</html>
CSS PAGE:
/* CSS Browser Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
vertical-align: baseline;
}
h1 {
color: none;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
%reset-Button {
border-style: none;
margin: 0;
padding: 0;
width: auto;
overflow: visible;
border-radius: 0;
background: transparent;
/* inherit font & color from ancestor */
color: inherit;
font: inherit;
/* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
line-height: normal;
/* Corrects font smoothing for webkit */
-webkit-font-smoothing: inherit;
-moz-osx-font-smoothing: inherit;
/* Corrects inability to style clickable `input` types in iOS */
-webkit-appearance: none;
}
/* Remove excess padding and border in Firefox 4+ */
&::-moz-focus-inner {
border: 0;
padding: 0;
}
/*Page background and font */
/* Overarching page font*/
@font-face {
font-family: 'Indie Flower';
src: url('IndieFlower-Regular.ttf');
/* My Bookmarks Section */
/* Style the div container /
.mybookmarks {
width: 80%;
margin: 2% 10% 10% 10%;
background-color: white;
border-radius: 1vw;
padding: 1%;
-webkit-box-shadow: .5vw .5vw #0f70bf; / Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ colour dark blue /
-moz-box-shadow: .5vw .5vw #0f70bf; / Firefox 3.5 - 3.6 dark blue /
box-shadow: .5vw .5vw #d3d1d1; / Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 light grey*/
}
/* Style the heading /
.mybookmarks h2 {
color: #005500; / jungle green /
text-align: center;
font-size: 5vw;
padding-bottom: 1%; / To ensure heading doesn't touch picture */
}
/* Bookmark Table */
myTable {
width: 100%;
}
Answers
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
You don't seem to be referencing either jQuery's js or DataTables' js anywhere. Both are essential.