DataTables sometimes loads with "No data available in table" until refresh.

ztaylor1990

It might be the way that I am loading and calling datatables. About 50% of the time I will load the page and it's like the query loaded after the table, I get a "No data available in table" until I refresh the page and data loads in the table. A couple of things that I am am doing in my environment is that I am using bootstrap tabs. I am calling the datatable file with xmlhttp request as I am sending data to that php file for the SQL. I am also using a session variable for the SQL. I do not think it has anything to do with the xmlhttp request or session variables because when I remove them and just call the data php file it still happens.

Here is how I am calling the data tables when a tab is clicked

$('#pod1DataTable').dataTable().fnDestroy();pod1DataTable();

My function for xmlhttp

function date_drop8() {
                        str = $('#monthly_count').val();
                        if (str == "") {
                         
                            return;
                        } else { 
                            if (window.XMLHttpRequest) {
                            // code for IE7+, Firefox, Chrome, Opera, Safari
                            xmlhttp = new XMLHttpRequest();
                        } else {
                            // code for IE6, IE5
                            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                        xmlhttp.onreadystatechange = function() {
                            if (this.readyState == 4 && this.status == 200) {
                                document.getElementById("AjaxPODFournew").innerHTML = this.responseText;
                                pod4DataTable();
                            }
                        };
                        xmlhttp.open("GET","php/pod4slidenew.php?q="+str,true);
                        xmlhttp.send();
                       
                    }
                }
                $(document).ready(date_drop8());

my sql and datatable class

include_once $_SERVER['DOCUMENT_ROOT'].'/dependencies/conn.php';
$date_start = $_GET['q'];
$budget = "SELECT * FROM wo_budget_ad_goals_$date_start";
$result = mysqli_query($conn, $budget);
setlocale(LC_MONETARY, 'en_US.UTF-8'); 

$totals = 
"SELECT
SUM(load_goal),
SUM(load_actual),
SUM(gp_goal),
SUM(gp_actual),
SUM(prior_gp),
SUM(revenue_goal),
SUM(revenue_actual),
SUM(stretch_goal)
FROM wo_budget_ad_goals_2020";

$totalResult = mysqli_query($conn, $totals);
if (FALSE === $totalResult) die("Total's row failure: ".mysqli_error);
$totalRow = mysqli_fetch_row($totalResult);

<?php
>
?>


<div class="row slide-title">
  <div class="service-item-title"><?php echo "$date_start";?> AD BUDGET &amp; GOALS</div>
</div>
<div class="table-responsive">
<table class="table table-striped table-bordered pod1" width="" height="" >
  <tr>

kthorngren

Its hard to say without seeing it but I would start debugging this code:

                        xmlhttp.onreadystatechange = function() {
                            if (this.readyState == 4 && this.status == 200) {
                                document.getElementById("AjaxPODFournew").innerHTML = this.responseText;
                                pod4DataTable();
                            }
                        };

I would look at the XHR response in the browser's developer tools to see what it contains and that your DOM base table is populated with data. The screenshot indicates there is no data in the DOM table.

Kevin