DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Datatables too slow at loading on remote server

Datatables too slow at loading on remote server

juanlmendezjuanlmendez Posts: 2Questions: 0Answers: 0
in Free community support

Hello, I am new at this forum. I triyed to ask this question a few days ago but I did not understand how to use the code snippets and the code that I placed was not ok.

I have I php page that display Hotels Data from Database and it is really slow cause when I try to open the file it takes like 1 minute to complete loading and I so I can use search bar or lengthMenu Select for pages. I dont know if I have an error on the js libraries that I am including or what is this.

It has 3 files in order to work ok. Here is the code I use.

****** manage-database-hotels.php ***********
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>V-Admin :: Manage Hotels</title>
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <!-- Add custom CSS here -->
    <link href="css/sb-admin.css" rel="stylesheet">
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
    <link href="../css/dark-hive/jquery-ui-1.10.4.custom.min.css" rel="stylesheet">
    <link href="../css/style_validate.css" rel="stylesheet">
    <link href="../css/table_styles.css" rel="stylesheet">
    
    <link rel="stylesheet" href="../css/dataTables.bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="../css/responsive.bootstrap.min.css" type="text/css">
    
    <script language="javascript" src="../js/jquery-2.1.1.js" type="text/javascript"></script>
    <script language="javascript" src="../js/jquery-ui.min.js" type="text/javascript"></script>
    <script language="javascript" src="../js/functions_manage_hotels.js" type="text/javascript"></script>
    <script language="javascript" src="../js/jquery.validate.min-1.13.js" type="text/javascript"></script>
  </head>
  <body>
    <div id="wrapper">
      <div id="page-wrapper">
        <div class="row">
          <div class="col-lg-12">
            <h1>Manage Database <small>Manage Hotels from Data Base</small></h1>
            <div id="dialog-loading" title="Loading..">
                <spam id="loader" class="loader" style="display:none;"><img src="../images/icon_ajaxloader.gif"><br>Loading..</spam>
            </div>
            <div id="dialog-alert" title="Alert" style="font-family:Arial, Helvetica, sans-serif; font-size:13px;"></div>
            <div id="dialog-alert-update" title="Alert" style="font-family:Arial, Helvetica, sans-serif; font-size:13px;"></div>
            <div id="dialog-message" title="Confirmation" style="font-family:Arial, Helvetica, sans-serif; font-size:13px;"></div>
            
            <table border="0" width="900">
                <tr><td width="200">
                <img src="../images/icon_hotels.png" width="50" height="50" id="AddHotel_i" style="cursor:pointer;" title="New Hotel">&nbsp;
                <a title="New Hotel" id="AddHotel_l" style="cursor:pointer;" >New Hotel</a></td>
                <td align="right">
                <a href="#" title="back">
                <img src="../images/icon_back.png" width="40" height="40"></a></td></tr></table><br><br>
                <div id="Table-Hotels"></div>
                <input type="hidden" name="IdHotelUpdate" id="IdHotelUpdate">
                <input type="hidden" id="action">
                <input type="hidden" id="confirmation_message">
          </div>
        </div><!-- /.row -->
      </div><!-- /#page-wrapper -->
    </div><!-- /#wrapper -->
    <!-- JavaScript -->
    <script src="js/bootstrap.js"></script>
  </body>
</html>

******* jquery functions functions_manage_hotels.js **********
// JavaScript Document
$(document).ready(function(){
    
    LoadHotelTable();
    
    function LoadHotelTable()
    {
        $.ajax({
            url : "manage-database-hotels-table.php",
            type: "POST",
            data: "action=show",
            success: function(data){
                $("#Table-Hotels").html(data);
            }
        });
    }
});

********* php actions: manage-database-hotels-table.php ********
<script type="text/javascript" src="../js/jquery.dataTables.js"></script>
<script type="text/javascript" src="../js/functions_DateTablesControls_Hotels.js"></script>
<script type="text/javascript" src="../js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="../js/dataTables.responsive.min.js"></script>
<?php
    extract($_POST, EXTR_SKIP);
    include("../includes/config.php");
    include("../includes/generalfunctions.php");

