Question

我正在使用DataTables（http://www.datatables.net/）。

我正在使用下面的代码，但DataTables似乎没有初始化。我可以将<script>移到文档的顶部然后它可以正常工作但我明白最好将它们放在文档的底部。

当我将它们移到文档的底部时，是否有理由不能正常工作。我想我正在以正确的顺序加载它们等。

<!DOCTYPE html>
<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="">

    <title>
      Test
    </title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.datatables.net/plug-ins/725b2a2115b/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet">

    <script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            $('#example').dataTable( {
                "serverSide": true,
                "ajax": {
                        "url": "server_processing/test.php",
                        "type": "POST"
                        },
                "order": [[ 0, "desc" ]]
            } );
        } );
    </script>
  </head>

  <body>
    <div class="navbar navbar-default navbar-static-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Test</a>
        </div>
      </div>
    </div>

    <div class="container">
      <div class="page-header">
        <h1 id="tables">Test</h1>
      </div>

      <table id="example" class="display" cellspacing="0" width="100%">
          <thead>
              <tr>
                  <th>Invoice No</th>
                  <th>Order No</th>
              </tr>
          </thead>
          <tbody>
          </tbody>
      </table>  

      <script type="text/javascript">
           $('#example')
               .removeClass( 'display' )
               .addClass('table table-bordered');
      </script>
    </div>

    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.js"></script>
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/plug-ins/725b2a2115b/integration/bootstrap/3/dataTables.bootstrap.js"></script>
  </body>
</html>

Answer 1

如果在主体底部加载脚本标记，则还需要在这些脚本标记之后放置任何相关代码。

您目前正在尝试在加载jQuery库之前编译依赖于jQuery的代码。

将所有自己的代码放在外部文件标记

之后

Answer 2

脚本文件声明需要在引用它们的代码之前。

考虑以下格式，我将其用于所有项目：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Testing Page</title>
        <script type="text/javascript" src="js/jquery-1.10.2.js"></script>
    </head>
<body>

    <div id="example">
        Blah blah blah
    </div>

<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {

    //do all of your jQuery/Datatables stuff in here
    alert('Woo hoo!');

});
/*]]>*/
</script>

</body>
</html>

当<script>放在文件末尾</script>时，DataTables不起作用

2 个答案: