繁体   English   中英

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

[英]How to visualize > 1000 rows from MySQL Table in an HTML DataTable using JavaScript?

我目前正在从JS中访问AJAX请求,该请求又调用了我的PHP API,该API将JSON对象数组返回给我的AJAX请求。 使用此返回的数据,我正在填充HTML DataTable。


我从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代码返回了从MySQL表中提取1000行数据的JSON数组,如下所示:

$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中运行了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先生提出的分页概念确实为我解决了!

因此,现在我可以使用我的PHP-API在HTML5数据表(使用JavaScript部署)中可视化> 1000行。

供参考: 这是一个临时链接作为证明

我已经基于jQuery的数据表使用了服务器端处理 ,对于样式部分,我对数据表使用了基于Bootstrap 3的样式

干杯! :)

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM