Responsive DataTable Column and row Index Error
Responsive DataTable Column and row Index Error
xWinterButterfly
Posts: 8Questions: 0Answers: 0
Hi,
I am trying to get the row and column index from both the responsive Data Table and the normal DataTable.
The following code seems to be working fine for the DataTable when Responsive is not activated. But when the columns become responsive I get the following errors "Uncaught TypeError: Cannot read property 'columnVisible' of undefined "
and "Uncaught TypeError: Cannot read property 'row' of undefined ".
I notices that it will call the click event twice when the column is responsive.
I will appreciate it if some one can please let me know how can I fix this error?
My Sample code snippet below. It is from the example "DataTables-1.10.12\extensions\Responsive\examples\child-rows"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Responsive example - Custom child row renderer</title>
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../css/responsive.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.responsive.js"></script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
responsive: {
details: {
renderer: function ( api, rowIdx, columns ) {
var data = $.map( columns, function ( col, i ) {
return col.hidden ?
'<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
'<td>'+col.title+':'+'</td> '+
'<td>'+col.data+'</td>'+
'</tr>' :
'';
} ).join('');
return data ?$('<table/>').append( data ) :false;
}
}
}
} );// end of DataTable
//
$('#example tbody').on('click', 'td', function (e) {
e.preventDefault();
//var col = table.cell(this).index().columnVisible;
//var row = table.cell(this).index().row;
alert("CLICK: " + $(this).parent().html().trim());
});
//
} );
</script>
</head>
.......
<body>.......</body>
Thank you.
Regards,
WinterButterfly~
This discussion has been closed.
Replies
Can you give me a link to the page showing the problem so I can try to help identify the issue please?
Are you using 1.10.11 or newer? If not, do so as that will probably be the issue.
Allan
Hmmm - you might also have to put the click handler on the
trelement.Allan
Hi Allan,
Thank you for the reply. I am currently using DataTable 1.10.12.
I took the sample from the DataTable 1.10.12 zip file that I had downloaded from the DataTable website
I got the file from the path as shown below after extraction:
DataTables-1.10.12\extensions\Responsive\examples\child-rows/custom-renderer.html
and added the following codes into the javascript
I had attached the sample "custom-renderer.html" file that I am using in here for your reference. Kindly please change the extension from txt to html as I don't seem to be able to attach files with html extension into here.
I found a similar sample online in DataTable website (I think they are the same sample from the zip file that I had downloaded)
https://datatables.net/extensions/responsive/examples/child-rows/custom-renderer.html
xWinterButterfly
EDITED : custom-renderer2.txt file
I'm not seeing that error when I try to run that code: http://live.datatables.net/dedihaju/1/edit .
Allan
Hi Allan,
When I click onto the website link that you had provided above and try clicking onto one of the responsive columns (highlighted in blue box) I still got the following error:
Error message:
"TypeError: Unable to get property 'columnVisible' of undefined or null reference"
I had attached the sample screen shot for your reference.
xWinterButterfly
Oh I see - its because the event handler being used is being triggered on the child table as well. You just need to make the selector more selective: http://live.datatables.net/dedihaju/2/edit .
I'm not sure why it is collapsing the row though - I don't think that should be happening.
Allan
Hi, Allan,
I had tried out the link given above, but I am still getting error as attached in the image , and this time the row and column index don't seem to show in the console when I clicked onto the row or columns of the DataTable.
xWinterButterfly.
Sorry - try this one: http://live.datatables.net/dedihaju/3/edit . Its just a case of making the selector activate the event on the host row as I mentioned. I must of fiddled with the code after posting my message above!
Allan
Hi Allan,
Thank you for the prompt reply. I had tried out the sample link but this time I am unable to get the column idx and the row idx when I click onto the Responsive DataTable's column as shown in the image attached, highlighted in purple box.
But it will only display the col and row idx when I click onto the Data Table highlighted in green box.
I would like to get the column and row index of the DataTable regardless of responsive is on/off,
whereby it will display the column & row index when I click onto the item highlighted in the green box ,
and it will display the column & row index when I click onto the item highlight in purple box.
xWinterButterfly.
You would just add the inner table cells to the selector: http://live.datatables.net/dedihaju/5/edit .
Also, the issue with the click on the inner table closing the row has been fixed in the nightly.
Allan
Hi, Allan,
YAY! it works and the error is finally gone!
.
Thank you very much for your help. I appreciate it very much
xWinterButterfly.