Skip to content

Instantly share code, notes, and snippets.

/test.cfm

Created September 18, 2014 06:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/a0e8ac6ee86bc6fdde4a to your computer and use it in GitHub Desktop.
Save anonymous/a0e8ac6ee86bc6fdde4a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
test.cfm
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment