title: data table fixed header
body: <p>i cant make work fixed header in data table</p>
  <p>js</p>
  <pre><code>&lt;script src=&quot;https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>css</p>
  <pre><code>&lt;link href=&quot;https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css&quot; rel=&quot;stylesheet&quot; crossorigin=&quot;anonymous&quot; /&gt;
  &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;https://cdn.datatables.net/fixedheader/3.1.8/css/fixedHeader.dataTables.min.css&quot;&gt;
  </code></pre>
  <p>script</p>
  <pre><code>$(document).ready(function() {
      $('#dataTable').DataTable(
          {
  
              &quot;paging&quot;: false,
              &quot;fixedHeader&quot;: true,
              &quot;bDestroy&quot;: true,
          }
      );
  });
  </code></pre>
  <p>missing something ?</p>
  <pre><code>{% load static %}
  
  &lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
      &lt;head&gt;
          &lt;meta charset=&quot;utf-8&quot; /&gt;
          &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot; /&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot; /&gt;
          &lt;meta name=&quot;description&quot; content=&quot;battery managament&quot; /&gt;
          &lt;meta name=&quot;author&quot; content=&quot;mar24n&quot; /&gt;
          &lt;title&gt;Dashboard - Battery&lt;/title&gt;
  
  
          &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;https://cdn.datatables.net/v/dt/dt-1.10.23/b-1.6.5/b-print-1.6.5/fh-3.1.8/datatables.min.css&quot;/&gt;
          &lt;link href=&quot;{% static 'css/styles.css'%}&quot; rel=&quot;stylesheet&quot;/&gt;
  
           &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;https://cdn.datatables.net/fixedheader/3.1.8/css/fixedHeader.dataTables.min.css&quot;&gt;
  
  
  
          &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body class=&quot;sb-nav-fixed&quot;&gt;
          &lt;div id=&quot;layoutSidenav&quot;&gt;
              &lt;div id=&quot;layoutSidenav_content&quot;&gt;
  
  
  
                  {% block content %}{% endblock %}
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  
  &lt;/html&gt;
  
  &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot; integrity=&quot;sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot; src=&quot;https://cdn.datatables.net/v/dt/dt-1.10.23/fh-3.1.8/datatables.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;{% static 'js/scripts.js' %}&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;{% static 'assets/demo/chart-area-demo.js' %}&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;{% static 'assets/demo/chart-bar-demo.js' %}&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  
  
  &lt;script src=&quot;https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  
  &lt;script src=&quot;{% static 'assets/demo/datatables-demo.js' %}&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;{% static 'js/plugin.js' %}&quot;&gt;&lt;/script&gt;
  
  &lt;script&gt;
  const message_ele = document.getElementById(&quot;message_id&quot;);
  
  setTimeout(function(){
  message_ele.style.display = &quot;none&quot;;
  }, 3000);
  &lt;/script&gt;
  
  &lt;script&gt;
  $(document).ready(function() {
      $('#dataTable').DataTable(
          {
  
              &quot;paging&quot;: false,
              &quot;fixedHeader&quot;: true,
              &quot;bDestroy&quot;: true,
          }
      );
  });
  &lt;/script&gt;
  </code></pre>
  <p>table content</p>
  <pre><code>{% load static %}
  
  {% block content %}
  
      {% include 'main/navbar.html' %}
      {% include 'main/sidenav.html' %}
  
  &lt;main&gt;
      &lt;div class=&quot;container-fluid&quot;&gt;
          &lt;h1 class=&quot;mt-4&quot;&gt;Modules&lt;/h1&gt;
          &lt;ol class=&quot;breadcrumb mb-4&quot;&gt;
              &lt;div id=&quot;total_modules&quot;&gt;
              {% include 'main/total_modules.html' %}
              &lt;/div&gt;
          &lt;/ol&gt;
  
  
          &lt;div class=&quot;card mb-4&quot;&gt;
  
              &lt;div class=&quot;card-header&quot;&gt;
                  &lt;div class=&quot;row&quot;&gt;
                  &lt;button type=&quot;button&quot; class=&quot;btn btn-success show-form&quot;&gt;Add Module&lt;/button&gt;
                      &lt;a class=&quot;col-xl-1&quot;&gt;&lt;/a&gt;
                  &lt;button type=&quot;button&quot; class=&quot;col-xl-1 btn btn-success btn-block show-test-form&quot;&gt;New Test&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
              &lt;div class=&quot;card-body&quot;&gt;
                  &lt;div&gt;
                      &lt;table id=&quot;dataTable&quot; width=&quot;100%&quot; class=&quot;display nowrap table-bordered table-striped&quot; &gt;
                          &lt;thead&gt;
                              &lt;tr&gt;
                                  &lt;th&gt;Car&lt;/th&gt;
                                  &lt;th&gt;Serial Number&lt;/th&gt;
                                  &lt;th&gt;Date&lt;/th&gt;
                                  &lt;th&gt;Batch&lt;/th&gt;
                                  &lt;th&gt;Status&lt;/th&gt;
                                  &lt;th&gt;Last Test&lt;/th&gt;
                                  &lt;th&gt;Details&lt;/th&gt;
                                  &lt;th&gt;Added&lt;/th&gt;
                              &lt;/tr&gt;
                          &lt;/thead&gt;
                          &lt;tbody&gt;
                              {% for module in modules_list %}
                                  {% with latest_test=module.get_latest_test %}
                                  &lt;tr&gt;
                                      &lt;td&gt;{{ module.car }}&lt;/td&gt;
                                      &lt;td&gt;{{ module.serial_number }}&lt;/td&gt;
                                      &lt;td&gt;{{ module.day }} {{ module.mon }} {{ module.year1 }}&lt;/td&gt;
                                      &lt;td&gt;{{ module.batch }}&lt;/td&gt;
                                      &lt;td&gt;{{ latest_test.cap|stringformat:&quot;.2f&quot; }} %&lt;/td&gt;
                                      &lt;td&gt;{{ latest_test.added_at|date:'d M Y H:i' }}&lt;/td&gt;
  
                                      &lt;td&gt;&lt;a style=&quot;font-weight: bolder;&quot; class=&quot;btn btn-secondary&quot; href=&quot;{% url 'module_details' module.pk %}&quot;&gt;Details&lt;/a&gt; &lt;/td&gt;
                                      &lt;td&gt;{{ module.added_at|date:'d M Y H:i' }}&lt;/td&gt;
                                  &lt;/tr&gt;
                                  {% endwith %}
                              {% endfor %}
                          &lt;/tbody&gt;
                      &lt;/table&gt;
                      &lt;div&gt;
  
                      &lt;/div&gt;
                  &lt;div class=&quot;modal fade&quot; id=&quot;modal-book&quot; data-backdrop=&quot;static&quot; data-keboard=&quot;false&quot;&gt;
                      &lt;div class=&quot;modal-dialog&quot;&gt;
                          &lt;div class=&quot;modal-content&quot;&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                      &lt;div class=&quot;modal fade&quot; id=&quot;modal-test&quot; data-backdrop=&quot;static&quot; data-keboard=&quot;false&quot;&gt;
                      &lt;div class=&quot;modal-dialog&quot;&gt;
                          &lt;div class=&quot;modal-content&quot;&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/main&gt;
  
  
      {% include 'main/footer.html' %}
  
  {% endblock %}
  </code></pre>