How to trigger row click event of jQuery DataTable

zionist · September 2014

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>

zionist · September 2014

Any Help guys? i feel am close but far from the solution

zionist · September 2014

Hi Guys, am pulling my hair out. Could someone please help me?

zionist · September 2014

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

allan · September 2014

There is an example available on this site showing how a click event can be handled.

Allan

zionist · September 2014

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

allan · September 2014

The CF aspect shouldn't make any difference.

Can you link to the page so I can take a look please?

Allan

zionist · September 2014

it's still on my development machine... is it ok if i posted the code?

zionist · September 2014

it's still on my development machine... is it ok if i posted the code?

allan · September 2014

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

zionist · September 2014

Here is my code.

<!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" />

$(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' ); } ); } );

</head>

<body>

Filter From: To:

	Date	Machine	Operator Name	Income	Expenditure	Profit
	#DATEFORMAT(results.hireDate, "mm/dd/yyyy")#	#results.machineNumber#	#results.fullname#	UGX #NumberFormat(results.revenue, ',')#	UGX #NumberFormat(results.expense, ',')#	UGX #NumberFormat(results.subTotal, ',')#

// 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>

How to trigger row click event of jQuery DataTable

How to trigger row click event of jQuery DataTable

Replies

Howdy, Stranger!

Categories

DataTables

How to trigger row click event of jQuery DataTable

How to trigger row click event of jQuery DataTable

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables