Unable to render Datatable from JSON hosted on url

robgrame

Hi all,

I'm reaching you out as I'm trying to render in the form of a table some data in the form of a json file hosted on a remote URL.
Though the actual data is different, I have the same exact issue either with some sample data .

Despite I'm able to render correctly the table on my dev environment, whenever I test the web page on the web server keeps reporting Loading status.

Even though I've followed the documentation and guidelines I'm sure I'm still missing some configuration.

This is the script block loading the JSON file

<script type="text/javascript">
$(document).ready(function() {
    $('#empTable').dataTable({
        "ajax": {
            url:"https://securesajson.blob.core.windows.net/jsonrepository/empdata.json",
            "dataType": "json"
        },              
        "columns": [
            {"data": "name"},
            {"data": "designation"},
            {"data": "office"},
            {"data": "extension"},
            {"data": "joining_date"},
            {"data": "salary"}
        ]
    });   
});
</script>

Any help is very appreciated

roberto

kthorngren

Do you get errors, either alerts or in the browser's console?

Can you post a link to your page or a test case replicating the issue? Maybe grab a debugger collection for the developers to look at.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

robgrame

Hi @kthorngren

Thanks for the valuable suggestion.
Just figured out the issue "Access to XMLHttpRequest has been blocked by CORS".

Adding required CORS rules on Azure blob storage solved the issue.

https://docs.microsoft.com/en-us/rest/api/storageservices/cross-origin-resource-sharing--cors--support-for-the-azure-storage-services

THANKS !