如何使用 JavaScript 在 HTML 数据 Table 中可视化来自 MySQL Table 的 > 1000 行？
How to visualize > 1000 rows from MySQL Table in an HTML DataTable using JavaScript?
我目前正在点击来自 JS 的 AJAX 请求，它又调用我的 PHP API，returns 一个 JSON 对象数组回到我的 AJAX 请求。使用这个返回的数据，我正在填充我的 HTML DataTable.
我的 AJAX 请求 从我的 PHP API 检索数据是：
$.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 代码 其中 returns JSON 数组从 MySQL [= 中提取了 1000 行数据59=]如下：
$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 次，然后遍历它并将其附加到 Datatable，我的第二个循环在 JavaScript。
因此，当我加载此页面时，需要永远加载数据 Table 中的数据。
请告诉我如何减少这个时间，并循环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;
}
}
相应地使用返回的数据，即 html 中的 dataFetchedFromDB。
您可以通过调用我在您所需的技术堆栈中使用的相同查询并根据您的需要使用返回的数据，以类似的方式实现这一点。
Bruno Sousa 先生和 Rishal dev singh 先生建议的分页概念对我来说真的很有效！
所以，现在我可以使用 PHP-API.[=12= 在 HTML5 DataTable（使用 JavaScript 部署）中可视化 > 1000 行]
供您参考：here's a temporary link as a proof
我用过Server Side processing for DataTables which is based on jQuery, and for the Styling Part, I have used Bootstrap 3 Based Styling for Datatables
干杯！ :)
我目前正在点击来自 JS 的 AJAX 请求，它又调用我的 PHP API，returns 一个 JSON 对象数组回到我的 AJAX 请求。使用这个返回的数据，我正在填充我的 HTML DataTable.
我的 AJAX 请求 从我的 PHP API 检索数据是：
$.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 代码 其中 returns JSON 数组从 MySQL [= 中提取了 1000 行数据59=]如下：
$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 次，然后遍历它并将其附加到 Datatable，我的第二个循环在 JavaScript。
因此，当我加载此页面时，需要永远加载数据 Table 中的数据。
请告诉我如何减少这个时间，并循环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;
}
}
相应地使用返回的数据，即 html 中的 dataFetchedFromDB。
您可以通过调用我在您所需的技术堆栈中使用的相同查询并根据您的需要使用返回的数据，以类似的方式实现这一点。
Bruno Sousa 先生和 Rishal dev singh 先生建议的分页概念对我来说真的很有效！
所以，现在我可以使用 PHP-API.[=12= 在 HTML5 DataTable（使用 JavaScript 部署）中可视化 > 1000 行]
供您参考：here's a temporary link as a proof
我用过Server Side processing for DataTables which is based on jQuery, and for the Styling Part, I have used Bootstrap 3 Based Styling for Datatables
干杯！ :)