Получить столбец таблицы данных - PullRequest
0 голосов
/ 10 октября 2019

Я построил простую таблицу с использованием DataTables (html + Jquery) (точнее - я импортировал таблицу) Я пытаюсь добавить такие функции, как:

  1. Разрешить пользователю выбирать, какие столбцы они хотятчтобы увидеть (переключить отображение / скрытие в столбце)
  2. Добавить поиск по определенному столбцу (который будет искать только определенный столбец)
  3. Добавить в поиск возможность ввести слово в ""и тогда он будет искать точно то же слово, а не слова, которые содержат слово в поиске

В настоящее время я пытаюсь реализовать первый этап и столкнулся с проблемой, которая звучит просто, как я могуиспользовать столбец таблицы?

В документации DataTables они должны использовать table.column (номер столбца)) Но такой функции нет в: $ ("# dtBasicExample")

Или вtable переменная, которую я создал в скрипте Jquery ...

Как получить доступ к таблице на уровне столбца?

Моя таблица:

 <table id="dtBasicExample" class="table table-striped table-bordered table-sm table-hover" cellspacing="0" width="100%">

    <!-- Here is the check box option of what the table should show -->
    <div class="form-check-inline py-5">
      <label class="form-check-label">
        <input type="checkbox" class="form-check-input" value="Name" id="acheck">Option 1
      </label>
    </div>
    <div class="form-check-inline">
      <label class="form-check-label">
        <input type="checkbox" class="form-check-input" value="Position">Option 2
      </label>
    </div>
    <div class="form-check-inline">
      <label class="form-check-label">
        <input type="checkbox" class="form-check-input" value="Office"> Option 3
      </label>
    </div>

   <!-- Here is the actual table -->
  <thead>
    <tr>
      <th class="th-sm " data-switchable="false" id="Name" scope="col">Name
      </th>
      <th class="th-sm" data-switchable="true">Position
      </th>
      <th class="th-sm">Office
      </th>
      <th class="th-sm">Age
      </th>
      <th class="th-sm">Start date
      </th>
      <th class="th-sm">Salary
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class='clickable-row' data-href='url://www.google.com' >
      <td id="Name">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 id="Name">Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
    <tr class='clickable-row' data-href='url:www.google.com'>
      <td id="Name">Michael Bruce</td>
      <td>Javascript Developer</td>
      <td>Singapore</td>
      <td>29</td>
      <td>2011/06/27</td>
      <td>$183,000</td>
    </tr>
    <tr onclick="document.location = '#';">
      <td id="Name">Donna Snider</td>
      <td>Customer Support</td>
      <td>New York</td>
      <td>27</td>
      <td>2011/01/25</td>
      <td>$112,000</td>
    </tr>
  </tbody>
</table>

Мои js:

{% block js %}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.20/af-2.3.4/b-1.6.0/b-colvis-1.6.0/b-flash-1.6.0/b-html5-1.6.0/b-print-1.6.0/cr-1.5.2/fc-3.3.0/fh-3.1.6/kt-2.5.1/r-2.2.3/rg-1.1.1/rr-1.2.6/sc-2.0.1/sl-1.3.1/datatables.min.js"></script>

<script>
    $(document).ready(function () {
        var table =  $('#dtBasicExample').DataTable();
        $('.dataTables_length').addClass('bs-select');
    });
</script>


{% endblock js %}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...