我当前正在点击来自 JS 的 AJAX 请求，JS 又调用我的 PHP API，后者将 JSON 对象数组返回到我的 AJAX 请求。使用返回的数据，我正在填充我的 HTML 数据表。
我从 PHP API 检索数据的 AJAX 请求是:
$.ajax({
type: "POST",
url: "../Retrievers/Retriever-DataTable-API.php",
data: {"table_name" : table_name},
async: true,
success: function(data, textStatus, jqXHR){
console.log(data);
var obj = jQuery.parseJSON(data);
console.log(obj);
if(obj.status == '200'){
var counter = 0;
var size = Object.size(obj.Data[0]['Date']);
while(counter < size){
//This loops 1000 times for adding New Columns to DataTable via Javascript
table.row.add( [
obj.Data[0]['Date'][counter],
obj.Data[0]['Time'][counter],
obj.Data[0]['tss'][counter],
obj.Data[0]['milk'][counter],
obj.Data[0]['milk2'][counter],
obj.Data[0]['ac_voltage'][counter],
obj.Data[0]['compressor_current'][counter],
obj.Data[0]['discharge_pump_relay'][counter],
obj.Data[0]['agitator_relay'][counter],
obj.Data[0]['discharge2_pump_relay'][counter],
obj.Data[0]['agitator2_relay'][counter],
] ).draw( false );
counter++;
// Automatically add a first row of data
$('#addRow').click();
}
}else {
console.log(obj.status);
}
},
error: function(){
console.log("ajax error for data-table");
},
}); //ajax request for DataTable ends here
而且，我的 PHP API 代码 返回 JSON 数组，其中包含从 MySQL 表中提取的 1000 行数据，如下所示:
$Table_Name = $_POST['c_name']; //Read incoming Table Name sent from AJAX Request
$query1 = "SELECT * from database1.".$Table_Name." ORDER BY TableTimeStamp DESC limit 1440;";
$result = mysqli_query($con, $query1);
if(mysqli_num_rows($result)>0){
while ($row=mysqli_fetch_row($result)){
//This loops 1000 times to read data and insert it in JSON Array
//Capture $TableTimeStamp and split it into Date and Time Columns
$temp = new DateTime($row[11]);
array_push($DateArray, $temp->format('d-m-Y'));
array_push($TimeArray, $temp->format('H:i:s'));
array_push($tssArray, $row[12] * $scaling_offset_for_tss);
array_push($milkArray, $row[13] * $scaling_offset_for_milk);
array_push($cheeseArray, $row[41] * $scaling_offset_for_cheese);
} //while ends here
$response = array(
'status'=> '200',
'Data'=>[
array(
'Date' => $DateArray,
'Time' => $TimeArray,
'tss' => $tssArray,
'milk' => $milkArray,
'cheese' => $cheeseArray
)]
);
echo json_encode($response); //This returns Array of 1000 rows of MySQL Data back to my ajax function
} //main for ends here
所以，基本上这里发生的是我的第一个循环在 PHP API 中运行 1000 次，然后为了遍历它并将其附加到数据表，我的第二个循环再次在 JavaScript 中运行 1000 次。
因此，当我加载此页面时，需要很长时间才能加载数据表中的数据。
请告诉我如何减少这个时间，并循环2000次进行数据检索。
另外，我计划用 NodeJS API 替换这个 PHP API，所以请告诉我，如果使用 NodeJS 也可以完成任何事情。
最佳答案
我在 PHP 或 Node.js 中没有任何类似的东西，但我已经在 java 中实现了一些东西，我将其发布在这里供您引用，
package com.synchrony.dev.dao;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletContext;
import com.synchrony.framework.common.PropertyUtil;
import com.synchrony.framework.common.SynchronyCommon;
import com.synchrony.framework.database.AbstractDataBaseConnectionHandler;
import com.synchrony.framework.exception.ApplicationFatalException;
import com.synchrony.rishal.valueobjects.Table_8;
public class Table_8DAO extends AbstractDataBaseConnectionHandler<Table_8> {
public List<Table_8> select(ServletContext context) throws ApplicationFatalException {
Connection conn = this.getConnection(context);
List<Table_8> dataFetchedFromDB = new ArrayList<Table_8>();
try {
int pageNumber = 1;
if (null != context.getAttribute(SynchronyCommon.PAGE_NUM)) {
pageNumber = Integer.parseInt((String) context.getAttribute(SynchronyCommon.PAGE_NUM));
}
//Query to fetch according to the page number and frame size.
PreparedStatement ps = conn.prepareStatement(
"SELECT * FROM(SELECT a.*, rownum r1 FROM(SELECT * FROM Table_8) a WHERE rownum < ((? * ?) + 1 )) WHERE r1 >= (((?-1) * ?) + 1)");
//The below value is used to fetch 10 records in each db call. you can increase this value to any 20/50/100.
int numberOfRecordsFetchedInOneCall = Integer
.valueOf(PropertyUtil.getProperty(SynchronyCommon.LIST_OF_RECORDS_IN_PAGINATED, context));
ps.setInt(2, numberOfRecordsFetchedInOneCall);
ps.setInt(4, numberOfRecordsFetchedInOneCall);
ps.setLong(1, pageNumber);
ps.setInt(3, pageNumber);
ResultSet rs = ps.executeQuery();
if (!rs.isBeforeFirst()) {
if (pageNumber < 1) {
pageNumber++;
ps.setLong(1, pageNumber);
ps.setInt(3, pageNumber);
rs = ps.executeQuery();
context.setAttribute(SynchronyCommon.PAGE_NUM, pageNumber);
context.setAttribute(SynchronyCommon.ERROR_MESSAGE, "No More records present");
} else {
pageNumber--;
ps.setLong(1, pageNumber - 1);
ps.setInt(3, pageNumber - 1);
rs = ps.executeQuery();
context.setAttribute(SynchronyCommon.PAGE_NUM, pageNumber);
context.setAttribute(SynchronyCommon.ERROR_MESSAGE, "No More records present");
}
} else {
context.setAttribute(SynchronyCommon.PAGE_NUM, pageNumber);
context.setAttribute(SynchronyCommon.ERROR_MESSAGE, null);
}
while (rs.next()) {
Table_8 temp = new Table_8();
temp.setTitle((String) rs.getString(1));
temp.setPlatform((String) rs.getString(2));
temp.setScore((double) rs.getDouble(3));
temp.setGenre((String) rs.getString(4));
temp.setEditorsChoice((String) rs.getString(5));
dataFetchedFromDB.add(temp);
}
} catch (SQLException e) {
throw new ApplicationFatalException(e.getMessage(), e.getCause());
} finally {
if (null != conn)
closeConnection(conn);
}
return dataFetchedFromDB;
}
}
相应地使用返回的数据，即 dataFetchedFromDB 。
您可以通过调用我在所需技术堆栈中使用的相同查询以类似的方式实现此目的，并根据您的需要使用返回的数据。
关于javascript - 如何使用 JavaScript 在 HTML 数据表中可视化 MySQL 表中超过 1000 行的数据？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48415905/