TryCF Gist

trycf-gist-1559339929597-972f6cf4-d47b-e415-c650-6f74f71d7981.cfm

<cfscript>
    // SETUP
	trips = queryNew(
		"REC_ID, NAME, STATUS, TYPE, YEAR",
		"varchar, varchar, varchar, integer, integer",
		[
		  {"REC_ID":"01", "NAME":"PARIS",  "STATUS":"Approved", "TYPE":1, "YEAR":2019}, 
		  {"REC_ID":"06", "NAME":"AUSTIN", "STATUS":"Inactive", "TYPE":3, "YEAR":2017},
		  {"REC_ID":"48", "NAME":"LONDON", "STATUS":"Approved", "TYPE":2, "YEAR":2018}, 
		  {"REC_ID":"43", "NAME":"ROME",   "STATUS":"Inactive", "TYPE":5, "YEAR":2019}, 
		  {"REC_ID":"61", "NAME":"DUBLIN", "STATUS":"Inactive", "TYPE":4, "YEAR":2019} 
	    ]
	);
    
    // Function to get data. Returns struct. Could easily just use original query object.
    private Struct function getData(){
        // Query
        var q = QueryExecute(("SELECT * FROM trips ORDER BY REC_ID"),{},{dbtype="query"}) ;

        // Build the final array in a format you want. 
        var finArr = [] ;
        for (var r in q) {
            arrayAppend(finArr,r);
        }
        //writeDump(finArr);
        
        return { "numRecords": q.recordcount , "finArr":finArr } ;
    }
    
    local.retDataObj = getData() ;
    
    //writeDump( serializeJSON(local.retDataObj.finArr) );
</cfscript>


My Data Has <a href="#" id="recnum"><cfoutput>#local.retDataObj.numRecords#</cfoutput></a> records. <br><br>

<div id="showme1">  <!--- Container for links. --->
    <!---- We loop over the query output and build links for each row of results. Then use HTML data- attributes to pass a serialized JSON object to our JS. --->
    <cfoutput>
    <cfloop from="1" to="#arrayLen(local.retDataObj.finArr)#" index="i">
        <a href="##" id="idx#i#" class="gd" data-arr='[#serializeJSON(local.retDataObj.finArr[i])#]'>Show Record #i#</a> <br>
    </cfloop>
    </cfoutput>
</div>

<br><br>

<div id="showme2">  <!--- Container for results. --->
    REC_ID: <span id="REC_ID"></span> <br>
    NAME: <span id="NAME"></span> <br>
    STATUS: <span id="STATUS"></span> <br>
    TYPE: <span id="TYPE"></span> <br>
    YEAR: <span id="YEAR"></span> 
</div>

<br><br><br>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('#showme1, #showme2').hide(); // Hide results on page load.
        // Show links when you click recordcount.
        $('#recnum').on('click',function() { 
            $('#showme1').show(); 
        } ) ;
        // Populate and show results when you click applicable link. Data passed from data-arr attribute. 
        $(".gd").on('click',function(){
            $("#showme2").show();
            $("#REC_ID").html( $(this).data("arr")[0]["REC_ID"] );
            $("#NAME").html( $(this).data("arr")[0]["NAME"] );
            $("#STATUS").html( $(this).data("arr")[0]["STATUS"] );
            $("#TYPE").html( $(this).data("arr")[0]["TYPE"] );
            $("#YEAR").html( $(this).data("arr")[0]["YEAR"] );
        });
    });
</script>