How do I get datatables to work with bootstrap4 tabs in Django templates?

user_7117841 0
Viewed 350

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:

    $(document).ready(function() {
      $('.datatable').DataTable( {
          dom: 'Blfrtip',
          buttons: [
              'copy', 'csv', 'excel', 'print'
          ]
      } );
  } );

I looked at these two links: Scrolling and Bootstrap tabs and Hidden initialisation. And got the snippet at the bottom of this post to work as datables (though the table widths have issues in Django).

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:

    {% if items %}
    <table class="table table-striped table-valign-middle datatable" id="data">
        <th>Item Table</th>
         <thead>
         <tr>
            <th>Title</th>
            <th>Price</th>
            <th>Date</th>
        </tr>
        </thead>
        <tbody>
        {% for item in items %}
            <tr>
                <td>{{ item.item.title|truncatechars:25 }}</td>
                <td>{{ item.price }}</td>
                <td>{{ item.date }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    {% else %}
        <div class="text-center font-weight-bold">
            No items
        </div>
    {% endif %}

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 same 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).

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.

Thanks for any thoughts or suggestions--

Al

I've moved the snippet down here for better readability:

$(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();
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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"></script>
<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"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>

                       -<div class="container-fluid"> <!-- start -->
          <div class="card card-info card-tabs">
                            <div class="card-header p-0 pt-1 font-weight-bold" style="background: #98e48e">
                                <ul class="nav nav-tabs nav-fill" id="custom-tabs-tab" role="tablist">
                                    <li class="nav-item">
                                        <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">First</a>
                                    </li>
                                    <li class="nav-item">
                                        <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">Second</a>
                                    </li>
                                    <li class="nav-item">
                                        <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">Third</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="card-body">
                                <div class="tab-content" id="custom-tabs-tabContent">
                                    <div class="tab-pane fade active show" id="custom-tabs-tabone" role="tabpanel" aria-labelledby="custom-tabs-tabone-tab">
<table class="table table-striped table-valign-middle datatable">
<thead>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Tiger Nixon</td>
                        <td>System Architect</td>
                        <td>Edinburgh</td>
                        <td>61</td>
                        <td>2011/04/25</td>
                        <td>$320,800</td>
                    </tr>
                    <tr>
                        <td>Garrett Winters</td>
                        <td>Accountant</td>
                        <td>Tokyo</td>
                        <td>63</td>
                        <td>2011/07/25</td>
                        <td>$170,750</td>
                    </tr>
                    <tr>
                        <td>Ashton Cox</td>
                        <td>Junior Technical Author</td>
                        <td>San Francisco</td>
                        <td>66</td>
                        <td>2009/01/12</td>
                        <td>$86,000</td>
                    </tr>
                </tbody>
            </table>
                                    </div>
                                    <div class="tab-pane fade" id="custom-tabs-tabtwo" role="tabpanel" aria-labelledby="custom-tabs-tabtwo-tab">
<table class="table table-striped table-valign-middle datatable">
<thead>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>George Nixon</td>
                        <td>System Architect</td>
                        <td>Edinburgh</td>
                        <td>61</td>
                        <td>2011/04/25</td>
                        <td>$320,800</td>
                    </tr>
                    <tr>
                        <td>Garrett Winters</td>
                        <td>Accountant</td>
                        <td>Tokyo</td>
                        <td>63</td>
                        <td>2011/07/25</td>
                        <td>$170,750</td>
                    </tr>
                    <tr>
                        <td>Ashton Cox</td>
                        <td>Junior Technical Author</td>
                        <td>San Francisco</td>
                        <td>66</td>
                        <td>2009/01/12</td>
                        <td>$86,000</td>
                    </tr>
                </tbody>
            </table>
                                    </div>
                                    <div class="tab-pane fade" id="custom-tabs-tabthree" role="tabpanel" aria-labelledby="custom-tabs-tabthree-tab">
<table class="table table-striped table-valign-middle datatable">
<thead>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Beatrice Nixon</td>
                        <td>System Architect</td>
                        <td>Edinburgh</td>
                        <td>61</td>
                        <td>2011/04/25</td>
                        <td>$320,800</td>
                    </tr>
                    <tr>
                        <td>Garrett Winters</td>
                        <td>Accountant</td>
                        <td>Tokyo</td>
                        <td>63</td>
                        <td>2011/07/25</td>
                        <td>$170,750</td>
                    </tr>
                    <tr>
                        <td>Ashton Cox</td>
                        <td>Junior Technical Author</td>
                        <td>San Francisco</td>
                        <td>66</td>
                        <td>2009/01/12</td>
                        <td>$86,000</td>
                    </tr>
                </tbody>
            </table>
                </div>
                <!-- /.card -->
            </div>
  </div><!-- /.content-wrapper end-->
Return to post

bootstrap-4 datatables django-templates django jquery
1 Answers

I think this might solve your issue. I have replaced the data-toggle="pill" with data-toggle="tab" modified your javascript to destroy and reinitialize data tables once the tab has changed.

Please see below.

$(document).ready(function() {

  // Shared data table options.
  var dataTableOptions = {
    responsive: true,
    dom: 'Blfrtip',
    buttons: [
      'copy', 'csv', 'excel', 'print'
    ]
  };

  // Initialize on load.
  $('.datatable').DataTable(dataTableOptions);

  // Destroy and reinitialize table on tab change.
  $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    var tabTarget = $(this).attr('href'); // #tab-id-value
    var $table = $(tabTarget).find('.datatable'); // Find data table.

    // If the data table has already been initialized, destroy it.
    if ($.fn.DataTable.isDataTable($table)) {
      $table.DataTable().destroy();
    }

    // Reinitialize with shared options.
    $table.DataTable(dataTableOptions);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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"></script>
<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" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>

<div class="container-fluid">
  <!-- start -->
  <div class="card card-info card-tabs">
    <div class="card-header p-0 pt-1 font-weight-bold" style="background: #98e48e">
      <ul class="nav nav-tabs nav-fill" id="custom-tabs-tab" role="tablist">
        <li class="nav-item">
          <a class="nav-link active" id="custom-tabs-tabone-tab" data-toggle="tab" href="#custom-tabs-tabone" role="tab" aria-controls="custom-tabs-tabone" aria-selected="true" style="color:black">First</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="custom-tabs-tabtwo-tab" data-toggle="tab" href="#custom-tabs-tabtwo" role="tab" aria-controls="custom-tabs-tabtwo" aria-selected="false" style="color:black">Second</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="custom-tabs-tabthree-tab" data-toggle="tab" href="#custom-tabs-tabthree" role="tab" aria-controls="custom-tabs-tabthree" aria-selected="false" style="color:black">Third</a>
        </li>
      </ul>
    </div>
    <div class="card-body">
      <div class="tab-content" id="custom-tabs-tabContent">
        <div class="tab-pane fade active show" id="custom-tabs-tabone" role="tabpanel" aria-labelledby="custom-tabs-tabone-tab">
          <table class="table table-striped table-valign-middle datatable">
            <thead>
              <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
              </tr>
              <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
              </tr>
              <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="tab-pane fade" id="custom-tabs-tabtwo" role="tabpanel" aria-labelledby="custom-tabs-tabtwo-tab">
          <table class="table table-striped table-valign-middle datatable">
            <thead>
              <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>George Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
              </tr>
              <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
              </tr>
              <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="tab-pane fade" id="custom-tabs-tabthree" role="tabpanel" aria-labelledby="custom-tabs-tabthree-tab">
          <table class="table table-striped table-valign-middle datatable">
            <thead>
              <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Beatrice Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
              </tr>
              <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
              </tr>
              <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
              </tr>
            </tbody>
          </table>
        </div>
        <!-- /.card -->
      </div>
    </div>
    <!-- /.content-wrapper end-->

user_38049240
Related