Row click and checkbox click event not working
Row click and checkbox click event not working
Honeydew
Posts: 25Questions: 7Answers: 0
I am doing server side processing for showing the data and it is working fine except that my row click event and checkbox click event is not working. Here is the code:
function BuildDatatable() {
$.ajax({
url: "Handlers/DatatableHandler.ashx",
data: { Operation: 'ColumnNames' },
success: function (data) {
result = JSON.parse(data);
//console.log(result);
$('#tblEmployeeList').DataTable({
processing: true,
serverSide: true,
responsive: true,
ajax: {
"url": "Handlers/DatatableHandler.ashx",
"data": { Operation: 'EmployeeList' },
"type": "POST",
"datatype": "json"
},
columns: result,
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
}
]
});
}
});
}
$('input.editor-active').on('change', function () {
alert('checkbox clicked'); // it is never shown
cb = $(this).prop('checked');
console.log(cb)
});
$('#tblEmployeeList').on('click', 'tbody td:not(:first-child)', function () {
alert('in'); // it is never shown
var table = $('#example').DataTable();
var row = table.row(this.closest('tr')).data();
alert("EmployeeId: " + row[1]); //EmployeeId
});
Can you please suggest what part of code is not correct and how can I make it functioning?
Also is there a simple way to add a checkbox once the columns are fetched dynamically from the server i.e. i tried these statements: {
orderable: false,
className: 'select-checkbox',
targets: 0
}
but it does not render the checkbox. So what is the best approach to have a checkbox as a first column?
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
The
input.editor-activeelements are not on the page when the change event code is executed. You need to use jQuery Delegated Events. See the My events don't work on the second page FAQ.Something like this should work:
$('#tblEmployeeList').on('change', 'tbody input.editor-active', function () {This code snippet is used when you are using the Select Extension. You will need to include the Select code and follow this example:
https://datatables.net/extensions/select/examples/initialisation/checkbox.html
Kevin
This line $('#tblEmployeeList').on('change', 'tbody input.editor-active', function () {
still does not work.
The updated code works in this example:
http://live.datatables.net/huyexejo/10/edit
I copied your checkbox column and change event code into the example. Wonder if your page is cached.
Kevin
Still not able to make it work.. is it because I have serverSide: true?
Sorry my mistake I forgot to write this code in $(document).ready(function().
Thanks a lot for all the patience, appreciate it.
Similarly I have moved the row click event to document.ready function and it does shows the first alert but does not return the value of EmployeeId
$('#tblEmployeeList').on('click', 'tbody td:not(:first-child)', function () {
alert('in');
var row = this.closest('tr');
alert(row[1]); // this returns undefined
});
I even tried declaring the table variable like this
var table = $('#tblEmployeeList').DataTable();
var row = table.row(this.closest('tr')).data();
alert(row[1]); // this returns undefined
Any idea why it works if serverSide is false but not when serverSide is true?
are you saying that turning off
serverSideon this particular table you can access the data usingrow[1]but ifseverSideis on then you get undefined?This returns the row HTML. You can see this with 'console.log(row)`. Its not a Datatables API.
This does return a Datatables API.
This leads me to believe you are using objects not arrays for the data. Guessing you columns contains
columns.data. If so then you need to access the row data using the object property. Maybe something like thisalert(row.EmployeeId;.Kevin
This is how I am returning the JSON from my handler code
Did you try this?
Kevin