当<script>'s放在文件末尾时，数据表不起作用

DataTables doesn't work when <script>'s are placed at the end of file

本文关键字：数据表 不起作用 文件 script      更新时间：2023-09-26

我正在使用数据表(http://www.datatables.net/)。

我正在使用下面的代码，但数据表似乎没有初始化。我可以把<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>

如果您在body的底部加载脚本标记，您还需要在这些脚本标记之后放置任何依赖代码。

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

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

之后

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

考虑下面的格式，我在我所有的项目中使用:

<!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>
相关文章：