let DeleteCheckboxListViewMixin = (superclass) => class extends superclass {

    /**
     * pre initialize
     *
     * @param {Object} options
     */
    preinitialize(options) {
        super.preinitialize(options);
        this.events = this.events || {};
        this.events['change .delete-checkbox'] = '_changeDeleteCheckbox';
    }

    /**
     * Description of column checkbox
     */
    _getColumnsDefinitionDeleteCheckbox() {
        return {
                name: "delete",
                orderable: false,
                visibile: true,
                width: '20px',
                createdCell: this._createDeleteCheckbox,
                render: () => { return ''}
            };
    }

    /**
     * @param {Object} rowData
     *
     * @private
     */
    _canDelete(rowData) {
        return rowData.get('rights').hasOwnProperty('can_delete') && rowData.get('rights').can_delete;
    }

    /**
     * @param {Object} td
     * @param {Object} cellData
     * @param {Object} rowData
     *
     * @private
     */
    _createDeleteCheckbox(td, cellData, rowData) {
        let id = 'checkbox' + rowData.cid;
        let attributes = {type: 'checkbox', id: id, class:'delete-checkbox'};
        if (!this.data('context')._canDelete(rowData)) {
            attributes.disabled = 'disabled';
        }

        let $checkbox = $('<input>', attributes);
        $checkbox.data(rowData);
        $(td).append($checkbox);
        $(td).append($('<label>', {for: id}));
    }

    /**
     * @param {Object} event
     *
     * @private
     */
    _changeDeleteCheckbox(event) {
        let model = $(event.currentTarget).data();
        model.set('delete', $(event.currentTarget).prop('checked'));
    }
};

export default DeleteCheckboxListViewMixin;

@@ -188,36 +188,167 @@
     
-super.preinitialize(options)
+options.settings%5B'headerCallback'%5D = $.proxy(this._createHeaderDeleteCheckbox, this);%0A        super.preinitialize(options);%0A        this._columnName = 'delete'
 ;%0A  
@@ -460,16 +460,103 @@
 ckbox';%0A
+        this.events%5B'change #select-all-checkbox'%5D = '_changeSelectAllDeleteCheckbox';%0A
     %7D%0A%0A 
@@ -695,16 +695,24 @@
 me: 
-%22delete%22
+this._columnName
 ,%0A  
@@ -1126,32 +1126,949 @@
 _delete;%0A    %7D%0A%0A
+    /**%0A     * @param %7BObject%7D thead%0A     */%0A    _createHeaderDeleteCheckbox(thead) %7B%0A        let index = this.$table.DataTable().column(this._columnName+':name').index('visible');%0A        let $headerColumn = $(thead).find('th').eq(index);%0A%0A        let id = 'select-all-checkbox';%0A        let attributes = %7Btype: 'checkbox', id: id%7D;%0A        let $checkbox = $('%3Cinput%3E', attributes);%0A        $headerColumn.html($checkbox);%0A        $headerColumn.append($('%3Clabel%3E', %7Bfor: id%7D));%0A    %7D%0A%0A    /**%0A     * @param %7BObject%7D event%0A     *%0A     * @private%0A     */%0A    _changeSelectAllDeleteCheckbox(event) %7B%0A        let index = this.$table.DataTable().column(this._columnName+':name').index('visible');%0A        let checked = $(event.currentTarget).prop('checked');%0A        let checkbox = $('tr td:nth-child('+(index+1)+') input.delete-checkbox:enabled', this.$table);%0A%0A        checkbox.prop('checked', checked).change();%0A    %7D%0A%0A
     /**%0A     * @
@@ -2562,22 +2562,20 @@
   $(td).
-append
+html
 ($checkb

add checkbox select all delete (#2128)