Datatables: select and select all (columns)

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/select/1.2.1/css/select.dataTables.min.css">
<script src="//cdn.datatables.net/select/1.2.1/js/dataTables.select.min.js"></script>
<table id="example" class="display" cellspacing="0" width="100%"></table>

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

JavaScript

$(document).ready(function() {
                $('#example thead tr').clone(true).appendTo( '#example thead' );
                $('#example thead tr:eq(1) th').slice(1).each( function (i) {
                    var title = $(this).text();
                    $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
            
                    $( 'input', this ).on( 'keyup change', function () {
                        if ( table.column(i).search() !== this.value ) {
                            table
                                .column(i+1)
                                .search( this.value )
                                .draw();
                        }
                    } );
                } );



});

var table = $('#example').DataTable({

    columns: [
        { "data": null, defaultContent: '' },
        { data: 'id', title: "ID" },
        { data: 'name' , title: "Name" },
        { data: 'car' , title: "Car" },
    ],
    columnDefs: [{
            orderable: false,
            className: 'select-checkbox',
            targets: 0,
        }],
    select: {
            style: 'multi', // 'single', 'multi', 'os', 'multi+shift'
            selector: 'td:first-child',
        },
    orderCellsTop: true,
    fixedHeader: true   
});


table.on("click", "th.select-checkbox", function() {
    if ($("th.select-checkbox").hasClass("selected")) {
        table.rows().deselect();
        $("th.select-checkbox").removeClass("selected");
    } else {
        table.rows().select();
        $("th.select-checkbox").addClass("selected");
    }
}).on("select deselect", function() {
    ("Some selection or deselection going on")
    if (table.rows({
            selected: true
        }).count() !== table.rows().count()) {
        $("th.select-checkbox").removeClass("selected");
    } else {
        $("th.select-checkbox").addClass("selected");
    }
});

// assume this is a dynamically created array of objects
var persons = [
  {
    id: 1,
   ...