Why is my DataTables plugin not working at all?
Question
I've been trying to make the DataTables plugin work but I can't manage it. Here is the entire html code of my page. The apache server shows no error about not finding the css or js files. Here is my entire html code and the relevant js code since I have not really a clue where the problem might be.
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="images/favicon.ico">
<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap extra CSS -->
<link href="DataTables/datatables.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/tutorial.css" rel="stylesheet">
<link href="css/nav.css" rel="stylesheet">
<script src="assets/js/ie-emulation-modes-warning.js"></script>
</head>
<body>
<div class="navbar">
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">ASDB</h3>
<nav>
<ul class="nav masthead-nav">
<li><a href="index.html">Home</a></li>
<li><a href="background.html">Background</a></li>
<li class="dropdown active">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Database access<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="form.html">Input Form</a></li>
<li class="divider"></li>
<li class="active"><a href="query.html">Query the database</a></li>
<li class="divider"></li>
<li><a href="tutorial.html">Tutorial</a></li>
<li><a href="references.html">References</a></li>
</ul>
</li>
<li><a href="login.html">Login</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="wrapper">
<div id="group">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a data-toggle="collapse" href="#dq" data-parent="#group">
Database queries
</a>
</li>
<li>
<a data-toggle="collapse" href="#im" data-parent="#group">
IMs
</a>
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<!-- <div class="row"> -->
<div class="accordion-group">
<div class="collapse in" id="dq">
<h1>Database queries</h1>
<p>Have fun!!</p>
</div>
<div class="collapse" id="im">
<h1>IMs</h1>
<table id="ind-table" class="display"><thead><tr><th>IMs</th><th>Number of studies</th></tr></thead><tbody>
<tr><td>First IM</td>
<td>100</td>
<td>
<div class="checkbox">
<label><input type="checkbox" value="first_im"></label>
</div>
</td>
</tr>
<tr><td>Second IM</td>
<td>12</td>
<td>
<div class="checkbox">
<label><input type="checkbox" value="second_im"></label>
</div>
</td>
</tr>
<tr><td>Third IM</td>
<td>153</td>
<td>
<div class="checkbox">
<label><input type="checkbox" value="third_im"></label>
</div>
</td>
</tr>
</tbody></table>
<h3><button class="btn btn-default"><b>Visualize</b></button></h3>
<ul>
<li>First IM: <a href="">Wikipedia Link</a></li>
<li>Second IM: <a href="">Wikipedia Link</a></li>
<li>Third IM: <a href="">Wikipedia Link</a></li>
</ul>
</div>
</div>
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
<!-- </div> -->
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
</div>
<!-- /#wrapper -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
<script src="dist/js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables/datatables.js"></script>
<script src="js/query.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
The code on query.js is
$(document).ready(function() {
$('#ind-table').dataTable( {
"order": [[ 2, "desc" ]]
} );
} );
After running this code my table is not getting any of the formatting that is supposed to come with DataTables. Am I missing something?
1 answers
solution1
1 ACCPTED 2016-01-25 11:33:59
You need to put three <th></th> tags in the <thead> section. Then the problem will be solved
<thead>
<tr>
<th>IMs</th>
<th>Number of studies</th>
<th> </th>
</tr>
</thead>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
why is this dataTables jQuery plugin (TableTools) not working?
Why is my jquery datatables createdrow function not working?
Datatables datetime plugin not working
Sorting in DataTables plugin in jquery is not working
Why isn't the search function on my datatables.js working?
why does live search in Ajax Datatables is not working in my code?
Why isn't DataTables working in my rails partial?
my addrow button in Datatables is not working
DataTables jquery plugin not working, get a blank page?
Fix header plugin not working in Angular datatables
Related Tags