Search code examples
javascriptjquerycoldfusioncoldfusion-10coldfusion-2016

How to loop and display SQL data in table by JQuery in coldfusion

Here I have developed my Jquery code my jquery code

<html>
    <head>
        <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    </head>
    <body>
        <script>
            $(document).ready(function(){
                $("button").click(function(){
                    $.ajax({
                        type: 'GET',
                        url: "3.cfc?method=test", 
                        success: function(data){
                            document.getElementById("demo").innerHTML = data
                        }
                    });
                });
            });
        </script>
        <div id="demo">
            <button type="button" id="texts">GET college details by jquery</button>
            <p id="urlPage"></p>
        <div>
    </body>
</html>

Here My coldfusion component code my cfc code

<cffunction  name="test" access="remote" returnformat="JSON" returntype="query">
    <cfquery name="jsresult" datasource="student" result="result" >
        SELECT * FROM clg 
    </cfquery>
    <cfreturn jsresult>
</cffunction>

Finally I got This Output my output

{"COLUMNS":["COLLEGENO","COLLEGENAME","DEPT"],"DATA":[[1,"nec","cse"],[2,"kamaraj","mech"],[3,"voc","arts"],[4,"srm","It"],[5,"mitrah","cse"],[6,"mitrah","cse"],[7,"candy","it"],[8,"",""],[9,"fx","eee"],[10,"svs","eee"]]}
Solution

  • Your answer seems incomplete, but I guess what you want to approach is to fill a custom HTML table with the data you've returned.

    To do so, you will have to create the table manually via HTML crafting iterating over your object response.

    An example would be

    var TableConstructor = "<table> <tr>";
// Assuming item is the object you want to iterate over..
item.forEach( (element) => {
  TableConstructor += `<td>{element}</td>`;
});
TableConstructor += "</tr> </table>";

    Then you only have to append the data to the HTML element you want to hold it.

    This is a raw idea of how you could create the table with the data you have from the response.