How to trigger row click event of jQuery DataTable
How to trigger row click event of jQuery DataTable
zionist
Posts: 19Questions: 3Answers: 0
I'm using jQuery Datatable plugin for grid purposes. When I click on a row in the grid, I want to bind the details of the row to an input on the same page depending on the ID stored in the row. Can you provide me with a row clickevent? below is my code. when i click on a row in i get the following error "Bind value for element: expenseList.value must be a simple value. Element not found: ID"
<cfinvoke component="CFCs.crud" method="getExpense" returnvariable="results"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mo Rentals using CFGRID</title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="css/dataTableStyles.css" />
<link type="text/css" href="css/jquery-ui-1.8.4.custom.css" rel="stylesheet" />
<script type="text/javascript" language="javascript" class="init">
$(document).ready( function () {
$('#expenseList').dataTable();
} );
</script>
</head>
<body>
<div id="baseDateControl">
<div class="dateControlBlock"> Filter From:
<input type="text" name="dateStart" id="dateStart" class="datepicker" value="01/01/2014" size="8" />
To:
<input type="text" name="dateEnd" id="dateEnd" class="datepicker" value="12/31/2014" size="8"/>
</div>
</div>
<table id="expenseList" class="dataTablesTable" width="100%" cellspacing="0">
<thead>
<tr id="theadRow">
<th></th>
<th>Date</th>
<th>Machine</th>
<th>Operator Name</th>
<th>Income</th>
<th>Expenditure</th>
<th>Profit</th>
<th></th>
</tr>
</thead>
<tbody>
<cfoutput query="results">
<tr>
<td><img src="assets/delete.png" /></td>
<td>#DATEFORMAT(results.hireDate, "mm/dd/yyyy")#</td>
<td>#results.machineNumber#</td>
<td>#results.fullname#</td>
<td>UGX #NumberFormat(results.revenue, ',')#</td>
<td>UGX #NumberFormat(results.expense, ',')#</td>
<td>UGX #NumberFormat(results.subTotal, ',')#</td>
<td><img src="assets/edit.png" /></td>
</tr>
</cfoutput>
</tbody>
</table>
<cfform>
Distance Moved: <cfinput type="text" name="distanceMoved" id="distanceMoved" readonly="true">
</cfform>
<!---<cfform id="myForm" format="html">
This is my edit box.<br />
<cfinput type="text" name="myText">
</cfform>
<hr />
And this is the bound div container.<br />
<cfdiv bind="{myText@keyup}"></cfdiv>--->
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.4.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
// The plugin function for adding a new filtering routine
$.fn.dataTableExt.afnFiltering.push(
function(oSettings, aData, iDataIndex){
var dateStart = parseDateValue($("#dateStart").val());
var dateEnd = parseDateValue($("#dateEnd").val());
// aData represents the table structure as an array of columns, so the script access the date value
// in the first column of the table via aData[0]
var evalDate= parseDateValue(aData[1]);
if (evalDate >= dateStart && evalDate <= dateEnd) {
return true;
}
else {
return false;
}
});
// Function for converting a mm/dd/yyyy date value into a numeric string for comparison (example 08/12/2010 becomes 20100812
function parseDateValue(rawDate) {
var dateArray= rawDate.split("/");
var parsedDate= dateArray[2] + dateArray[0] + dateArray[1];
return parsedDate;
}
$(function() {
// Implements the dataTables plugin on the HTML table
var $dTable= $("table.dataTablesTable").dataTable( {
"iDisplayLength": 200,
"bStateSave": false,
"oLanguage": {
"sLengthMenu": 'Show <select><option value="25">25</option><option value="50">50</option><option value="100">100</option><option value="200">200</option></select> entries'
},
"aaSorting": [[0,'asc']],
"aoColumns": [
{ "sType": "date" },
null,
null
]
});
// The dataTables plugin creates the filtering and pagination controls for the table dynamically, so these
// lines will clone the date range controls currently hidden in the baseDateControl div and append them to
// the feedbackTable_filter block created by dataTables
$dateControls= $("#baseDateControl").children("div").clone();
$("#feedbackTable_filter").prepend($dateControls);
// Implements the jQuery UI Datepicker widget on the date controls
$('.datepicker').datepicker(
{showOn: 'button', buttonImage: 'assets/dateIcon.png', buttonImageOnly: true}
);
// Create event listeners that will filter the table whenever the user types in either date range box or
// changes the value of either box using the Datepicker pop-up calendar
$("#dateStart").keyup ( function() { $dTable.fnDraw(); } );
$("#dateStart").change( function() { $dTable.fnDraw(); } );
$("#dateEnd").keyup ( function() { $dTable.fnDraw(); } );
$("#dateEnd").change( function() { $dTable.fnDraw(); } );
});
</script>
<!---Code to bind table to inputs--->
<cfajaxproxy bind="javascript:getExpense({expenseList@click})">
<cfajaxproxy cfc="CFCs.crud" jsclassname="dataproxy">
<script>
function getExpense() {
var ID = ColdFusion.getElementValue("ID")
if(isNaN(ID)) return
dataService.getExpense(ID)
}
function showData(d) {
//convert into a struct
var data = {}
for(var i=0; i < d.COLUMNS.length; i++) {
data[d.COLUMNS[i]] = d.DATA[0][i]
}
document.getElementById('distanceMoved').value = data["distanceMoved"]
}
var dataService = new dataproxy()
dataService.setCallbackHandler(showData)
</script>
</body>
</html>
This discussion has been closed.
Replies
Any Help guys? i feel am close but far from the solution
Hi Guys, am pulling my hair out. Could someone please help me?
i have read most of the documentation on dataTables and followed most of the examples but i am still failing to get this to work. i would very much appreciate help
There is an example available on this site showing how a click event can be handled.
Allan
Hi Allan i have already tried to follow the example and apply it but nothing happens when i click the row. please remember that am pulling data into the table using a data from a database via a coldfusion component
The CF aspect shouldn't make any difference.
Can you link to the page so I can take a look please?
Allan
it's still on my development machine... is it ok if i posted the code?
it's still on my development machine... is it ok if i posted the code?
Its much easier for me to offer help with a live example since I don't need to study the code in detail, so I'm more likely to be able to offer help with a live example (due to time pressures), but sure, post code and if I have time I'll try to look at it. Apologies if I don't.
Allan
Here is my code.
<cfinvoke component="CFCs.crud" method="getExpense" returnvariable="results"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
$(document).ready( function () { var table = $('#expenseList').DataTable(); $('#expenseList tbody').on('click', 'tr', function () { //var name = $('td', this).eq(0).text(); var name = table.row( this ).data(); alert( 'You clicked on '+name+'\'s row' ); } ); } );<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mo Rentals using CFGRID</title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="css/dataTableStyles.css" />
<link type="text/css" href="css/jquery-ui-1.8.4.custom.css" rel="stylesheet" />
</head>
<body>
// The plugin function for adding a new filtering routine $.fn.dataTableExt.afnFiltering.push( function(oSettings, aData, iDataIndex){ var dateStart = parseDateValue($("#dateStart").val()); var dateEnd = parseDateValue($("#dateEnd").val()); // aData represents the table structure as an array of columns, so the script access the date value // in the first column of the table via aData[0] var evalDate= parseDateValue(aData[1]); if (evalDate >= dateStart && evalDate <= dateEnd) { return true; } else { return false; } }); // Function for converting a mm/dd/yyyy date value into a numeric string for comparison (example 08/12/2010 becomes 20100812 function parseDateValue(rawDate) { var dateArray= rawDate.split("/"); var parsedDate= dateArray[2] + dateArray[0] + dateArray[1]; return parsedDate; } $(function() { // Implements the dataTables plugin on the HTML table var $dTable= $("table.dataTablesTable").dataTable( { "iDisplayLength": 200, "bStateSave": false, "oLanguage": { "sLengthMenu": 'Show <select>2550100200 entries' }, "aaSorting": [[0,'asc']], "aoColumns": [ { "sType": "date" }, null, null ] }); // The dataTables plugin creates the filtering and pagination controls for the table dynamically, so these // lines will clone the date range controls currently hidden in the baseDateControl div and append them to // the feedbackTable_filter block created by dataTables $dateControls= $("#baseDateControl").children("div").clone(); $("#feedbackTable_filter").prepend($dateControls); // Implements the jQuery UI Datepicker widget on the date controls $('.datepicker').datepicker( {showOn: 'button', buttonImage: 'assets/dateIcon.png', buttonImageOnly: true} ); // Create event listeners that will filter the table whenever the user types in either date range box or // changes the value of either box using the Datepicker pop-up calendar $("#dateStart").keyup ( function() { $dTable.fnDraw(); } ); $("#dateStart").change( function() { $dTable.fnDraw(); } ); $("#dateEnd").keyup ( function() { $dTable.fnDraw(); } ); $("#dateEnd").change( function() { $dTable.fnDraw(); } ); });</body>
</html>