I'm trying to get a clickable row with no results
I'm trying to get a clickable row with no results
amazeinstudios@gmail.com
Posts: 35Questions: 6Answers: 0
I just need a clickable row that creates a simple link to go to another page based on the data in the first column. Unfortunately, I'm not getting any results when I click. The example
$('#example tbody').on('click', 'tr', function () {
var data = table.row( this ).data();
alert( 'You clicked on '+data[0]+'\'s row' );
} );
from https://datatables.net/examples/advanced_init/events_live.html doesn't seem to work.
My entire code: //Everything else works but that. //
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/se/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-html5-1.6.1/fc-3.3.0/fh-3.1.6/sl-1.3.1/datatables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/zf-6.4.3/jq-3.3.1/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-html5-1.6.1/fc-3.3.0/fh-3.1.6/kt-2.5.1/sc-2.0.1/sl-1.3.1/datatables.min.css"/>
<link href="dt-alter.css" rel="stylesheet" type="text/css">
</head>
<body style="margin:auto;padding-top:50px">
<table cellpadding="3" cellspacing="0" border="0" style="width: 67%; margin: 0 auto 2em auto;">
<thead>
<tr>
<th>Target</th>
<th>Search text</th>
</tr>
</thead>
<tbody>
<tr id="filter_global">
<td>Global search</td>
<td align="center"><input type="text" class="global_filter" id="global_filter"></td>
</tr>
</tbody>
</table><table id="example" cellpadding="3" cellspacing="0" border="0" class="display stripe dt-responsive nowrap dt-left hover" >
<thead>
<tr>
<th>master program number</th>
<th>master program name</th>
<th>program</th>
<th>account number</th>
<th>account name</th>
<th>policy number</th>
<th>credit risk analyst</th>
<th>agency name</th>
<th>csc</th>
</tr>
</thead>
</table>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/zf-6.4.3/jq-3.3.1/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-html5-1.6.1/fc-3.3.0/fh-3.1.6/kt-2.5.1/sc-2.0.1/sl-1.3.1/datatables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script>
function filterGlobal () {
$('#example').DataTable().search(
$('#global_filter').val()
).draw();
}
function filterColumn ( i ) {
$('#example').DataTable().column( i ).search(
$('#col'+i+'_filter').val()
).draw();
}
$(document).ready(function () {
$.ajax({
url: "http://sunrhythms.com/work/HCL/amerisure/json/open_query.json",
dataType: "jsonp", // jsonp
type: "POST",
jsonpCallback: 'processFunction', // add this property
contentType: "application/json; charset=utf-8",
success: function (result, status, xhr) {
var table = $('#example').DataTable({
"scrollX": true,
fixedHeader: true,
fixedColumns: {
leftColumns: 2
},
sDom: 't',
data: result,
columns: [
{ data: 'master program number' },
{ data: 'master program name' },
{ data: 'program' },
{ data: 'account number' },
{ data: 'account name' },
{ data: 'policy number' },
{ data: 'credit risk analyst' },
{ data: 'agency name' },
{ data: 'csc' }
],
columnDefs: [{
targets: -1,
className: 'dt-nowrap',
className: 'dt-left'
}],
"pageLength": 25
});
},
error: function (xhr, status, error) {
console.log("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText)
}
});
$('#example tbody').on('click', 'tr', function () {
var data = table.row( this ).data();
alert( 'You clicked on '+data[0]+'\'s row' );
} );
$('input.global_filter').on( 'keyup click', function () {
filterGlobal();
} );
$('input.column_filter').on( 'keyup click', function () {
filterColumn( $(this).parents('tr').attr('data-column') );
} );
});
</script>
</body>
</html>
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
Is the click event running but you are getting errors? Take a look at the browser's console.
I think your are getting something like
tableis undefined. You havevar table = $('#example').DataTable({within the success function of your ajax call. This means thattableis available in that function's scope. You will need declare the variable globally,var table;, for example. Then remove thevarfrom the Datatables init line.Next issue is this line
alert( 'You clicked on '+data[0]+'\'s row' );. Since you are using objects you need to changedata[0]todata['master program number'].If this doesn't help then please provide a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
I am not getting an error... ' var table = ' is at the start of the datable...
My guess is that this is serverside from json.
Here's the test case...
http://live.datatables.net/corofoso/1/edit?html,js,output
The test case helps! Its not always easy or obvious all the issues with code snippets even if they are complete like yours
When the page is loaded you don't have a
tbodytag for this statement to add an event handler to:$('#example tbody').on('click', 'tr', function () {. The reason is due to the async Ajax call not being complete when that code is executed on page load. You can either move the click event code intoinitCompleteor you can change the selector to:$('#example').on('click', 'tbody tr', function () {. Now the event is attached to thetablewhich exists.Now you will get the errors I mentioned:
Instantiated the
tablevariable globally and removedvarfrom the statement in the success function.The alert then shows:
Changed
data[0]todata['master program number'].Here is the updated example:
http://live.datatables.net/buguhuku/1/edit
Kevin
I thought the "table" variable has to point to the datatables instance.
it shows this for me on click:
You are assigning the Datatables API to the variable
table. The variable falls under Javascript scope rules.I don't see that error. When I run the script I see this:
This means the the JS BIN environment won't pop alerts. You can either change the
alertstatement to aconsole.logstatement. Or you can click upward pointing arrow, next toAuto-run JS, in the upper right of theOutputtab.Kevin