http-equiv="X-UA-Compatible" content="IE=9" charset="utf-8"
by defaz
HTML
<script src="https://code.jquery.com/jquery-1.12.3.min.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>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<body>
<div id="dropdown01" style="min-width:220px;max-width:220px;max-height:25px;overflow:hidden;">
<button id="button" style="min-width:220px;max-width:220px;max-height:25px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align: left;">Name: </button>
</div>
<div id="selName" style="width:220px;height:50px;">
<table class="display" id="table01" cellspacing="0">
<thead>
<tr id="table01-select-all">
<th><input type="checkbox" id="table01-select-all-cb"></th>
<th>Alle</th>
<th>Alle</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Frank Sinatra</td>
<td>Entertainer</td>
</tr>
<tr>
<td></td>
<td>Tiger Nixon</td>
<td>System Architect</td>
</tr>
<tr>
<td></td>
<td>Garrett Winters</td>
<td>Accountant</td>
</tr>
<tr>
<td></td>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
</tr>
<tr>
<td></td>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
</tr>
<tr>
<td></td>
<td>Airi Satou</td>
<td>Accountant</td>
</tr>
<tr>
<td></td>
<td>testname 01</td>
<td>testpos 01</td>
</tr>
<tr>
...
CSS
.dataTables_wrapper {
border: 1px solid;
}*/
.no-footer.dataTables_wrapper .dataTables_scrollBody{
border:0px;
}
JavaScript
$(document).ready(function() {
var table01 = $('#table01').DataTable({
"language": { "search": "Suche:", "zeroRecords": "nichts gefunden" },
"bSort": false,
"bInfo": false,
paging: false,
scrollY: 200,
"columnDefs": [
{ targets: 0, orderable: false, searchable:false, width: 20, className: 'select-checkbox'},
{ targets: 1, orderable: false, className: 'dt-left', width: 200 },
{ "targets": [ 2 ], "visible": false, "searchable": false }
]
});
$("#selName").focusout(function () {
if ($(this).has(document.activeElement).length == 0) {
var dataArr = [];
var Sname = 'Name: ';
var con = '';
$.each($("#table01 tr.selected"),function(){ //get each tr which has selected class
dataArr.push($(this).find('td').eq(1).text()); //find its second td and push the value
Sname = Sname + con + $(this).find('td').eq(1).text();
con = ', ';
});
// console.log(Sname);
$("#button").html(Sname);
$('#button').prop('title', Sname.substr(6));
$('#table01_wrapper').hide();
}
});
$('#table01-select-all').on('click', function(){ // Handle click on "Select all" control
if ($('#table01-select-all-cb').is(":checked")) {
table01.rows({ 'search': 'applied' }).deselect();
$('#table01-select-all-cb').prop('checked', false); /* this.checked */
} else {
table01.rows({ 'search': 'applied' }).select();
$('#table01-select-all-cb').prop('checked', true); /* this.checked */
}
} );
$('#table01 tbody').on( 'click', 'tr', function () {
$(this).toggleClass('selected');
} );
$('#button').on( 'click', function () {
$('#table01_wrapper').show();
$('#table01_filter input').focus();
} );
$('#table01_wrapper').hide();
$("#button").button();
$('#button').button().css(...