index.jsp中DataTables无法为填充表格设置样式的排查记录

环境 #

• Java 1.8
• DataTables 2.3.5
• Bootstrap 3.4.1

问题 #

index.jsp页面内，DataTables无法为已填充数据的表格应用样式。

排查处理 #

将index.jsp精简至最简结构并关闭本地style.css后，样式恢复正常。后续将逐步添加原有内容，定位问题根源。

最简可运行代码 #

<!DOCTYPE html lang="en">
<%@ page language="java" contentType="text/html" pageEncoding="UTF-8" %>
<%@ taglib prefix="c"      uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn"     uri="http://java.sun.com/jsp/jstl/functions" %>        
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form"   uri="http://www.springframework.org/tags/form" %>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">                                                                                                                                                                                     
    <script type="text/javascript"          src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script type="text/javascript"          src="https://cdn.datatables.net/2.3.5/js/dataTables.js"></script>
    <script type="text/javascript"          src="https://cdn.datatables.net/buttons/3.2.5/js/dataTables.buttons.js"></script>
    <script type="text/javascript"          src="https://cdn.datatables.net/buttons/3.2.5/js/buttons.dataTables.js"></script>
    <script type="text/javascript"          src="https://cdn.datatables.net/select/3.1.3/js/dataTables.select.js"></script>
    <script type="text/javascript"          src="https://cdn.datatables.net/select/3.1.3/js/select.dataTables.js"></script>
    <script type="text/javascript"          src="https://cdn.datatables.net/datetime/1.6.1/js/dataTables.dateTime.min.js"></script>

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.3.5/css/dataTables.dataTables.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/3.2.5/css/buttons.dataTables.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/3.1.3/css/select.dataTables.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/datetime/1.6.1/css/dataTables.dateTime.min.css">
</head>
<body>
  <table id="night_table" class="display">
    <thead>
      <tr>
        <th>name</th>
        <th>position</th>
        <th>salary</th>
        <th>start_date</th>
        <th>office</th>
        <th>extn</th>
      </tr>
    </thead>
  </table>
  <script type="text/javascript">

      new DataTable('#night_table', {
          data: [[ 'Tiger Nixon', 'System Architect', '$3,120', '2011/04/25', 'Edinburgh', 5421]
                ,['Garrett Winters', 'Director', '$8,422', '2011/07/25', 'Edinburgh', 8422]]
      });
  </script>
  </body>
</html>

内容的提问来源于stack exchange，提问作者code_warrior