Datatables Select All Checkbox
Демонстрация по выбору всего не работает. https://datatables.net/extensions/select/examples/initialisation/checkbox.html
Какой лучший способ реализовать флажок "Выбрать все" после того, как они создаются с помощью атрибутов columnDef?
Ответы
Ответ 1
Это должно сработать для вас:
let example = $('#example').DataTable({
columnDefs: [{
orderable: false,
className: 'select-checkbox',
targets: 0
}],
select: {
style: 'os',
selector: 'td:first-child'
},
order: [
[1, 'asc']
]
});
example.on("click", "th.select-checkbox", function() {
if ($("th.select-checkbox").hasClass("selected")) {
example.rows().deselect();
$("th.select-checkbox").removeClass("selected");
} else {
example.rows().select();
$("th.select-checkbox").addClass("selected");
}
}).on("select deselect", function() {
("Some selection or deselection going on")
if (example.rows({
selected: true
}).count() !== example.rows().count()) {
$("th.select-checkbox").removeClass("selected");
} else {
$("th.select-checkbox").addClass("selected");
}
});
Я добавил к CSS:
table.dataTable tr th.select-checkbox.selected::after {
content: "✔";
margin-top: -11px;
margin-left: -4px;
text-align: center;
text-shadow: rgb(176, 190, 217) 1px 1px, rgb(176, 190, 217) -1px -1px, rgb(176, 190, 217) 1px -1px, rgb(176, 190, 217) -1px 1px;
}
Работая JSFiddle, надеюсь, что это поможет.
Ответ 2
Вы можете использовать Флажки расширение для JQuery DataTables.
var table = $('#example').DataTable({
'ajax': 'https://api.myjson.com/bins/1us28',
'columnDefs': [
{
'targets': 0,
'checkboxes': {
'selectRow': true
}
}
],
'select': {
'style': 'multi'
},
'order': [[1, 'asc']]
});
См. Этот пример для кода и демонстрации.
Дополнительную информацию о примерах и документации см. на странице проекта " Флажки ".
Ответ 3
Вы можете использовать эту опцию, предоставляемую самими данными , используя кнопки.
dom: 'Bfrtip', buttons: [ 'selectAll', 'selectNone' ]'
Вот пример кода
var tableFaculty = $('#tableFaculty').DataTable({
"columns": [
{
data: function (row, type, set) {
return '';
}
},
{data: "NAME"}
],
"columnDefs": [
{
orderable: false,
className: 'select-checkbox',
targets: 0
}
],
select: {
style: 'multi',
selector: 'td:first-child'
},
dom: 'Bfrtip',
buttons: [
'selectAll',
'selectNone'
],
"order": [[0, 'desc']]
});
Ответ 4
Я сделал простую реализацию этой функциональности, используя fontawesome, также воспользовавшись преимуществами Select Extension, это охватывает выделение всех, отмена выбора некоторых элементов, отмена выбора всех. https://codepen.io/pakogn/pen/jJryLo
HTML:
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>
<button style="border: none; background: transparent; font-size: 14px;" id="MyTableCheckAllButton">
<i class="far fa-square"></i>
</button>
</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>$320,800</td>
</tr>
<tr>
<td></td>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>$170,750</td>
</tr>
<tr>
<td></td>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>$86,000</td>
</tr>
<tr>
<td></td>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>$433,060</td>
</tr>
<tr>
<td></td>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>$162,700</td>
</tr>
<tr>
<td></td>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>$372,000</td>
</tr>
<tr>
<td></td>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>$137,500</td>
</tr>
<tr>
<td></td>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>$327,900</td>
</tr>
<tr>
<td></td>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>$205,500</td>
</tr>
<tr>
<td></td>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>$103,600</td>
</tr>
<tr>
<td></td>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>$90,560</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
Javascript:
$(document).ready(function() {
let myTable = $('#example').DataTable({
columnDefs: [{
orderable: false,
className: 'select-checkbox',
targets: 0,
}],
select: {
style: 'os', // 'single', 'multi', 'os', 'multi+shift'
selector: 'td:first-child',
},
order: [
[1, 'asc'],
],
});
$('#MyTableCheckAllButton').click(function() {
if (myTable.rows({
selected: true
}).count() > 0) {
myTable.rows().deselect();
return;
}
myTable.rows().select();
});
myTable.on('select deselect', function(e, dt, type, indexes) {
if (type === 'row') {
// We may use dt instead of myTable to have the freshest data.
if (dt.rows().count() === dt.rows({
selected: true
}).count()) {
// Deselect all items button.
$('#MyTableCheckAllButton i').attr('class', 'far fa-check-square');
return;
}
if (dt.rows({
selected: true
}).count() === 0) {
// Select all items button.
$('#MyTableCheckAllButton i').attr('class', 'far fa-square');
return;
}
// Deselect some items button.
$('#MyTableCheckAllButton i').attr('class', 'far fa-minus-square');
}
});
});
Ответ 5
Основываясь на ответе Франциско Даниэля, я изменил часть кода Jquery здесь Моя версия. Я удалил лишний код и использовал "fa" вместо "far" для иконки. Я также убираю "квадрат с далекими фаами", так как не могу понять его назначение.
- Отредактировано -
Я добавил событие "рисовать" для значка кнопки, чтобы оно обновлялось при перерисовке или перезагрузке таблицы. Потому что я заметил, что при попытке перезагрузить таблицу с помощью "myTable.ajax.reload()" значок кнопки не меняется.
https://codepen.io/john-kenneth-larbo/pen/zXeYpz
$(document).ready(function() {
let myTable = $('#example').DataTable({
columnDefs: [{
orderable: false,
className: 'select-checkbox',
targets: 0,
}],
select: {
style: 'os', // 'single', 'multi', 'os', 'multi+shift'
selector: 'td:first-child',
},
order: [
[1, 'asc'],
],
});
myTable.on('select deselect draw', function () {
var all = myTable.rows({ search: 'applied' }).count(); // get total count of rows
var selectedRows = myTable.rows({ selected: true, search: 'applied' }).count(); // get total count of selected rows
if (selectedRows < all) {
$('#MyTableCheckAllButton i').attr('class', 'fa fa-square-o');
} else {
$('#MyTableCheckAllButton i').attr('class', 'fa fa-check-square-o');
}
});
$('#MyTableCheckAllButton').click(function () {
var all = myTable.rows({ search: 'applied' }).count(); // get total count of rows
var selectedRows = myTable.rows({ selected: true, search: 'applied' }).count(); // get total count of selected rows
if (selectedRows < all) {
//Added search applied in case user wants the search items will be selected
myTable.rows({ search: 'applied' }).deselect();
myTable.rows({ search: 'applied' }).select();
} else {
myTable.rows({ search: 'applied' }).deselect();
}
});
});
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>
<button style="border: none; background: transparent; font-size: 14px;" id="MyTableCheckAllButton">
<i class="far fa-square"></i>
</button>
</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>$320,800</td>
</tr>
<tr>
<td></td>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>$170,750</td>
</tr>
<tr>
<td></td>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>$86,000</td>
</tr>
<tr>
<td></td>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>$433,060</td>
</tr>
<tr>
<td></td>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>$162,700</td>
</tr>
<tr>
<td></td>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>$372,000</td>
</tr>
<tr>
<td></td>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>$137,500</td>
</tr>
<tr>
<td></td>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>$327,900</td>
</tr>
<tr>
<td></td>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>$205,500</td>
</tr>
<tr>
<td></td>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>$103,600</td>
</tr>
<tr>
<td></td>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>$90,560</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
