title: How do I get datatables to work with bootstrap4 tabs in Django templates?
body: <p>I have a Django template with multiple tables.  I am using Bootstrap 4 with datatables.  I wanted to put my tables in tabs, and that is giving me problems.  If the tables are not in tabs, this code works fine:</p>
  <pre><code>    $(document).ready(function() {
        $('.datatable').DataTable( {
            dom: 'Blfrtip',
            buttons: [
                'copy', 'csv', 'excel', 'print'
            ]
        } );
    } );
  </code></pre>
  <p>I looked at these two links: <a href="https://datatables.net/examples/api/tabs_and_scrolling.html" rel="nofollow noreferrer">Scrolling and Bootstrap tabs</a> and <a href="https://datatables.net/extensions/buttons/examples/flash/hidden" rel="nofollow noreferrer">Hidden initialisation</a>. And got the snippet at the bottom of this post to work as datables (though the table widths have issues in Django).</p>
  <p>However, that snippet only works with hard-coded tables.  In my Django template, I am using template tags to loop through query strings like this:</p>
  <pre><code>    {% if items %}
      &lt;table class=&quot;table table-striped table-valign-middle datatable&quot; id=&quot;data&quot;&gt;
          &lt;th&gt;Item Table&lt;/th&gt;
           &lt;thead&gt;
           &lt;tr&gt;
              &lt;th&gt;Title&lt;/th&gt;
              &lt;th&gt;Price&lt;/th&gt;
              &lt;th&gt;Date&lt;/th&gt;
          &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
          {% for item in items %}
              &lt;tr&gt;
                  &lt;td&gt;{{ item.item.title|truncatechars:25 }}&lt;/td&gt;
                  &lt;td&gt;{{ item.price }}&lt;/td&gt;
                  &lt;td&gt;{{ item.date }}&lt;/td&gt;
              &lt;/tr&gt;
          {% endfor %}
          &lt;/tbody&gt;
      &lt;/table&gt;
      {% else %}
          &lt;div class=&quot;text-center font-weight-bold&quot;&gt;
              No items
          &lt;/div&gt;
      {% endif %}
  </code></pre>
  <p>In Django using the snippet example, if I replace the first tab's hard coded table with that template for loop, the datatable only works for the first tab (i.e., no options, pagination, search...).  The same happens if I replace both the first and second tabs' hard coded tables with two different (but similar) for loops. If I replace the first and second tab's hard coded tables with the <strong>same</strong> template for loop, the tables work as datables in the first, second, and third tabs (though the table widths are wrong--full width only on the first tab).</p>
  <p>I posted this question earlier, but at the time didn't realize the problem was just with the template tag for loops.  I can't put the Django template in the snippet, but I have this exact code working in a Django template with the hard coded tables and failing as described with the template loops.</p>
  <p>Thanks for any thoughts or suggestions--</p>
  <p>Al</p>
  <p>I've moved the snippet down here for better readability:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function () {
      $('.datatable').DataTable({
          responsive: true,
          dom: 'Blfrtip',
                buttons: [
                    'copy', 'csv', 'excel', 'print'
                ]
      });
  
      $('a[data-toggle="pill"]').on('shown.bs.pill', function (e) {
          $($.fn.dataTable.tables(true)).DataTable()
             .columns.adjust()
             .responsive.recalc();
      });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.datatables.net/v/bs4-4.1.1/jszip-2.5.0/dt-1.10.22/b-1.6.5/b-html5-1.6.5/b-print-1.6.5/r-2.2.6/datatables.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdn.datatables.net/v/bs4-4.1.1/jszip-2.5.0/dt-1.10.22/b-1.6.5/b-html5-1.6.5/b-print-1.6.5/r-2.2.6/datatables.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"&gt;&lt;/script&gt;
  
                         -&lt;div class="container-fluid"&gt; &lt;!-- start --&gt;
            &lt;div class="card card-info card-tabs"&gt;
                              &lt;div class="card-header p-0 pt-1 font-weight-bold" style="background: #98e48e"&gt;
                                  &lt;ul class="nav nav-tabs nav-fill" id="custom-tabs-tab" role="tablist"&gt;
                                      &lt;li class="nav-item"&gt;
                                          &lt;a class="nav-link active" id="custom-tabs-tabone-tab" data-toggle="pill" href="#custom-tabs-tabone" role="tab" aria-controls="custom-tabs-tabone" aria-selected="true" style="color:black"&gt;First&lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li class="nav-item"&gt;
                                          &lt;a class="nav-link" id="custom-tabs-tabtwo-tab" data-toggle="pill" href="#custom-tabs-tabtwo" role="tab" aria-controls="custom-tabs-tabtwo" aria-selected="false" style="color:black"&gt;Second&lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li class="nav-item"&gt;
                                          &lt;a class="nav-link" id="custom-tabs-tabthree-tab" data-toggle="pill" href="#custom-tabs-tabthree" role="tab" aria-controls="custom-tabs-tabthree" aria-selected="false" style="color:black"&gt;Third&lt;/a&gt;
                                      &lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/div&gt;
                              &lt;div class="card-body"&gt;
                                  &lt;div class="tab-content" id="custom-tabs-tabContent"&gt;
                                      &lt;div class="tab-pane fade active show" id="custom-tabs-tabone" role="tabpanel" aria-labelledby="custom-tabs-tabone-tab"&gt;
  &lt;table class="table table-striped table-valign-middle datatable"&gt;
  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Name&lt;/th&gt;
                          &lt;th&gt;Position&lt;/th&gt;
                          &lt;th&gt;Office&lt;/th&gt;
                          &lt;th&gt;Age&lt;/th&gt;
                          &lt;th&gt;Start date&lt;/th&gt;
                          &lt;th&gt;Salary&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Tiger Nixon&lt;/td&gt;
                          &lt;td&gt;System Architect&lt;/td&gt;
                          &lt;td&gt;Edinburgh&lt;/td&gt;
                          &lt;td&gt;61&lt;/td&gt;
                          &lt;td&gt;2011/04/25&lt;/td&gt;
                          &lt;td&gt;$320,800&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Garrett Winters&lt;/td&gt;
                          &lt;td&gt;Accountant&lt;/td&gt;
                          &lt;td&gt;Tokyo&lt;/td&gt;
                          &lt;td&gt;63&lt;/td&gt;
                          &lt;td&gt;2011/07/25&lt;/td&gt;
                          &lt;td&gt;$170,750&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Ashton Cox&lt;/td&gt;
                          &lt;td&gt;Junior Technical Author&lt;/td&gt;
                          &lt;td&gt;San Francisco&lt;/td&gt;
                          &lt;td&gt;66&lt;/td&gt;
                          &lt;td&gt;2009/01/12&lt;/td&gt;
                          &lt;td&gt;$86,000&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
                                      &lt;/div&gt;
                                      &lt;div class="tab-pane fade" id="custom-tabs-tabtwo" role="tabpanel" aria-labelledby="custom-tabs-tabtwo-tab"&gt;
  &lt;table class="table table-striped table-valign-middle datatable"&gt;
  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Name&lt;/th&gt;
                          &lt;th&gt;Position&lt;/th&gt;
                          &lt;th&gt;Office&lt;/th&gt;
                          &lt;th&gt;Age&lt;/th&gt;
                          &lt;th&gt;Start date&lt;/th&gt;
                          &lt;th&gt;Salary&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      &lt;tr&gt;
                          &lt;td&gt;George Nixon&lt;/td&gt;
                          &lt;td&gt;System Architect&lt;/td&gt;
                          &lt;td&gt;Edinburgh&lt;/td&gt;
                          &lt;td&gt;61&lt;/td&gt;
                          &lt;td&gt;2011/04/25&lt;/td&gt;
                          &lt;td&gt;$320,800&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Garrett Winters&lt;/td&gt;
                          &lt;td&gt;Accountant&lt;/td&gt;
                          &lt;td&gt;Tokyo&lt;/td&gt;
                          &lt;td&gt;63&lt;/td&gt;
                          &lt;td&gt;2011/07/25&lt;/td&gt;
                          &lt;td&gt;$170,750&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Ashton Cox&lt;/td&gt;
                          &lt;td&gt;Junior Technical Author&lt;/td&gt;
                          &lt;td&gt;San Francisco&lt;/td&gt;
                          &lt;td&gt;66&lt;/td&gt;
                          &lt;td&gt;2009/01/12&lt;/td&gt;
                          &lt;td&gt;$86,000&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
                                      &lt;/div&gt;
                                      &lt;div class="tab-pane fade" id="custom-tabs-tabthree" role="tabpanel" aria-labelledby="custom-tabs-tabthree-tab"&gt;
  &lt;table class="table table-striped table-valign-middle datatable"&gt;
  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Name&lt;/th&gt;
                          &lt;th&gt;Position&lt;/th&gt;
                          &lt;th&gt;Office&lt;/th&gt;
                          &lt;th&gt;Age&lt;/th&gt;
                          &lt;th&gt;Start date&lt;/th&gt;
                          &lt;th&gt;Salary&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Beatrice Nixon&lt;/td&gt;
                          &lt;td&gt;System Architect&lt;/td&gt;
                          &lt;td&gt;Edinburgh&lt;/td&gt;
                          &lt;td&gt;61&lt;/td&gt;
                          &lt;td&gt;2011/04/25&lt;/td&gt;
                          &lt;td&gt;$320,800&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Garrett Winters&lt;/td&gt;
                          &lt;td&gt;Accountant&lt;/td&gt;
                          &lt;td&gt;Tokyo&lt;/td&gt;
                          &lt;td&gt;63&lt;/td&gt;
                          &lt;td&gt;2011/07/25&lt;/td&gt;
                          &lt;td&gt;$170,750&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Ashton Cox&lt;/td&gt;
                          &lt;td&gt;Junior Technical Author&lt;/td&gt;
                          &lt;td&gt;San Francisco&lt;/td&gt;
                          &lt;td&gt;66&lt;/td&gt;
                          &lt;td&gt;2009/01/12&lt;/td&gt;
                          &lt;td&gt;$86,000&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
                  &lt;/div&gt;
                  &lt;!-- /.card --&gt;
              &lt;/div&gt;
    &lt;/div&gt;&lt;!-- /.content-wrapper end--&gt;
  Return to post</code></pre>
  </div>
  </div>
  </p>