私は JSON DATA でほとんど作業を行っておらず、これに数日間苦労しています。
[jquery datatables を使用して] 私のアプリのセクションには、サービス契約で利用可能な資金の量に関する情報が表示されます。ドリルダウンすると、契約へのすべての変更が表示されます。このデータを取得するために ajax 呼び出しを使用しています。返される情報の 1 行を表示することには成功しましたが、複数の行を表示することはできませんでした。
これが私がこれまでに持っているものです
my JSON DATA - どこの例でも、このようなデータ セットが使用されているのを見たことがありません。
{"SUCCESS":true,
"ERRORS":[],
"DATA":{
"COLUMNS":["REQNUM_ID",
"PORDER_ID",
"REQNUM",
"AWARD_DTE",
"AWARD_AMNT",
"DTE_ENTERED",
"ENTERED_BY",
"DTE_MOD",
"MOD_BY",
"VALID_FLAG",
"MOD_NUM",
"DESCRIPTION",
"PROCRGN"],
"DATA":[
[2,35,"144-12DG-261","October, 25 2011 00:00:00",2155.02,"March, 28 2012 00:00:00",48317,null,null,"Y",1,null,"DG"],
[3,35,"144-12DG-264","November, 14 2011 00:00:00",0,"March, 28 2012 00:00:00",48317,null,null,"Y",2,null,"DG"],
[4,35,"144-12DG-268","December, 09 2011 00:00:00",1000.00,"March, 28 2012 00:00:00",48317,null,null,"Y",3,null,"DG"]
]
}
}
私のコード：以下のコードは、実際には3行ではなく2行を提供しますが、最初のデータセットが2回繰り返されます。
// the table containing the index data
var oTable_2 = "";
// the select row
var nTargetRow = "";
//
//var poid = #CntModVal.porder_id#; //should from + column
//
var aData = ""; // holds the text for selected row (column position is critical)
/* -----------------------------------------------------------------------
Jquery Ajax action scrpts
----------------------------------------------------------------------- */
// Method retrieves the selected row index id and executes the ajax call
function getModDetails()
{
//alert('getModDetails');
// retrieve the data from the selected row
aData = oTable_2.fnGetData( nTargetRow );
//alert('adata[1] ' + aData[1]);
// build the url for the ajax call to use
var cfcUrl = '#application.ajax_url#';
cfcUrl +='RemoteModDetails.cfc?';
cfcUrl += 'method=getPos';
cfcUrl +='&porderid=' + aData[1] ; // contract id
// make the ajax call
$.ajax(
{
type: "GET",
url: cfcUrl,
cache: false,
contentType: "application/json; charset=utf-8",
data: "{}",
dataType: "json",
success: function (objResponse )
{ //alert('retrieve the data step 3');
if(objResponse.SUCCESS)
{ // alert('success');
openModDetailRow(objResponse.DATA);
}
else
{
ShowErrors(objResponse.ERRORS);
}
},
error : function(jqXHR, textStatus, errorThrown ) {
ajaxErrorHandler( jqXHR, textStatus, errorThrown );
}
});
}
// Function ajaxErrorHandler
// DESCRITPION: Error Handler fir the error message for failed ajax call'
// PARAMETERS:
// jqXHR = The jqXHR (in jQuery 1.4.x, XMLHttpRequest) object,
// textStatus = a string describing the type of error that occurred
// and an optional exception object, if one occurred.
// Possible values for the second argument (besides null) are
// "timeout", "error", "abort", and "parsererror".
// errorThrown = the textual portion of the HTTP status, such as "Not Found"
// or "Internal Server Error."
function ajaxErrorHandler( jqXHR, textStatus, errorThrown)
{
alert('Unable to retieve the requested information due to a server error');
}
// Handle the failed response error
function ShowErrors( statusMsg)
{
alert('Unable to retieve the requested information. Status: ' + statusMsg);
}
// create the indormation row based on the data retruned by the ajax call
function openModDetailRow(indexInfo)
{
var sOut = '<table align="left" width="95%" cellpadding="2" cellspacing="0" border="1" class="hiddenTbl ui-widget-content">';
$.each(indexInfo, function(index,data){
/* Assumes only one row returns; additional rows ignored */
var aReqNumID = indexInfo.DATA [0][0]; //requisition number id Award amount
var aPorderID = indexInfo.DATA [0][1]; // purchase order id
var aRequistionNum = indexInfo.DATA [0][2]; // Requisition number description
var aAwardDte = indexInfo.DATA [0][3]; // award date date entered
var aAwardAmount = indexInfo.DATA [0][4]; // date modifified
var aDteEntered = indexInfo.DATA [0][5]; // entered by
var aEnteredBy = indexInfo.DATA [0][6]; // modified by
var aDteMod = indexInfo.DATA [0][7]; // mod number
var aModBy = indexInfo.DATA [0][8]; //
var aValidFlag = indexInfo.DATA [0][9]; //
var aModNum = indexInfo.DATA [0][10]; //
var aDescription = indexInfo.DATA [0][11]; // valid flag
//alert('pop details step 4 ' + aPorderID + ' poid');
// create the additonal information table
// row 1
sOut += '<tr><td><strong>Mod Number:</strong><br> <strong style="color:##FF0;"> ' + aModNum + '</strong></td>';
sOut += '<td><strong>Requsition Numbeer:</strong><br> ' + aRequistionNum + '</td><td><strong> Award Amount:</strong><br> <strong style="color:##FF0;">$' + aAwardAmount.toFixed(2) + '</strong></td></tr>';
// row 2
sOut += '<tr><td ><strong>Award Date:</strong><br>' + aAwardDte + ' </td><td ><strong>Description:</strong><br> ' + aDescription + '</td><td> </td></tr>';
});
// end of table
sOut += '</table>';
// display the row
//alert(sOut);
//alert(index,data);
oTable_2.fnOpen( nTargetRow, sOut, 'details' );
}
/* -----------------------------------------------------------------------
* Jquery Display scrpt
* ----------------------------------------------------------------------- */
$(document).ready(function()
{//alert('insert details step 1');
/*
* Insert a 'details' column to the table
*/
var nCloneTh = document.createElement( 'th' ); // for header
var nCloneThF = document.createElement( 'th' ); // for footer
var nCloneTd = document.createElement( 'td' ); // for body
nCloneTd.innerHTML = '<img src="./images/details_open.png">';
nCloneTd.className = "center";
// add blank header
$('##MVW thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );
// add blank footer header
$('##MVW tfoot tr').each( function () {
this.insertBefore( nCloneThF, this.childNodes[0] );
} );
// add icon open/close info rowrow
$('##MVW tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );
// run the jquery data table script
oTable_2 = $('##MVW');
oTable_2.dataTable({
"aoColumnDefs":
[ { "bSortable": false, "aTargets": [ 0 ] } ],
"aaSorting": [[1, 'asc']],
"iDisplayLength": 5,
"aLengthMenu": [[5,10, 25, 50, 100, -1], [5,10, 25, 50, 100, "All"]],
"bJQueryUI": true
});/* end data table */
/* Add event listener for opening and closing details
* Note that the indicator for showing which row is open is not controlled by DataTables,
* rather it is done here
*/
$('##MVW tbody td img').live('click', function () {
nTargetRow = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{ //alert('close row');
/* This row is already open - close it */
this.src = "./images/details_open.png";
oTable_2.fnClose( nTargetRow );
}
else
{
//alert('open row step 2');
this.src = "./images/details_close.png";
getModDetails();
}
} );
});
/* end ready */
だから私は何かが欠けていて、それが何であるかを理解できません。.each() をテーブルタグの外に置くと、コードが壊れて何も得られません。
これをラップすると:: oTable_2.fnOpen( nTargetRow, sOut, 'details' );
私は単一の行を取得します
提案???
ありがとうございました。