Я использую Angular-Datatables (последняя версия) с флажками
, и я хотел бы определить функцию «Выбрать все».Но я не знаю, как пометить все флажки как «проверенные»:
Все основанные примеры разработаны с использованием Angular JS или Jquery, но когдаЯ читаю документацию, кажется, она не работает таким образом.
Я думаю (я могу ошибаться), правильный способ - использовать this.datatableElement.dtInstance.
Я уже использую его для реализацииопция фильтрации отдельных столбцов: https://l -lin.github.io / angular-datatables / # / расширенная фильтрация / фильтрация отдельных столбцов
Так что я думаю, что я должен сохранить это.
Мой HTML:
<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%">
<!--<table #dataTable class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%">-->
<tfoot>
<tr>
<th>Sélection</th>
<!--<th>id</th>-->
<th><input type="text" placeholder="Recherche Identifiant" name="search-identifiant"/></th>
<th><input type="text" placeholder="Recherche nom" name="search-nom"/></th>
<th><input type="text" placeholder="Recherche prénom" name="search-prenom"/></th>
<th>Action</th>
</tr>
</tfoot>
<thead>
<tr>
<th style="width: 1%">
<input type="checkbox" (click)="masterToggle($event)">
</th>
<!--<th style="width: 1%">-->
<!--<mat-checkbox (change)="$event ? masterToggle($event) : null"-->
<!--[checked]="selection.hasValue() && isAllSelected(contactList.length)">-->
<!--</mat-checkbox>-->
<!--</th>-->
<th>Identifiant</th>
<th>Nom</th>
<th>Prenom</th>
<th>Action</th>
</tr>
</thead>
Но я не знаю, как реализовать функцию masterToggle () ...
Моя конфигурация dtOptions:
this.dtOptions = {
pagingType: 'full_numbers',
// displayLength: 10,
// serverSide: true, // si true, execute l'appel ajax, puis l'exécute à chaque utilisation d'un des filtres
// processing: true,
ajax: (dataTablesParameters: any, callback) => {
console.log('ContactsComponent - call Ajax()');
// console.log(dataTablesParameters);
that.http.get<ApiResponse>('/api/contacts')
.subscribe(resp => {
that.contactList = resp.content;
// console.log(that.contactList);
that.loading = false;
callback({
// recordsTotal: resp.totalElements,
// recordsFiltered: resp.totalElements,
// recordsFiltered: 0,
// data: []
data: that.contactList
});
});
},
columns: [
{
// title: 'Selection',
data: null },
// {
// title: 'N°',
// data: 'idaicontact' },
{
// title: 'Identifiant',
data: 'identifiant' } ,
{
// title: 'Nom',
data: 'nom' },
{
// title: 'Prénom',
data: 'prenom' }
,
{
// title: 'Action',
data: null }
],
columnDefs: [
{
orderable: false,
// className: 'select-checkbox', // classname définit une checkbox par dessus une case vide [object Object] (data: null)
targets: [0],
render: function(data, type, full, meta) {
return '<input type="checkbox" ">';
// return ' <mat-checkbox (change)="$event ? masterToggle($event) : null"' +
// '[checked]="selection.hasValue() && isAllSelected(contactList.length)">' +
// '</mat-checkbox>'
}
},
]
rowCallback: (row: Node, data: any[] | Object, index: number) => {
const self = this;
// Unbind first in order to avoid any duplicate handler
// (see https://github.com/l-lin/angular-datatables/issues/87)
// $('td:first-child', row).unbind('click');
// $('td:first-child', row).bind('click', () => {
const elt = $('td', row).find('[type="checkbox"]');
if (elt) {
elt.unbind('click');
elt.bind('click', () => {
if (elt[0].checked) {
console.log((data as Contact).identifiant + ' a été sélectionné');
} else {
console.log((data as Contact).identifiant + ' a été déselectionné');
}
// self.someClickHandler(row, data, index);
});
}
Индивидуальная фильтрация столбцов использует dtInstance:
ngAfterViewInit() {
console.log('ContactsComponent - ngAfterViewInit()');
this.dtTrigger.next();
this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
// console.log(dtInstance);
// console.log(dtInstance.data());
dtInstance.columns().every(function () {
const that = this;
$('input', this.footer()).on('keyup change', function () {
if (that.search() !== this['value']) {
that.search(this['value'])
.draw();
}
});
});
// dtInstance.on('search.dt', function() {
// // Do you stuff
// console.log('search: ' + dtInstance.search());
// });
});
}
Но как я могу использовать его для своих флажков?
ОБНОВЛЕНИЕ Я нашел решение, только что:
this.isAllChecked = $('th', dtInstance.table(0).node()).find('[type="checkbox"]')[0].checked;
console.log('Select All: ' + this.isAllChecked);
let elts: any[] = [];
$('td', dtInstance.table(0).node()).find('[type="checkbox"]') // renvoie la valeur des checkbox uniquement pour les
// lignes affichées !!
elts = $('td', dtInstance.table(0).node()).find('[type="checkbox"]');
for (const elt of elts) {
elt.checked = this.isAllChecked;
};
Последняя проблема в том, что обновляются только флажки первой страницы ...