FineReport layered report strategy for solving large data set display problems_html/css_WEB-ITnose

This article takes filling in a report as an example to solve the problem of displaying large data sets through paging.

The idea of ​​implementation is to filter part of the database data in SQL so that the browser can reasonably display the report page. (I use MYSQL for data segmentation and statements. If you want to use other databases, please check the FineReport help document)

Step 1: Open the fenye.cpt file.

The template interface is as follows

Two ds, part of the data, and a hidden row.

Hide a row of content as follows

The function of this data will be discussed below.

The content in ds1 is as follows

?

Statement content SELECT * from aaa limit ${f},${p}

The purpose is to start from the ${f}th jump and select ${p} data (this $p is the number of pages displayed, $f can be calculated with the following formula ($page-1)*$p, mysql limit Offsets start from 0).

In the template parameters, I set their default values ​​

$P=20

$page=1 ;

This is the same as global parameters. You cannot see the data when previewing the template. The parameters must be passed in through the URL when the page is displayed.

The content in ds2 is as follows

This statement is relatively simple, just find the total number of data and divide it by the number of pages per page to get the total Number of pages.

Report body

The data in the first row are the previous page, the next page, the total number of pages and the current page and a / , used to display the previous page and next page in the toolbar. Normally it is not displayed here, so we block (hide) it first. The rest is the display of user data.

In order to display the report the same as our normal report, what else do we need to do?

Here you need to write code to achieve the effect of the above picture.

Click on the gear to preview the application

You can see that we have used 7 custom buttons and a loading end event here

The code for the loading end event is as follows:

var toolbar = contentPane.toolbar;

var items = toolbar.options.items;

var customButton=items[2 ];//JQUERY takes the button on our toolbar. items[2] represents the third one, which is the button that is displayed as a text box.

var inner = customButton.$table;

var btnWrapper = $("em", inner);

btnWrapper.html("");

//Correct this button Properties, make it a text type, centered, and the last icon on the mouse is in editing state.

var cellValue = contentPane.curLGP.getCellValue("D1");//Getting the value of cell D1 is page, which is the current page.

var $input = $("input", btnWrapper);

$input.val(cellValue);//Copy this text control, using the JQUERY method, you can COPY .

var total=contentPane.curLGP.getCellValue("C1");

if (total>parseInt(total)){total=parseInt(total) 1;

}

contentPane.toolbar.options.items[4].setText(total);

//Display the total number of pages on the fifth control, because this value may be a decimal, So decide whether to add one or not.

contentPane.toolbar.options.items[3].setText(contentPane.curLGP.getCellValue("E1"));

//Write the slash on the 4th control.

7 custom buttons:

First homepage:

The code is as follows:

window.location.href="${servletURL}? reportlet=fenye.cpt&op=write&page=1";//Link to fenye.cpt, page parameter=1, represents the first page.

The second previous page:

The code is as follows:

var page= $("tr[tridx=0]","div.content-container") .children().eq(0).html(); //Get the content of the first cell in the first row.

if(page==0)

{

this.setEnable(false);

alert("The page exceeds the specified range");

}

else

window.location.href="${servletURL}?reportlet=fenye.cpt&op=write&page=" page//If it is not less than 1, it is normal Jump, otherwise the displayed page exceeds the specified range and this control setting cannot be used.

The third current page that can be jumped:

var toolbar = contentPane.toolbar;

var items = toolbar.options.items;

var customButton=items[2];

var inner = customButton.$table;

var btnWrapper = $("em", inner);

var $input = $("input", btnWrapper);

//Get this control

$input.blur(function(){

var toolbar = contentPane.toolbar;

var items = toolbar.options.items;

var customButton=items[2];

var inner = customButton.$table;

var btnWrapper = $ ("em", inner);

var $input = $("input", btnWrapper);

var page=$input.val();

var total=$("tr[tridx=0]","div.content-container").children().eq(2).html();

if (total>parseInt(total)) {total=parseInt(total) 1;

}

if(parseInt(page) > parseInt(total) || parseInt(page) < parseInt(1) )

{

alert("The number of pages you output is no longer within the specified range");

}

else

window.location. href="${servletURL}?reportlet=fenye.cpt&op=write&page=" page

});

//Is the value entered after losing focus within the specified range? If When jumping to the specified page, just put the URL after else, otherwise a message indicating that your output page is incorrect will be output. Losing focus means clicking elsewhere or clicking the TAB key.

Fourth slash:
This is handled during load time. No processing required here.
Fifth total page count:
This is handled during load time. No processing required here.
The sixth next page:
var page= $("tr[tridx=0]","div.content-container").children().eq(1).html();
var total=$("tr[tridx=0]","div.content-container").children().eq(2).html();
//JQURUY Take the next page and total Number of pages
if (total>parseInt(total)){total=parseInt(total) 1;
}
//Determine whether the total number of pages is an integer, not plus one
if(parseInt( page) > parseInt(total))
{
this.setEnable(false);
alert("The number of pages exceeds the specified range");
}
else
window .location.href="${servletURL}?reportlet=fenye.cpt&op=write&page=" page
//If the next page is in this range, jump there


This control is not available Used, the output is wrong.
The seventh last page:
The code is as follows:
var total=$("tr[tridx=0]","div.content-container").children().eq(2). html();
//Get the total number of pages.
if (total>parseInt(total)){total=parseInt(total) 1;
}
window.location.href="${servletURL}?reportlet=fenye.cpt&op=write&page=" total
//Determine whether the total number of pages is an integer, not plus one, and jump to the last page.
The name of the display control needs to be added to the alias