如何使用JavaScript在HTML数据表中可视化MySQL表中>1000行？

我目前正在处理一个来自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中运行1000次，然后遍历它并将其附加到Datatable，我的第二个循环在JavaScript中再次运行1000次

因此，当我加载此页面时，加载DataTable中的数据需要花费很长时间

请告诉我如何减少这一时间，并为数据检索循环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先生建议的分页概念对我来说真的很有用

所以，现在我可以在HTML5数据表中可视化>1000行，该数据表是使用我的PHP-API使用JavaScript部署的

供参考：

我使用了基于jQuery的，对于样式部分，我使用了

---

干杯

请为您的数据分页，并在用户滚动页面时发送多个请求。您好@BrunoSousa，您能再解释一下吗？感谢api的支持对您没有帮助。使用分页，每次获取100-200条记录，在每页中显示10-20条记录，并向用户显示一些按钮以导航到下一页和上一页。它还简化了您的工作和用户交互。您好@Rishaldevsingh，谢谢您的回复。你能帮我知道怎么分页吗？或者你知道有什么网站可以为我解释。诀窍是在查询时，你应该使用LIMIT来检索你想要的范围，比如：SELECT*FROM tbl LIMIT 5,10；检索第6-15行。请记住，您需要根据当前页面和每页条目数计算范围。您应该将修改后的代码粘贴到此处，以便其他人获得帮助：Hi@Rishaldevsingh，我已引用DataTables.net服务器端处理：用于处理我的分页问题。它使用JQuery。对于CSS和样式部分，我使用

    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;
        }
        }