Как создать таблицу с флажком в каждой строке и можно выбрать все, что я с помощью datatables и начальной загрузки

$(document).ready(function() {
$("#example1").DataTable();
});
select All
<input type="checkbox" name="all"> <br>
<table id="example1" class="display table table-bordered table-striped" width="100%">
<thead>
<tr style="background-color: rgba(60, 141, 188, 0.5);">
<th>Finger Id</th>
<th>NIK</th>
<th>Nama Staff</th>
<th>Departement</th>
<th>Jabatan</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr style="background-color: rgba(60, 141, 188, 0.5);">
<td>Finger Id</td>
<td>NIK</td>
<td>Nama Staff</td>
<td>Departement</td>
<td>Jabatan</td>
<td><input type="checkbox"></td>
</tr>
<tr style="background-color: rgba(60, 141, 188, 0.5);">
<td>Finger Id</td>
<td>NIK</td>
<td>Nama Staff</td>
<td>Departement</td>
<td>Jabatan</td>
<td><input type="checkbox"></td>
</tr>
<tr style="background-color: rgba(60, 141, 188, 0.5);">
<td>Finger Id</td>
<td>NIK</td>
<td>Nama Staff</td>
<td>Departement</td>
<td>Jabatan</td>
<td><input type="checkbox"></td>
</tr>
<tr style="background-color: rgba(60, 141, 188, 0.5);">
<td>Finger Id</td>
<td>NIK</td>
<td>Nama Staff</td>
<td>Departement</td>
<td>Jabatan</td>
<td><input type="checkbox"></td>
</tr>
<tr style="background-color: rgba(60, 141, 188, 0.5);">
<td>Finger Id</td>
<td>NIK</td>
<td>Nama Staff</td>
<td>Departement</td>
<td>Jabatan</td>
<td><input type="checkbox"></td>
</tr>
<tr style="background-color: rgba(60, 141, 188, 0.5);">
<td>Finger Id</td>
<td>NIK</td>
<td>Nama Staff</td>
<td>Departement</td>
<td>Jabatan</td>
<td><input type="checkbox"></td>
</tr>
<tr style="background-color: rgba(60, 141, 188, 0.5);">
<td>Finger Id</td>
<td>NIK</td>
<td>Nama Staff</td>
<td>Departement</td>
<td>Jabatan</td>
<td><input type="checkbox"></td>
</tr>
<tr style="background-color: rgba(60, 141, 188, 0.5);">
<td>Finger Id</td>
<td>NIK</td>
<td>Nama Staff</td>
<td>Departement</td>
<td>Jabatan</td>
<td><input type="checkbox"></td>
</tr>
<tr style="background-color: rgba(60, 141, 188, 0.5);">
<td>Finger Id</td>
<td>NIK</td>
<td>Nama Staff</td>
<td>Departement</td>
<td>Jabatan</td>
<td><input type="checkbox"></td>
</tr>
</tbody>
</table>

-2

Решение

то, что я сделал, называется все ваши флажки name="selectThis" а также selectAll(this) в <input type="checkbox" name="all" onClick="selectAll(this)" в выберите все вход

Затем, когда выбрано все флажок установлен selectAll(this) функция вызывается, и она зацикливает все остальные флажки и проверяет ее

function selectAll(data) {
checkboxes = document.getElementsByName('selectThis');
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = data.checked;
}
}
select All
<input type="checkbox" name="all" onClick="selectAll(this)"> <br>
<table id="example1" class="display table table-bordered table-striped" width="100%">
<thead>
<tr style="background-color: rgba(60, 141, 188, 0.5);">
<th>Finger Id</th>
<th>NIK</th>
<th>Nama Staff</th>
<th>Departement</th>
<th>Jabatan</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr style="background-color: rgba(60, 141, 188, 0.5);">
<td>Finger Id</td>
<td>NIK</td>
<td>Nama Staff</td>
<td>Departement</td>
<td>Jabatan</td>
<td><input type="checkbox" name="selectThis"></td>
</tr>
<tr style="background-color: rgba(60, 141, 188, 0.5);">
<td>Finger Id</td>
<td>NIK</td>
<td>Nama Staff</td>
<td>Departement</td>
<td>Jabatan</td>
<td><input type="checkbox" name="selectThis"></td>
</tr>
<tr style="background-color: rgba(60, 141, 188, 0.5);">
<td>Finger Id</td>
<td>NIK</td>
<td>Nama Staff</td>
<td>Departement</td>
<td>Jabatan</td>
<td><input type="checkbox" name="selectThis"></td>
</tr>
<tr style="background-color: rgba(60, 141, 188, 0.5);">
<td>Finger Id</td>
<td>NIK</td>
<td>Nama Staff</td>
<td>Departement</td>
<td>Jabatan</td>
<td><input type="checkbox" name="selectThis"></td>
</tr>
<tr style="background-color: rgba(60, 141, 188, 0.5);">
<td>Finger Id</td>
<td>NIK</td>
<td>Nama Staff</td>
<td>Departement</td>
<td>Jabatan</td>
<td><input type="checkbox" name="selectThis"></td>
</tr>
<tr style="background-color: rgba(60, 141, 188, 0.5);">
<td>Finger Id</td>
<td>NIK</td>
<td>Nama Staff</td>
<td>Departement</td>
<td>Jabatan</td>
<td><input type="checkbox" name="selectThis"></td>
</tr>
<tr style="background-color: rgba(60, 141, 188, 0.5);">
<td>Finger Id</td>
<td>NIK</td>
<td>Nama Staff</td>
<td>Departement</td>
<td>Jabatan</td>
<td><input type="checkbox" name="selectThis"></td>
</tr>
<tr style="background-color: rgba(60, 141, 188, 0.5);">
<td>Finger Id</td>
<td>NIK</td>
<td>Nama Staff</td>
<td>Departement</td>
<td>Jabatan</td>
<td><input type="checkbox" name="selectThis"></td>
</tr>
<tr style="background-color: rgba(60, 141, 188, 0.5);">
<td>Finger Id</td>
<td>NIK</td>
<td>Nama Staff</td>
<td>Departement</td>
<td>Jabatan</td>
<td><input type="checkbox" name="selectThis"></td>
</tr>
</tbody>
</table>
0

Другие решения

Других решений пока нет …

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector