Я построил простую таблицу с использованием DataTables (html + Jquery) (точнее - я импортировал таблицу) Я пытаюсь добавить такие функции, как:
- Разрешить пользователю выбирать, какие столбцы они хотятчтобы увидеть (переключить отображение / скрытие в столбце)
- Добавить поиск по определенному столбцу (который будет искать только определенный столбец)
- Добавить в поиск возможность ввести слово в ""и тогда он будет искать точно то же слово, а не слова, которые содержат слово в поиске
В настоящее время я пытаюсь реализовать первый этап и столкнулся с проблемой, которая звучит просто, как я могуиспользовать столбец таблицы?
В документации 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 %}