Checkbox selection with Bootstrap 4
Checkbox selection with Bootstrap 4
allinhtml
Posts: 1Questions: 1Answers: 0
Hi,
I am trying to get checkbox as below example:
https://datatables.net/extensions/select/examples/initialisation/checkbox
My snippet code:
<head>
<title>getSelections</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="dataTables.bootstrap4.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="jquery.dataTables.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" ></script>
<script src="dataTables.bootstrap4.min.js"></script>
</head>
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="30%">
<thead>
<tr>
<th></th>
<th>Select Flows</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Tiger Nixon</td>
</tr>
<tr>
<td></td>
<td>Garrett Winters</td>
</tr>
<tr>
<td></td>
<td>Ashton Cox</td>
</tr>
</tbody>
</table>
My jquery code:
$(document).ready(function() {
$('#example').DataTable( {
scrollY: 300,
scrollX: true,
scrollCollapse: true,
paging: false,
fixedColumns: {
leftColumns: 2
},
columnDefs: [ {
orderable: false,
className: 'select-checkbox',
blurable: true,
targets: 0
} ],
select: {
style: 'os',
selector: 'td:first-child'
},
order: [[ 1, 'asc' ]]
} );
} );
But, Checkbox is not coming. Can anyone please help me for the same?
This discussion has been closed.
Answers
Looks like you haven't included either the Select extension's CSS or JS.
The download builder will help int his case.
Allan