On row click not working
On row click not working
Honeydew
Posts: 25Questions: 7Answers: 0
The html code I have written so far is:
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
$.ajax({
"url": "Handlers/jQueryDatatableHandler.ashx",
"data": { Operation: 'InboxMessages', searchText: '' },
success: function (data) {
json = JSON.parse(data);
columns = [];
// build column titles
for (var i = 0; i < json.colnames.length; i++) {
columns.push({ title: json.colnames[i] });
}
var table = $('#example').DataTable({
"responsive": true,
"processing": true, // for show progress bar
"serverSide": false, // for process server side
"order": [[4, 'desc']],
data: json.rows,
columns: columns,
columnDefs: [
{
targets: 0,
render: function (data, type, row) {
if (type === 'display') {
return '<input type="checkbox" class="editor-active">';
}
return data;
},
className: "dt-body-center",
"orderable": false,
"searchable": false
},
{
targets: 1,
visible: false
},
{
targets: -1,
visible: false
}
]
});
}
});
$('#example tbody').on('click', 'tr', function () {
if ($(this).hasClass('active')) {
$(this).removeClass('selected');
alert('clicked!');
}
else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
alert('not clicked!');
}
});
});
</script>
</head>
<body>
<h2>Datatable example </h2>
<table id="example" class="display" style="width:100%">
</table>
</body>
Now the jQueryDatatableHandler.ashx code returns json like this:
{"colnames":[" ","EmployeeId","Name","Title","Department","Viewed"],"rows":[["0","47216","James Bond","General Manager","10/23/2018 10:39:45 PM","True"],["0","47218","Ashley Paul","HR","10/24/2018 1:37:57 AM","True"],["0","47220","James Corbett","Writer","10/26/2018 9:47:07 PM","False"]]}
- I want to show the employee details below the table when a row is clicked but it ($('#example tbody').on('click', 'tr', function () ) is not working.
- I want to change the row color on hover, how can I do that?
- Also on double click of the row it should open the employee details in new page.
Please advise.
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
I think the problem is due to the
tbodynot being in the page when the event is established. Take a look at jQuery Understanding Event Delegation. I think you will want this:$('#example').on('click', 'tbody tr', function () {You can try using CSS for this. Maybe something like this:
Use the same format as the click event but with
dblclick.Kevin
Thanks Kevin, Just wondering how do I get EmployeeId for every row which is a hidden column
You would use
row()anddata()APIs. This code will give you the full row of data:Kevin