Data Table doesn't render on page load, but does on reload

mikep1709

Link to test case: I can't link a test case into here as it is held on an internal firewalled server
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem: I've had an issue with data tables for the last couple of weeks that I've been searching high and low for a solution. I pull the data for a SharePoint List using the REST API and feed that into the data table. The odd thing is when I place that code into a SharePoint page and load the page in Internet Explorer the data table loads correctly. If I try to open the same page in Microsoft Edge the HTML table headers show, but the table doesn't load. If I then click to go to another page on the site, but click back to go back to the Data table page, low and behold the table is there.

I've done an amount of searching for a solution and can't find anything that seems to meet the requirements. I was hoping that someone had experienced something similar and I'm just missing a simple setting somewhere.

kthorngren

Do you get errors in the browser's console? Usually if the Datatable formatting doesn't look correct or its not loading properly there are Javascript errors stopping the script.

What troubleshooting steps have you taken and what did you find? Without seeing the page it will be difficult to offer suggestions.

Kevin

mikep1709

Thanks for coming back to me. There's no obvious errors in the console (to do with datatables anyway). The REST Api call is made, and I can see the data printed in the console, so results are being returned.

Thing that makes it difficult is it works with no issue in IE, so makes it difficult since Microsoft Edge has no in built console/decoder.

I've put break points into the JS code to let me know via the IE console that the programming is reaching different stages. It all seems solid enough until I try running the table in ME. When I do that page loads, headers load table doesn't. I go to any other page, press back and hey presto its there.

kthorngren

Can you post your relevant JS code for Datatables and how you are populating the table?

Kevin

mikep1709

Sorry its taken me a few days. Thought I had the issue beat by using a Script Editor web part, rather than content editor. Issue is still occurring though.

Heres the script that I'm using

<script src="https://SPSITE/SiteAssets/Coding/jquery-3.3.1.min.js"></script>

 

 

<script src="https:// SPSITE /SiteAssets/Coding/jquery.SPServices-2014.02.js"></script>

 

<!-- DataTables CSS -->

<link rel="stylesheet" type="text/css"

href="https:// SPSITE /SiteAssets/Coding/dataTables.css">

<!-- DataTables -->

<script type="text/javascript" charset="utf8"

src="https:// SPSITE /SiteAssets/Coding/dataTables.min.js"></script>

 

 

<table width="100%" cellpadding="0" cellspacing="0" border="0" class="display" id="example">

<thead><th>Header 1</th><th> Header 2</th><th> Header 3</th><th> Header 4</th><th> Header 5</th><th> Header 6</th><th> Header 7</th><th> Header 8</th></thead>

</table>

 

 


<script type="text/javascript">
 

$(document).ready(function(){

                             LoadZipCodes();

});

//https://SPSITE/_api/Web/Lists/GetByTitle(LISTNAME)/items?$select=ku1d,s7og,zlvo,i1hr,u4mo,ID,Referral_x0020_Satus

function LoadZipCodes()

{

        var call = $.ajax({

            url: "https://SPSITE/_api/Web/Lists/GetByTitle(LISTNAME)/items?$select=ku1d,s7og,zlvo,i1hr,u4mo,ID,Referral_x0020_Satus",

            type: "GET",

            dataType: "json",

            headers: {

                Accept: "application/json;odata=verbose"

            }

        });

        call.done(function (data,textStatus, jqXHR){

                                                                                      console.log('Success');

                                                                                      console.log(data.d.results.length);

                                                                                      console.log(data.d.results);

            $('#example').dataTable({

                "bDestroy": true,

                "bProcessing": true,

                "aaData": data.d.results,

                "aoColumns": [

                    { "mData": "ku1d" },

                                                                        { "mData": "Referral_x0020_Satus",

                                                                          "render": function(mData){

                                                                                      if(mData===null){

                                                                                                     return 'New';

                                                                                      } else {

                                                                                                     return mData;

                                                                                      }

                                                                                      }

                                                                          },

                    { "mData": "s7og",                                                             

                                                                         "render": function(mData){

                                                                                      if (mData===null){

                                                                                                     return mData 
                                                                                      } else {

                                                                                      var datestr = mData.substring(8,10) + "/" + mData.substring(5,7) + "/" + mData.substring(0,4);

                                                                                      return datestr;

                                                                                      }

                                                                        }},

                    { "mData": "zlvo" },

                                                                        {"mData": "i1hr",                                                                     

                                                                         "render": function(mData){

                                                                                      if (mData===null){

                                                                                                     return mData 
                                                                                      } else {

                                                                                      var datestr = mData.substring(8,10) + "/" + mData.substring(5,7) + "/" + mData.substring(0,4);

                                                                                      return datestr;

                                                                                      }

                                                                        }},

                                                                        { "mData": "u4mo",                                                                

                                                                         "render": function(mData){

                                                                                      if (mData===null){

                                                                                                     return mData 
                                                                                       } else {

                                                                                      var datestr = mData.substring(8,10) + "/" + mData.substring(5,7) + "/" + mData.substring(0,4);

                                                                                      return datestr;

                                                                                      }

                                                                        }},

                                                                        {"mData": "ID"},

                                                                        { "mData": "ID",

                                                                                      "render": function(mData){

                                                                                                     return "<a href=https://SPSITE/Lists/LISTNAME/Editform.aspx?ID=" + mData + " target='_blank'> EDIT FORM </a>";

                                                                                      }

                                                                        },

                ]

                                           });

        });

        call.fail(function (jqXHR,textStatus,errorThrown){

            alert("Error retrieving Tasks: " + jqXHR.responseText);

        });

}

 

</script>

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

mikep1709

As I was saying in the original post, the coding worked great when we were using a SP2013 server, but since our company has made the move to Sharepoint online this issue occurs intermittently, I'll load the page with the datatable, and sometimes the table will show, other times it won't

kthorngren

My guess is some sort networking issue, outside of Datatables, causing the problem.
Have you tried troubleshooting the network communications to see if there is a response, no response or error response when the issue occurs?

Kevin

mikep1709

Well I've tried to log the REST API calls when making the query, and the thing is in Internet Explorer, the tables work every time. So I can see everything working, its only when I try to get it to run in Microsoft Edge that this error occurs. Unfortunately my organisation has locked the Dev Tools on ME. I was hoping that there would be some kind of coding command that may help, that I haven't been able to find.

kthorngren

Maybe you can start with console.log(data); in the call.done() function. What is the output when Datatables doesn't load the data. You are using jQuery ajax to fetch the data then using "aaData": data.d.results, to load the data. The place to start is to verify the response and the response has this structure: data.d.results.

What you say the table doesn't render what exactly happens? Are there errors in the browser's console?

Kevin

mikep1709

The log of the data definitely returns results (when debugging in IE). The headers load on the page, which is expected as they are HTML, but the datatables styling, pagination, search etc doesn't even show (on initial page load). Click on another site page and click back the table loads as expected.

There are additional apps running on the page (upper organisation ones) which have errors on the IE Console, so I have thought maybe that is causing time delays for the REST call, and it's timing out?

kthorngren

have errors on the IE Console,

If they are Javascript errors the script is likely stopping causing the Datatable initialization to not start or complete.

Kevin

mikep1709

Thanks Kevin,

I thought that would probably be the case, but wasn't sure if maybe I was missing something in terms of a Microsoft Edge specific coding line.

Thanks for your help, ill chase it up with them.