Greetings, experts,
I have this code:
<div id="ExistingRequest">
<div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("#doit").dataTable( {
"sProcessing" : true,
"sDom":'T<"clear">',
"sJQueryUI": true,
"aaSorting": [[ 1, "desc" ]],
"sPaginationType": "full_numbers",
"sDom": 'T<"clear"><"fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>',
"sAjaxSource" : "getUserRequests.php?loginName=<?php echo $user; ?>",
"sAjaxDataProp" : "",
"sDestroy" : false,
"sScrollXInner": "110%",
"fnServerData" : function(sSource, aoData, fnCallback) {
request = $.ajax({
"dataType" : "json",
"type" : "GET",
"url" : sSource,
"data" : aoData,
"success" : fnCallback
});
},
"aoColumns" : [
{ "mDataProp": "RequestID", "sWidth": "50px", sSortable: true,
"bSearchable": false,
"bSortable": false,
"fnRender": function (oObj)
{
return "<a target='tab' data-tab-name='#RequestDetails' data-tab-index='1' href='getRequestDetails.php?loginName="
+ <?php echo json_encode($user); ?> + "&requestID=" + oObj.aData["RequestID"] + "'> " + oObj.aData["RequestID"] + " </a>";
}
},
{ mDataProp: "RequestDate", "sWidth": "100px", sSortable: true },
{ mDataProp: "RequestorFullName", "sWidth": "150px", sSortable: true },
{ mDataProp: "PrimarySiteContactDisplay", "sWidth": "250px", sSortable: true },
{ mDataProp: "RequestLocation", "sWidth": "150px", sSortable: true },
{ mDataProp: "RequestDescription", "sWidth": "200px", sSortable: true },
{ mDataProp: "RequestStatus", "sWidth": "100px", sSortable: true },
],
})
$('#doit tbody tr').click(function () {
if ($(this).hasClass('selected')) $(this).removeClass('selected');
else
{
$(this).siblings('.selected').removeClass('selected');
$(this).addClass('selected');
}
});
$(window).bind('resize', function () {
oTable.fnAdjustColumnSizing();
});
jQuery('.dataTable').wrap('<div class="scrollStyle" />');
$("#doit").on("click", "a[target='tab']", function(){
var me = $(this);
var url = me.attr("href");
var tabName = me.data("tabName");
var tabIndex = parseInt(me.data("tabIndex"), 10);
$.get(url, function(data) {
var table = $( '<table id="details" class="details" style="font-weight:bold;font-size:10pt;" cellpadding="4" width="100%" cellspacing="0" />'),
tr = $('<tr clss="d0"/>'),
td = $('<td/>'),
th = $('<th/>'),
table2 = $('<table class="details" style="background-color:#eeeeee;" cellpadding="4" width="100%" bordercolor="cellspacing="0" />');
tr = $('<tr clss="d1"/>'),
td = $('<td/>'),
th = $('<th/>'),
table2.html(tr.clone());
table2.append(tr.clone()).append(tr.clone());
var tr2 = table2.find('tr:first');
$.each(data[0], function(key,value) {
if($.inArray(key, ['RequestID','RequestInitiatedDate','RequestStatus','RequestClosedDate']) == -1) {
tr.clone().html(th.clone().html( key.replace(/[a-z][A-Z]/g, function(s) { return s.split('').join(' '); })))
.append(td.clone().html(value))
.appendTo(table);
} else {
th.clone().html( key.replace(/[a-z][A-Z]/g, function(s) { return s.split('').join(' ');
})).appendTo(tr2);
td.clone().html(value).appendTo(tr2);
if (key == 'RequestInitiatedDate') {
tr2 = tr2.next();
}
}
});
$(tabName).html(table2).append('<br>').append(table);
$("table#details tr:even").css("background-color", "#eeeeee");
$("table#details tr:odd").css("background-color", "#C0C0C0");
$("#tabs").tabs("option", "active", tabIndex);
}, 'json');
return false;
});
});
</script>
<style>
#doit{
border-collapse: separate;
}
table.details {
border: 2px inset #8B8378;
-moz-border-radius: 2px;
font-size: 12px;
text-align: left;
}
table.details td {
border: 1px solid black;
padding: 0.2em 2ex 0.2em 2ex;
font-size: 12px;
color: black;
}
table.details tr.d0 td {
background-color: #eeeeee;
font-size: 12px;
}
table.details tr.d1 td {
background-color: #FEFEF2;
font-size: 12px;
}
</style>
<script type="text/javascript">
$(document).ready(function()
{
$("table#details tr:even").css("background-color", "red");
$("table#details tr:odd").css("background-color", "blue");
});
</script>
<div class="fg-toolbar ui-widget-header ui-corner-all ui-helper-clearfix">
<div class="fg-buttonset ui-helper-clearfix">
<div id="TableToolsToolbar" class="fg-buttonset ui-helper-clearfix"> </div>
<table><tr><td></td</tr></table>
<table cellpadding="0" cellspacing="0" border="0" style="width:100%;" class="display" id="cityworks">
<thead style="background-color:#666362; color:White; font-weight:bold;font-size:10pt;">
<tr style="border:solid 1px #000000;">
<th>ID</th>
<th>Date</th>
<th>Requestor</th>
<th>Site Contact</th>
<th>Location</th>
<th>Description</th>
<th>Status</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<style>
table.dataTable tr.odd { background-color: #ffffff;font-size:8pt; }
table.dataTable tr.even { background-color: white;font-size:8pt; }
div.dataTables_scroll { clear: both; }
.dataTables_length { vertical-align:middle;nowrap }
.dataTables_filter { vertical-align:middle;nowrap; }
</style>
</div>
</div>
<div id="RequestDetails">
</div>
</div>
Notice #ExistingRequests.
This which is more like the Summary page and when a user clicks on any RequestId, it opens up request details, is my code
Then this code that produced this result:
<script type='text/javascript'>
$(function(){
$("#doit").on("click", function () {
var data = [{
RequestID: 1234,
RequestInitiatedDate: '01/01/2000',
RequestStatus: 'OK',
RequestClosedDate: '31/12/2000',
WONo: '25728',
WOStatus: 'In Design',
WONote: 'Project is too risky',
WOInitiatedDate: '12/17/2014',
ProjectedFinishDate: '04/16/2015'
}];
$.each(data[0], function (key, value) {
$("#tableRequestSummary td[name='" + key + "']").html(value);
$("#tableRelatedWorkActivity td[name='" + key + "']").html(value);
});
$("#divResultsSummary").show();
$("#divResultsRelatedWorkActivity").show();
});
});
</script>
</head>
<body>
<button id="doit" type="button">Do it Easy</button>
<div id="divResultsSummary" style="display:none">
<div>Request</div>
<div>
<table id=tableRequestSummary border=1>
<tr><td>Request ID</td><td name=RequestID></td><td>Request Initiated Date</td><td name=RequestInitiatedDate></td></tr>
<tr><td>Request Status</td><td name=RequestStatus></td><td>Request Closed Date</td><td name=RequestClosedDate></td></tr>
</table>
</div>
</div>
<p>some text here... some text here... some text here... some text here... some text here... some text here...</p>
<div id="divResultsRelatedWorkActivity" style="display:none">
<div>Related Work Activity</div>
<div>
<table id=tableRelatedWorkActivity border=1>
<tr><td>WO #</td><td name=WONo></td><td>WO Initiated Date</td><td name=WOInitiatedDate></td></tr>
<tr><td>WO Status</td><td name=WOStatus></td><td>Projected Finish Date</td><td name=ProjectedFinishDate></td></tr>
<tr><td>WO Note</td><td name=WONote colspan=3></td></tr>
</table>
</div>
</div>
I would like to integegrate this code which produces the result in the demo below into my code above:
http://jsfiddle.net/
Is this possible?
I apologize for the long code.
Thank you very much
|