jQuery DataTables – Row selection using checkboxes and Select extension

For more information, see https://www.gyrocode.com/projects/jquery-datatables-checkboxes/

by swim89

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.css">
<script src="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.js"></script>
<link rel="stylesheet" href="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.10/css/dataTables.checkboxes.css">
<script src="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.10/js/dataTables.checkboxes.min.js"></script>
<div id="customer_table" class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <form id="membership_table_form" method="POST" action="#">
                            <div class="text-right">
                                <button class="btn btn-info">
                                    <i class="fa fa-paper-plane" aria-hidden="true"></i> Invia Richiesta
                                </button>
                            </div>
                            <!-- Table utenti -->
                            <table id="customerTable" class="table color-table info-table table-striped display">
                                <thead>
                                <tr>
                                    <th><input type="checkbox"></th>
                                    <th>lastname</th>
                                    <th>firstname</th>
                                    <th>fiscal_code</th>
                                    <th>fsn</th>
                                    <th>card_code</th>
                                    <th>start_date</th>
                                    <th>end_date</th>
                                    <th>state</th>
                                    <!--th class="text-right"></th-->
                                </tr>
                                </thead>
                            </table>
                            <!-- /Table utenti -->
                        </form>
                    </div>
                </div>

JavaScript

$(document).ready(function() {
   var table = $('#customerTable').DataTable({
                processing: true,
                serverSide: true,
                bFilter: false,
                language: {
                    "url": "//cdn.datatables.net/plug-ins/1.10.19/i18n/Italian.json"
                },
                ajax: {
                    url: 'https://api.myjson.com/bins/japld',
                    type: 'GET',
                    data: function (d) {
                        d.state = $('#states').val()
                        d.federation = $('#federations').val();
                    },
                },
                columns: [
                    {data: 'id', name: 'id'},
                    {data: 'lastname', name: 'lastname', orderable: true, searchable: true},
                    {data: 'firstname', name: 'firstname', orderable: true, searchable: true},
                    {data: 'fiscal_code', name: 'fiscal_code', orderable: false, searchable: true},
                    {data: 'name', name: 'federationname', orderable: false, searchable: true},
                    {data: 'card_code', name: 'card_code', orderable: false, searchable: true},
                    {data: 'start_date', name: 'start_date', orderable: true},
                    {data: 'end_date', name: 'end_date', orderable: true},
                    {data: 'state', name: 'state', orderable: true},
                    //{data: 'action', name: 'action', orderable: false, searchable: false},
                ],
                columnDefs: [
                    {
                        targets: 0,
                        checkboxes: {
                            'selectRow': true,
                        }
                    }
                ],
                select: {
                    style: 'multi'
                },
                'order': [[1, 'asc']],

            });

            $('#membership_table_form').on('submit', function (e) {
                var form = this;

 ...