Angular 6 - Datatables

Question

I use Angular-Datatables (latest version) with checkboxes

and I would like to define a "Select All" function. But I don't know how to mark as "checked" all the checkboxes :

All examples founded are developed with Angular JS or Jquery but when I read documentation it seems it doesn't work like this way.

I think (I may be wrong) the correct way is to use this.datatableElement.dtInstance.

I already use it to implement individual columns filtering option : https://l-lin.github.io/angular-datatables/#/advanced/individual-column-filtering

So I think I must keep it.

My 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>

But I don't know how to implement masterToggle() function...

My dtOptions configuration :

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);
                    });
                }

Indivudual column filtering uses 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());
            // });
        });

    }

But how can I use it for my checkboxes ?

UPDATE I have almont found the solution :

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;
            };

The last problem is that only the checkboxes of the first page are updated...

Answer 1

I am not a fan of such jquery "messing", so I made this stackblitz to show one more possible solution, which is much better from my point of view.

First of all you need to implement check binding for you data items to make you life easier.

As far as you use server side processing you need to store checked state on client, updating checked property accordingly after each data request (isPersonChecked method). For this purpose there are two arrays: checkedPersonIds - where you put checked items when "check all" flag is unset and uncheckedPersonIds - where you put unchecked items when "check all" flag is set. That's all you need to track "checked" state.

Hope this will help someone.