i've been trying make datatables plugin work can't manage it. here entire html code of page. apache server shows no error not finding css or js files. here entire html code , relevant js code since have not clue 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 css --> <link href="datatables/datatables.css" rel="stylesheet"> <!-- ie10 viewport hack surface/desktop windows 8 bug --> <link href="assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet"> <!-- custom styles 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 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 @ end of document 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 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 code table not getting of formatting supposed come datatables. missing something?
you need put 3 <th></th> tags in <thead> section. problem solved
<thead> <tr> <th>ims</th> <th>number of studies</th> <th> </th> </tr> </thead> 
Comments
Post a Comment