Datatables Load speed. To slow at loading on remote server
Datatables Load speed. To slow at loading on remote server
juanlmendez
Posts: 2Questions: 0Answers: 0
Hello, I am new at this forum. Anyone can help me with this problem that I am having.
I have a datatables that gets its data from a Jquery + mysql query. The problem is that it is to slow at loading and it takes almost like 5+ sec at fully loading. Think it is to large. Any suggestions to make it faster??
I checked on with firebug tool and it is taking a lot of time in this requests:
GET http://localhost/xcursions/js/jquery.dataTables.js?_=1443397214675
GET http://localhost/xcursions/js/functions_DateTablesControls.js?_=1443397214676
He´re is some of the code that I am using.
*********************** manage-database-drivers.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 Profile</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_drivers.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 Drivers 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="Table-Drivers"></div>
</div>
</div><!-- /.row -->
</div><!-- /#page-wrapper -->
</div><!-- /#wrapper -->
<!-- JavaScript -->
<script src="js/bootstrap.js"></script>
</body>
</html>
*********************** functions_manage_drivers.js ***************************
// JavaScript Document
$(document).ready(function(){
LoadDriversTable();
function LoadDriversTable()
{
$.ajax({
url : "manage-database-drivers-table.php",
type: "POST",
data: "action=show",
success: function(data){
$("#Table-Drivers").html(data);
}
});
}
});
*********************** manage-database-drivers-table.php ***************************
<?
switch($action) {
// *********************************** CASES ACTIONS
case "show":
// RESERVATION QUERY
$query="SELECT d.IdDriver, d.DriverName, d.DriverPhone, d.DriverEmail, d.LicenceNumber,
DATE_FORMAT(d.LicenceExpDate,'%m/%d/%y') AS LicenceExpDate,
DATE_FORMAT(d.DotExpDate,'%m/%d/%y') AS DotExpDate,
d.SocialSecurity1,
d.SocialSecurity2,
d.SocialSecurity3
FROM drivers d
WHERE d.IdStatus = 1 ORDER BY d.DriverName";
//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) )
{
// Photo Rutes
$query="SELECT * FROM drivers_rute WHERE IdDriver = " . $Row["IdDriver"] . "";
$link=mysql_connect($server,$dbuser,$dbpass);
$result_I=mysql_db_query($database,$query,$link);
$row_I = mysql_fetch_array($result_I);
if( $Row["LicenceExpDate"] == "00/00/00" ) $LicenceExpDate = "";
else $LicenceExpDate = $Row["LicenceExpDate"];
if( $Row["DotExpDate"] == "00/00/00" ) $DotExpDate = "";
else $DotExpDate = $Row["DotExpDate"];
if( $row_I["PhotoRute"] == "" ) $rute = '<img src="../images/icon_noimage.jpg" width="50" height="60">';
else $rute = '<a href="' . $row_I["PhotoRute"] . '" target="_blank"><img src="' . $row_I["PhotoRute"] . '" width="50" height="60"></a>';
$cadenaHTML .= '<tr><td align="center">' . $i . '</td>';
$cadenaHTML .= '<td align="center">' . $rute . '</td>';
$cadenaHTML .= '<td align="center">' . $Row["DriverName"] . '</td>';
$cadenaHTML .= '<td align="center">' . $Row["DriverPhone"] . '</td>';
$cadenaHTML .= '<td align="left">' . $Row["DriverEmail"] . '</td>';
$cadenaHTML .= '<td align="center">' . $Row["LicenceNumber"] . '</td>';
$cadenaHTML .= '<td align="center">' . $LicenceExpDate . '</td>';
$cadenaHTML .= '<td align="center">' . $DotExpDate . '</td>';
$cadenaHTML .= '<td align="center">' . $Row["SocialSecurity1"] . '-' . $Row["SocialSecurity2"] . '-' . $Row["SocialSecurity3"] . '</td>';
// DOCS IMAGES
$cadenaHTML .= '<td align="center">';
if( $row_I["LicenceRute"] == "" ) $Licence_rute = '';
else $Licence_rute = '<a href="' . $row_I["LicenceRute"] . '" target="_blank" title="Licence Photo"><img src="../images/example_licence.jpg" width="50" height="30"></a>';
if( $row_I["DotRute"] == "" ) $Dot_rute = '';
else $Dot_rute = '<a href="' . $row_I["DotRute"] . '" target="_blank" title="Dot Photo"><img src="../images/example_dot.jpg" width="50" height="30"></a>';
if( $row_I["SocialSecurityRute"] == "" ) $SocialSecurityRute_rute = '';
else $SocialSecurityRute_rute = '<a href="' . $row_I["SocialSecurityRute"] . '" target="_blank" title="Social Security Photo"><img src="../images/example_social.jpg" width="30" height="30"></a>';
$cadenaHTML .= $Licence_rute . $Dot_rute . $SocialSecurityRute_rute;
$cadenaHTML .= '<td align="center">';
$cadenaHTML .= '<img src="../images/icon_update.png" width="30" height="30" title="Update Driver" style="cursor:pointer;" onclick="updateDriver(' . $Row["IdDriver"] . ')">
<img src="../images/icon_delete.png" width="30" height="30" title="Delete Driver" style="cursor:pointer;" onclick="deleteDriver(' . $Row["IdDriver"] . ')">';
$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>DRIVER PHOTO</th>
<th>DRIVER NAME</th>
<th>DRIVER PHONE</th>
<th>DRIVER EMAIL</th>
<th>LICENCE #</th>
<th>LICENCE EXP DATE</th>
<th>DOT EXP DATE</th>
<th>SOCIAL SECURITY #</th>
<th>DOCS IMAGES</th>
<th>ACTIONS</th>
</thead>
<tbody>' . $cadenaHTML . '</tbody>
</table>';
}
else
echo '<div align="center">NO RECORDS FOUND</div>';
break;
}
<?php > ************************************************************************************************* ?>
Replies
Well I'm not going to take the time to poke thru thatthat source if you aren't going to take the time to properly include it with syntax highlighting..
But take a look at the deferred loading and deferred rendering examples, might be what you need
Could you also link to the page please - that way we can see if it is the server taking a while to respond, the downlink from the server that is slow or DataTables rendering slowly. If the latter then we can profile the page.
Allan
@allan I doubt it, his sources above link to localhost.