Connect #myhtml to dataset - how to

Discussion Ask a question
,
1

I need to connect a dataset to an html box that will show up in the same formatting as the ones I have on my other site pages. I am trying to make an example table, and I already have all of the other tables created.

Here is the code that I am using that has worked on all of the other pages:

function capitalize_Words(str) { return str.replace(/\w\S*/g, function (txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); }); } 
    window.onmessage = (event) => { 
        if (event.data) { 
            var receivedData = event.data; 

            $(document).ready(function () { 
                var jsonArry = $.parseJSON(receivedData); 

                for (var i = 0; i < jsonArry.length; i++) { 
                    delete jsonArry[i]._id; 
                    delete jsonArry[i]._createdDate; 
                    delete jsonArry[i]._updatedDate; 
                    delete jsonArry[i]._owner; 
                } 

                var columnsList = ""; 
                var columnNames = ""; 
                var i = 0; 
                var obj = jsonArry[0]; 

                for (var j in obj) { 
                    columnsList += "{ data: '" + j + "' }"; 
                    columnNames += "{ title: '" + capitalize_Words(j.replace(/_/g, ' ')).replace('Mg', '(mg)').replace('Doseday1000lbs', 'Dose/day/1,000lbs') + "', targets: " + i + "}"; 
                    i++; 
                } 

                columnsList = columnsList.replace(/}{/g, '},{'); 
                columnsList = '[' + columnsList + ']'; 
                columnNames = columnNames.replace(/}{/g, '},{'); 
                columnNames = '[' + columnNames + ']'; 

                var table = $('#table_id').DataTable({ 
                    data: jsonArry, 
                    columns: eval(columnsList), 
                    columnDefs: eval(columnNames), 
                    paging: false, 
                    searching: true, 
                    "bInfo": false 
                }); 

            }); 

        } 
    }; 
    function button_click() { 
        window.parent.postMessage("GetData", "*"); 
    } 

    window.onload = (event) => { 
        document.getElementById("showTable").click(); 
    } 
</script> 

td { 
    border-bottom: solid 1px #F79646; 
    font-family: "Segoe UI", Calibri, Thonburi, Arial, Verdana, sans-serif, "Mongolian Baiti", "Microsoft Yi Baiti", "Javanese Text"; 
    font-size: 10pt; 
} 
th { 
    border: none; 
    font-family: "Segoe UI", Calibri, Thonburi, Arial, Verdana, sans-serif, "Mongolian Baiti", "Microsoft Yi Baiti", "Javanese Text"; 
    font-size: 11pt; 
    color: white; 
    background-color: #F79646; 
} 
table.dataTable thead th, table.dataTable thead td, table.dataTable.no-footer { 
    border: none; 
} 
#table_id_filter { 
    margin-bottom: 10px; 
    float: left; 
    font-family: "Segoe UI", Calibri, Thonburi, Arial, Verdana, sans-serif, "Mongolian Baiti", "Microsoft Yi Baiti", "Javanese Text"; 
    font-size: 10pt; 
}

If it helps, here is the one of the pages with the table on it exactly how I need the other one.

Also, is there anyway to make products in the tables hyperlinks to link to third party sites? Thanks!

2

Hi,
Why do you need to connect the iFrame to the database? Can you please clarify?
As for linking elements to a third party sites, you can create a URL field and connect the table to that field.
Another option is using a repeater which can be sometimes easier to customize.

Have a good day,
Tal.

3

I figured out the code for the first part of my question.

For adding hyperlinks, how do I add URL field in a dataset?

Thanks!

4

Brigid,

did you try a new column in your db table of type url?

Shlomi

682×1350 50.7 KB