switch($action) {

    // *********************************** CASES ACTIONS
    case "show":
    
        // RESERVATION QUERY
    $query="SELECT * FROM hotels WHERE IdStatus = 1 ORDER BY HotelName";                        
        //echo "<pre>$query</pre>";
        $link=mysql_connect($server,$dbuser,$dbpass);
        $result=mysql_db_query($database,$query,$link);
        if( mysql_num_rows($result) )
        {
            $records = true;
            $i = 1;
            while( $Row = mysql_fetch_array($result) )
            {
                $cadenaHTML .= '<tr><td align="center">' . $i . '</td>';
                    
                $cadenaHTML .= '<td align="center">' . $Row["HotelName"] . '</td>';
                $cadenaHTML .= '<td align="center">' . $Row["HotelAddress"] . '</td>';
                $cadenaHTML .= '<td align="center">' . $Row["KeyWestPickUp"] . '</td>';
                $cadenaHTML .= '<td align="center">' . $Row["AmPickUp"] . '</td>';
                $cadenaHTML .= '<td align="center">' . $Row["PmPickUp"] . '</td>';
                $cadenaHTML .= '<td align="center">' . $Row["OrlandoPickUp"] . '</td>';
                $cadenaHTML .= '<td align="center">' . $Row["PickUpOrder"] . '</td>';
                $cadenaHTML .= '<td align="center">';
                
                $cadenaHTML .= '<img src="../images/icon_update.png" width="30" height="30" title="Update Hotel" style="cursor:pointer;">
                                <img src="../images/icon_delete.png" width="30" height="30" title="Delete Hotel" style="cursor:pointer;">';
                $cadenaHTML .= '</td></tr>';
                
                $i++;
            }
        }
                
        if( $records )
        {
            echo '<!-- <table align="center"  class="zui-table zui-table-highlight-all" width="1000"> -->
                    <table align="center" id="tablaDataTables" class="zui-table zui-table-highlight-all" width="100%">
                        <thead><th>NRO</th>
                        <th>HOTEL NAME</th>
                        <th>HOTEL ADDRESS</th>
                        <th>KEYWEST PICK-UP</th>
                        <th>AM PICK-UP</th>
                        <th>PM PICK-UP</th>
                        <th>ORLANDO PICK-UP</th>
                        <th>PU ORDER</th>
                        <th>ACTIONS</th>
                        </thead>
                        <tbody>' . $cadenaHTML . '</tbody>
                    </table>';
        }
        else
            echo '<div align="center">NO RECORDS FOUND</div>';
        
    break;
}

<?php
>
```
?>


I triyed to check with firebug in order to eval response time and here is what I got

GET http://xcursionsusa.org/test/js/jquery.dataTables.js?_=1445222299940 200 OK 11,72s jquery-2.1.1.js (línea 8623)
GET http://xcursionsusa.org/test/js/functions_DateTablesControls_Hotels.js?_=1445222299941 200 OK 590ms jquery-2.1.1.js (línea 8623)
GET http://xcursionsusa.org/test/js/dataTables.bootstrap.min.js?_=1445222299942 200 OK 307ms jquery-2.1.1.js (línea 8623)
GET http://xcursionsusa.org/test/js/dataTables.responsive.min.js?_=1445222299943 200 OK 382ms jquery-2.1.1.js (línea 8623)
```
In fact, sometimes it takes more seconds to fully load all content.

I will appreciate any suggestions so I can get this better performance

Here is the link of the page:

http://xcursionsusa.org/test/admin/manage-database-hotels.php

Replies

  • jLinuxjLinux Posts: 981Questions: 73Answers: 75
    edited October 2015

    I suppose I could be missing something, but I dont see any DataTable() function on the snippets?

    Do I have to do something on the page to replicate this? it loads fine for me

    Edit I see it now http://d.pr/i/1eDEy

    Where in your code are you initializing DataTables?

    Also, I dont know where, but I know you have a non-async xhr query somewhere... thats likely the cause
    http://d.pr/i/1139U

  • jLinuxjLinux Posts: 981Questions: 73Answers: 75
    edited October 2015

    Well, I think I figured it out.. I was able to see the content if your AJAX Post request using curl (curl -X POST -d "action=show" http://xcursionsusa.org/test/admin/manage-database-hotels-table.php).

    I see the entire page that contains your DataTable instance is in the AJAX request, as well as the scripts it requires.. Why dont you have them loaded on the main page?

    The funny part is, these files are all local, but you're making a HTTP request to load them, one of which is the jquery.dataTables.js file, which isnt minified at all..

    Also, the table its loading has 686 images (Atleast in the response I got), so keep in mind that the $.ajax() request has to load all of those too..

    1. Browser loads main manage-database-hotels.php page..
    2. Once thats completed, jQuery executes the Ajax request to manage-database-hotels-table.php
    3. manage-database-hotels-table.php processes the data via PHP (This could also be throwing a wrench into the mix, no idea what this is doing)
    4. manage-database-hotels.php finishes loading the data from manage-database-hotels.php, and has to load all 343 table rows and 686 images into the DOM
    5. DataTables then has to parse the data, and remove all the rows and images, except for the initial 50 records to be displayed

    I don't doubt that this is causing the issue, along with whatever/wherever that non-async xhr request is. This really isnt the proper way to be using DataTables. Pretty much all of the PHP code on manage-database-hotels-table.php should be on the main page.

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.