current position:Home>Pure front-end 100000 + data volume two-dimensional table - realize the effect of turning pages and loading data

Pure front-end 100000 + data volume two-dimensional table - realize the effect of turning pages and loading data

2021-08-23 05:07:55 LanLan_ Guo

In the process of report design, we sometimes encounter report display with large amount of data , So for report presentation with large amount of data , If you load all the data on the page at once , That is bound to cause page jam 、 Slow response and other performance problems . So how can we optimize the performance of such a large amount of data report ?

One 、 The problem background

Front end performance optimization has always been a big topic , There may be many performance problems in the actual project , There are many common optimization methods , Like mergers JS/CSS file 、 Reduce http request 、 Lazy loading 、 Image compression, etc . Here we only focus on when the amount of data is large , How do we optimize performance . If the little brothers and sisters in the back end throw tens of thousands of data to the front end , What should we do when we get it ? In fact, the core idea is to display the data in segments ! Only the report data of the visual area is loaded at a time , When turning to the next page, take the data of the next page for display . So every time the report is rendered , Will only render when the page is visible dom Elements , Tens of thousands of rows of report data will not be rendered and loaded on the page at one time .

Two 、 Optimize the actual battle

So what should we do when it comes to reality ? Here I will ActiveReports JS Pure front-end report control as an example , Take a look at AR JS How to display a large amount of data report in .

1、 Custom report page turning button
Page loading report data , First, customize the page turning button , When you click to the next page , Then load the data of the next page .ARJS Provides the function of customizing the page turning button , So first add a custom button :

const prevPageButton = {
      key: '$prevPageButton',
      text: " The previous page ",
      title: "prevPageButton",
      enabled: true,
      action: function () {}
};
const nextPageButton = {
      key: '$nextPageButton',
      text: " The next page ",
      title: "nextPageButton",
      enabled: true,
      action: function () {}
};
const pageCount = {
      key: '$pageCount',
      text: `1/ ${totalPage}`,
      title: "pageCount",
      enabled: true
};

Here I define three buttons , Respectively “ The previous page ”、“ The current page ”、“ The next page ”, among “ The current page ” In the process of page turning, the page display will be continuously calculated and updated . Then add a few buttons to ARJS Of viewer On the object :

 viewer = this.$refs.reportViewer.Viewer();
this.designerHidden = true;
[ prevPageButton, pageCount, nextPageButton ].forEach((item) => {
      viewer.toolbar.addItem(item);
})
viewer.toolbar.updateLayout({default: ["$zoom", "$split", "$print","$prevPageButton", "$pageCount", "$nextPageButton"]});

api I will not repeat the use of , You can refer to the help documentation :https://demo.grapecity.com.cn/activereportsjs/docs/GettingStarted/ResourceGuid

2、 Display data in pages

After customizing the button, we need to realize how to page and fetch data , Show only the current page data . We need to calculate in advance how many pieces of data can be displayed on each page , For example, I show every page here 29 Data , So every time you take it out of the back-end data 29 A piece of data is passed to the report display :

let currentPage  = 1;
// Number of data pieces displayed per page 
let once = 29;
// Calculate the total number of pages to display 
const totalPage = salesData.length % once ? Math.floor(salesData.length / once) + 1 : Math.floor(salesData.length / once);

Initial preview , Before sending to the report 29 Data :

openReportView(salesData.slice(0, 29));

function openReportView(data) {
      definition.DataSources[0].ConnectionProperties.ConnectString = "jsondata=" + JSON.stringify(data);
      viewer.open(definition);
}

Judge the logic when turning the page , Transfer data segments to the report file , The logic here needs to be defined in the previously defined button Provided action Interface , At the same time, after defining the page turning data logic , We also need to update the display of the current page :

 const prevPageButton = {
      key: '$prevPageButton',
      text: " The previous page ",
      title: "prevPageButton",
      enabled: true,
      action: function () {
        if(currentPage === 1) {
          return null;
        } else {
          currentPage --;
          let data = salesData.slice((currentPage-1) * once, currentPage * once);
          openReportView(data);
          pageCount.onUpdate([], pageCount);
        }
      }
    };
    const nextPageButton = {
      key: '$nextPageButton',
      text: " The next page ",
      title: "nextPageButton",
      enabled: true,
      //action Interface to update the data logic displayed each time 
      action: function () {
        if(currentPage === totalPage) {
          return null;
        } else  {
          currentPage ++;
          let data = currentPage === totalPage ? salesData.slice((currentPage-1) * once, salesData.length) : salesData.slice((currentPage-1) * once, currentPage * once);
          openReportView(data);
          // Call the logic to update the display of the current page number 
          pageCount.onUpdate([], pageCount);
        }
      }
    };
    const pageCount = {
      key: '$pageCount',
      text: `1/ ${totalPage}`,
      title: "pageCount",
      enabled: true,
      // Realize the logic of updating page number 
      onUpdate: function (args, currentItem) {
        currentItem.text = `${currentPage}/${totalPage}`;
      }
    };

3、 ... and 、 Effect comparison

So far, the logic of displaying large data reports in pages has been completed . Let's compare the results !

Before paginated display of data :
image.png
Display data in pages :
image.png

You can see the top two GIF There is a clear contrast , Before paging, click preview and there will be about two seconds of blank loading time , And after paging , Click preview and the data will be displayed immediately . Here I have more than 10000 lines of test data , So when the data returned from the back end exceeds 10000 or more , The pre loading time will be more , At this point, this paging loading method is very useful , Faster data presentation in front of users .

copyright notice
author[LanLan_ Guo],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210823050750117m.html

Random recommended