为什么我的DataTables插件根本不起作用？

Question

I've been trying to make the DataTables plugin work but I can't manage it. 我一直在尝试使DataTables插件正常工作，但是我无法对其进行管理。 Here is the entire html code of my page. 这是我页面的整个html代码。 The apache server shows no error about not finding the css or js files. apache服务器不会显示有关找不到css或js文件的错误。 Here is my entire html code and the relevant js code since I have not really a clue where the problem might be. 这是我的整个html代码和相关的js代码，因为我实际上并不知道问题可能出在哪里。

<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 query.js上的代码是

$(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. 运行此代码后，我的表未获得DataTables附带的任何格式。 Am I missing something? 我想念什么吗？

Answer 1

You need to put three <th></th> tags in the <thead> section. 您需要在<thead>部分中放置三个<th></th>标记。 Then the problem will be solved 那问题就解决了

<thead>
  <tr>
    <th>IMs</th>
    <th>Number of studies</th>
    <th>&nbsp;</th>
  </tr>
</thead>

为什么我的DataTables插件根本不起作用？

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-01-25 11:33:59

为什么我的DataTables插件根本不起作用？

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-01-25 11:33:59

解决方案1
1 已采纳 2016-01-25 11:33:59