Skip to content

Instantly share code, notes, and snippets.

Created Sep 18, 2014
What would you like to do?
<cfinvoke component="CFCs.crud" method="getExpense" returnvariable="results"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<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 () {
} );
<div id="baseDateControl">
<div class="dateControlBlock"> Filter From:
<input type="text" name="dateStart" id="dateStart" class="datepicker" value="01/01/2014" size="8" />
<input type="text" name="dateEnd" id="dateEnd" class="datepicker" value="12/31/2014" size="8"/>
<table id="expenseList" class="dataTablesTable" width="100%" cellspacing="0">
<tr id="theadRow">
<th>Operator Name</th>
<cfoutput query="results">
<td><img src="assets/delete.png" /></td>
<td>#DATEFORMAT(results.hireDate, "mm/dd/yyyy")#</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>
Distance Moved: <cfinput type="text" name="distanceMoved" id="distanceMoved" readonly="true">
<!---<cfform id="myForm" format="html">
This is my edit box.<br />
<cfinput type="text" name="myText">
<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
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" },
// 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();
// Implements the jQuery UI Datepicker widget on the date controls
{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(); } );
<!---Code to bind table to inputs--->
<cfajaxproxy bind="javascript:getExpense({expenseList@click})">
<cfajaxproxy cfc="CFCs.crud" jsclassname="dataproxy">
function getExpense() {
var ID = ColdFusion.getElementValue("ID")
if(isNaN(ID)) return
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()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment