KinginaMows

by vhinchies

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.0/css/select.dataTables.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.0/js/dataTables.select.min.js"></script>
 <button type="button" id="btnGetSelectedRows">
 Write selected rows to the log!
 </button>
 
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th></th>
                <th>Name</th>                
                <th>Email</th>
            </tr>
        </thead>
       <tbody>
            <tr>
                <td></td>
                <td>Tiger Nixon</td>
                <td>[email protected]</td>                
            </tr>       
             <tr>
                <td></td>
                <td>Junior Jack</td>
                <td>[email protected]</td>                
            </tr>  
             <tr>
                <td></td>
                <td>Power Ranger</td>
                <td>[email protected]</td>                
            </tr>  
             <tr>
                <td></td>
                <td>Doyle Kumag</td>
                <td>[email protected]</td>                
            </tr>  
             <tr>
                <td></td>
                <td>John Paul</td>
                <td>[email protected]</td>                
            </tr>  
             <tr>
                <td></td>
                <td>Rain Rain</td>
                <td>[email protected]</td>                
            </tr>  
             <tr>
                <td></td>
                <td>Bomb Shell</td>
                <td>[email protected]</td>                
            </tr>  
        </tbody>        
    </table>

JavaScript

$(document).ready(function () {
            var table = $('#example').DataTable({
                columnDefs: [{
                    orderable: false,
                    className: 'select-checkbox',
                    targets: 0
                }],

                select: {
                    style: 'multi',
                    selector: 'td:first-child'
                },
                lengthMenu: [[5, 10, 25, -1], [5, 10, 25, "All"]],
                pageLength: 5
            });



            $('#btnGetSelectedRows').on('click', function () {
                var dataArr = [];
                let rows = table.rows({ selected: true });
                var result = table.cells(rows.nodes(), 2).data();
                for (i = 0; i < result.length; i++) {
                    dataArr.push(result[i]);
                }
                console.log(dataArr);
                $("#hdnSelectedContacts").val(dataArr);   // This will set the value to the hidden field            
            });
        });