Created
September 18, 2014 06:48
-
-
Save anonymous/a0e8ac6ee86bc6fdde4a to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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