Блог

Главная - Вопросы по программированию - Как мне заставить таблицы данных работать с вкладками bootstrap4 в шаблонах Django?

Как мне заставить таблицы данных работать с вкладками bootstrap4 в шаблонах Django?

#jquery #django #bootstrap-4 #datatables #django-templates

#jquery #django #bootstrap-4 #таблицы данных #django-templates

Вопрос:

У меня есть шаблон Django с несколькими таблицами. Я использую Bootstrap 4 с таблицами данных. Я хотел поместить свои таблицы во вкладки, и это вызывает у меня проблемы. Если таблицы не находятся на вкладках, этот код работает нормально:

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

Я просмотрел эти две ссылки: вкладки прокрутки и начальной загрузки и скрытая инициализация. И получил фрагмент внизу этого сообщения для работы в качестве блоков данных (хотя в Django есть проблемы с шириной таблицы).

Однако этот фрагмент работает только с жестко запрограммированными таблицами. В моем шаблоне Django я использую теги шаблонов для перебора строк запроса, подобных этому:

     {% 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 %}

В Django, использующем пример сниппета, если я заменяю жестко запрограммированную таблицу первой вкладки этим шаблоном для цикла, таблица данных работает только для первой вкладки (т. Е. Без параметров, разбивки на страницы, поиска …). То же самое произойдет, если я заменю жестко закодированные таблицы первой и второй вкладок двумя разными (но похожими) циклами for . Если я заменю жестко запрограммированные таблицы первой и второй вкладок одним и тем же шаблоном для цикла, таблицы будут работать как блоки данных на первой, второй и третьей вкладках (хотя ширина таблицы неправильная — полная ширина только на первой вкладке).

Я опубликовал этот вопрос ранее, но в то время не понимал, что проблема заключалась только в теге шаблона для циклов. Я не могу поместить шаблон Django во фрагмент, но у меня есть точный код, работающий в шаблоне Django с жестко запрограммированными таблицами и завершающийся сбоем, как описано в циклах шаблонов.

Спасибо за любые мысли или предложения—

Al

Я переместил фрагмент сюда для лучшей читаемости:

 $(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

Комментарии:

1. В вашем шаблоне django вы пытались присвоить своим таблицам уникальные идентификаторы? <table class="table table-striped table-valign-middle datatable" id="data_table_{{forloop.counter}}">

Ответ №1:

Я думаю, это может решить вашу проблему. Я заменил data-toggle="pill" на data-toggle="tab" модифицированный ваш javascript, чтобы уничтожить и повторно инициализировать таблицы данных после изменения вкладки.

Пожалуйста, смотрите ниже.

 $(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-->

Метки: