The datatables plugin isn't working - nothing happens?

The datatables plugin isn't working - nothing happens?

KiaCherKiaCher Posts: 1Questions: 1Answers: 0
edited August 2021 in DataTables 1.10

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 1Header 2Header 3Header 4Header 5
Row:1 Cell:1Row:1 Cell:2Row:1 Cell:3Row:1 Cell:4Row:1 Cell:5
Row:2 Cell:1Row:2 Cell:2Row:2 Cell:3Row:2 Cell:4Row:2 Cell:5
Row:3 Cell:1Row:3 Cell:2Row:3 Cell:3Row:3 Cell:4Row:3 Cell:5
Row:4 Cell:1Row:4 Cell:2Row:4 Cell:3Row:4 Cell:4Row:4 Cell:5
Row:5 Cell:1Row:5 Cell:2Row:5 Cell:3Row:5 Cell:4Row:5 Cell:5
Row:6 Cell:1Row:6 Cell:2Row:6 Cell:3Row:6 Cell:4Row: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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

    You don't seem to be referencing either jQuery's js or DataTables' js anywhere. Both are essential.

Sign In or Register to comment.