Menu
I have a simple datable https://jsfiddle.net/ptwgxpzu/27/
JS:
var dataSet = [
["data/rennes/", "Rennes", "rennes.map"],
["data/nantes/", "Nantes", "nantes.map"],
["data/tours/", "Tours", "tours.map"],
["data/bordeaux/", "Bordeaux", "bordeaux.map"],
["data/limoges/", "Limoges", "limoges.map"],
["data/troyes/", "Troyes", "troyes.map"]
];
var table = $('#maptable').DataTable({
"data": dataSet,
"paging": false,
"columns": [{
title: "Download"
}, {
title: "Name"
}, {
title: "File Name"
}],
"columnDefs": [{
"targets": [0], // Download
"visible": true,
"searchable": false,
"bSortable": false
}, {
"targets": [1], // Name
"visible": true,
"searchable": true
}, {
"targets": [2], // File name
"visible": true,
"searchable": true
},
],
"order": [
[1, "asc"]
],
"oLanguage": {
"sSearch": ""
},
"aoColumns": [{
"title": ' <i class="fa fa-cloud-download white"></i> Download',
"render": function(data, type, full, meta) {
var url = 'http://localhost/';
var mapurl = url + full[0] + full[2],
trackurl = url + full[0] + full[2].replace('map', 'trx');
return '<div class="btn-group">' +
'<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' +
'<i class="fa fa-cloud-download white"></i> <span class="caret"></span>' +
'</button>' +
'<ul class="dropdown-menu">' +
'<li><a href=' + mapurl + '><i class="fa fa-download"></i> map file</a></li>' +
'<li><a href=' + trackurl + '><i class="fa fa-download"></i> track file</a></li>' +
'</ul>' +
'</div>';
}
}, {
"title": "Name"
}, {
"title": "File name"
}]
});
$('#maptable tbody').delegate( 'tr', 'click', function () {
$(this).toggleClass('selected');
//...
});
HTML:
<body>
<br />
<div class="container">
<table id="maptable" class="table table-bordered" width="100%"></table>
</div>
</body>
How avoid action of 'deselected row' when I click on dropdown button when row in table selected and avoid action 'selected row' when I click on dropdown button when rows in in table not selected? Or disable row selection only in first column
907
Use the following code:
$('#maptable tbody').on('click', 'td:not(:first-child)', function () {
$(this).closest('tr').toggleClass('selected');
//...
});
See updated jsFiddle for code and demonstration.
Alternatively, if you want allow selection in the first column (except when the button is clicked), then use the following code:
$('#maptable tbody').on('click', 'tr', function (e) {
if(!$(e.target).is('button')){
$(this).toggleClass('selected');
}
//...
});
See updated jsFiddle for code and demonstration.
76
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
